盒子模型课件.pptVIP

盒子模型 （一）div+span标签 （二）盒子模型 （三）实例 （一）、 div标记与span标记 span标记与div标记一样，作为容器标记而被广泛应用，在上面的例题中如果将div替换成span，执行后效果是一样的。可以说div和span两个标记都有独立出各个区块的作用，在这个意义上两者没有太多不同。 例如： pdiv标记不同行：/p divimg src=building.jpg/div divimg src=building.jpg/div divimg src=building.jpg/div pspan标记同一行：/p spanimg src=building.jpg/span spanimg src=building.jpg/span spanimg src=building.jpg/span （二）、 盒子模型 盒子模型是CSS控制页面时一个很重要的概念，只用掌握了盒子模型以及其中每个元素的用法，才能真正的控制页面中各元素的位置。 1、盒子模型的概念 一个盒子模型由content、border(边框)、padding (内容与边框距离) 、margin (元素之间的距离)这4个部分组成。 （1） 一个盒子的实际高度或宽度是由： content+padding+border+margin组成的。 （2）width和height的值控制content的大小,背景颜色是设置边框区域内的颜色（包括边框） （3）并且对于任何一个盒子都可以分别设定4条边各自的border、padding和margin （4）倘若将盒子模型比作展览馆里展出的一幅幅画，那么 Content就是画面本身； Padding就是画面与画框之间的留白； Border就是画框； Margin就是画与画之间的距离。 （5）利用好盒子的这些属性，就能够实现各种各样的排版效果。 （6）DM设计视图查看盒子模型 2、 border（画框） border会占据空间，计算实际宽度和高度时应考虑。 border属性主要有3个：color、width和style。 Width:thin/medium(默认,约2px)/thick/具体的数值; style:none/hidden/dotted/dashed/solid/double/groove/ ridge/inset/outset等。 单边边框属性 上下左右四个边框不但可以统一设定，也可以分开设定 。 设定上边框属性，你可以使用border-top, border-top-width, b order-top-style, border-top -color。 设定下边框属性 ，你可以使用b order-bottom, border-bottom-width, border-bottom-style, border-bottom-color。 设定左边框属性，你可以使用b order-left, b order-left-width , border-left-style , border-left-color。 设定上边框属性，你可以使用b order-right, b order-right-width, border-right-style, b order-right-color。 如果希望在某段文字结束后加上虚线用于分割，而不是 用border将整个段框起来，可以通过单独设置 border-bottom来实现。例如： 需要注意的是，在特定情况下给元素设置 background-color背景色时，IE作用的区域为Content+padding，这点在border为粗虚线时很明显。 3、 padding（留白） padding用于控制content与border之间的距离，如果修改上例，加入padding-bottom:30px;显示效果如下： 某些时候需要同时设置4个方向的padding值时，可以将4个语句合成到一起，例如： .outside{padding:10px 30px 50px 100px; /* 同时设置，顺时针 （上右下左）*/ border:1px solid #000000; /* 外边框 */ background-color:#fffcd3; /* 外背景 */} .inside{ background-color:#66b2ff; /* 内背景 */ border:1px solid #005dbc; /* 内边框 */ width:100%; line-height:40px; text-align:cent