《css盒子模型本》由会员分享，可在线阅读，更多相关《css盒子模型本（75页珍藏版）》请在金锄头文库上搜索。
1、CSS盒子模型,第10章,10.1 盒子BOX的基本概念,10.2 边框的基本属性,10.3边距,10.4边框的其它属性,10.5 综合案例盒子布局排版,CSS盒子模型,本章学习目标： （1）理解盒子元素的基本形式。 （2）理解盒子所占幅面的大小。 （3）能够设置边框颜色、线形和粗细等属性。 （4）能够设置内外边距。 （5）能够使用CSS3新增的圆角边框、图像边框和盒子阴影等属性。 （6）能够综合设计盒子幅面和样式。,在HTML文档中，每个元素都有盒子模型，所以说在Web世界里（特别是页面布局），盒子模型无处不在，这个盒子就是一个矩形的块，可以对其进行幅面、边框和边距的设置。,10.1 盒子B
2、OX的基本概念,10.1.1 盒子的基本形式,每一个盒子都有三个必须了解的参数，border（边框）、padding（内边距）和margin（外边距），盒子模型规定了处理元素内容和内边距、边框以及外边距的方式。,【例10-1】盒子模型示例（10-1.html）,部分代码如下：, body,h1,p,b,span,img margin:5px; /*外边距5像素*/ padding:10px; /*内边距10像素*/ border:2px solid black; /*边框2像素黑色实线*/ b,span color:#6FF; 一级标题 段落文字（此处粗体强调）：感受CSS如何处理HTML元素
3、盒子，每个盒子的表现形式如何？在例子中会为每个盒子添加边框和内外边距。 段落文字：每一个盒子都有三个必须了解的参数，border（边框）、padding（内边距）和margin(外边距)，盒子模型规定了处理元素内容和内边距、边框以及外边框的方式。 ,10.1.2 盒子大小的计算width/height,基本语法：,width: auto | 长度 | 百分比; height: auto | 长度 | 百分比;,语法说明：,auto：无特定宽高值，取决于其它属性值。 长度：用长度值来定义宽高，不允许负值。 百分比：用百分比来定义宽高，不允许负值。,根据目前多数主流高版本浏览器的盒子大小计算规则，
4、width和height默认指的是内容部分的宽高，是不包含padding、margin和border在内的，要想改变盒子大小的计算规则，则要使用box-sizing属性，此属性下一小节详解。 多数情况下，盒子所占据的真正大小是：,盒子所占宽度= width（内容宽度）+ padding（左右）+ margin（左右）+ border（左右） 盒子所占高度= height（内容高度）+ padding（上下）+ margin（上下）+ border（上下）,【例10-2】设置盒子大小（10-2.html）,部分代码如下：, div width:300px; /*宽300像素*/ height:2
5、00px; /*高200像素*/ margin:15px; /*外边距15像素*/ padding:20px; /*内边距20像素*/ border:15px solid green; /*边框15像素绿色实线*/ div盒子中的内容 ,10.1.3 改变盒子大小的计算方式box-sizing,基本语法：,width: 值; height: 值; box-sizing: content-box | border-box;,语法说明：,content-box：标准模式下的盒子模型。padding、border和margin不被包含在定义的宽高之内，此时设定的width仅指内容的宽度，height
6、亦类似。 border-box：怪异模式下的盒子模型。padding和border被包含在定义的width和height之内，此时设定的width指“内容+border+margin”，height类似。很多旧式浏览器，如IE7.0及其之前版本，默认的盒子大小计算模式就是如此。,【例10-3】改变盒子大小的计算方式（10-3.html）,部分代码如下：, #cbox width:200px; /*宽200像素*/ height:100px; /*高100像素*/ margin:15px; /*外边距15像素*/ padding:10px; /*内边距10像素*/ border:10px sol
7、id green; /*边框10像素绿色实线*/ box-sizing:content-box; /*width、height仅指内容宽高*/ #bbox width:200px; /*宽200像素*/ height:100px; /*高100像素*/ margin:15px; /*外边距15像素*/ padding:10px; /*内边距10像素*/ border:10px solid green; /*边框10像素绿色实线*/ box-sizing:border-box; /*width、height指内容宽高+margin+border*/ content-box方式 border-bo
8、x方式 ,10.2 边框的基本属性,边框border用于指定盒子的边框应如何呈现，边框样式属性最基本的有style、color和width，分别表示边框的样式、颜色和厚度。,10.2.1 边框样式border-style,基本语法：,border-style: 样式值1,4; border-top-style: 样式值; border-bottom-style: 样式值; border-left-style: 样式值; border-right-style: 样式值;,border-style属性用来控制对象的边框样式，可同时设定1个或多个边框样式。 另外还有四个分属性border-top-s
9、tyle、border-right-style、border-bottom-style和border-left-style分别对应上、右、下、左4个边的边框样式。,语法说明： 样式值如表10-1所示。 border-top-style、border-right-style、border-bottom-style和border-left-style属性只能有1个值。 border-style的值可以是1-4个，中间以空格分隔。如果只提供1个值，将用于全部的4个边框；如果提供2个值，则第1个用于上、下边框，第2个用于左、右边框；如果提供3个值，则第1个用于上边框，第2个用于左、右边框，第3个用于下
10、边框；如果提供全部4个值，将按按照上、右、下、左的顺序作用于4个边框。,【例10-4】设置边框样式（10-4.html）,部分代码如下：, div width:80px; height:50px; margin:10px; /*外边距*/ float:left; /*左边浮动*/ font-size:13px; #bs1 border-style:none; #bs2 border-style:solid; #bs3 border-style:solid dashed; #bs4 border-style:solid dashed double; #bs5 border-style:solid
11、 dashed double dotted; #bs6 border-style:groove; #bs7 border-style:ridge; #bs8 border-style:inset; #bs9 border-style:outset; #bs10 border-top-style:solid; border-right-style:dashed; border-bottom-style:double; border-left-style:dotted; , none无边框 1个值solid 2个值solid dashed 3个值solid dashed double 4个值sol
12、id dashed double dotted groove3D凹槽 ridge3D凸槽 inset3D凹边 outset3D凸边 分别设定四个边 ,10.2.2 边框厚度border-width,基本语法：,border-width: 厚度值1,4; border-top-width: 厚度值; border-bottom-width: 厚度值; border-left-width: 厚度值; border-right-width: 厚度值;,语法说明： 厚度值可以是长度或关键字，关键字可以是medium、thin和thick，分别表示中等厚度的边框、细边框和粗边框。 border-top-
13、width、border-right-width、border-bottom-width和border-left-width属性只能有1个值。 border-width的值可以是1-4个，中间以空格分隔。如果只提供1个值，将用于全部的4个边框；如果提供2个值，第1个用于上、下边框，第2个用于左、右边框；如果提供3个值，第1个用于上边框，第2个用于左、右边框，第3个用于下边框；如果提供全部4个值，将按照上、右、下、左的顺序作用于4个边框。,【例10-5】设置边框厚度（10-5.html）, div width:80px; height:50px; margin:10px; /*外边距*/ flo
14、at:left; /*左边浮动*/ font-size:13px; border-style:solid; /*边框样式solid*/ #bw1 border-width:thick; #bw2 border-width:2px 4px; #bw3 border-width:2px 4px 6px; #bw4 border-width:2px 4px 6px 8px; #bw5 border-top-width:2px; border-right-width:4px; border-bottom-width:6px; border-left-width:8px; , 1个值thick 2个值2
15、px 4px 3个值2px 4px 6px 4个值2px 4px 6px 8px 分别设定4个边2px、4px、6px和8px ,部分代码如下：,10.2.3 边框颜色border-color,基本语法：,border-color: 颜色值1,4; border-top-color: 颜色值; border-right-color: 颜色值; border-bottom-color: 颜色值; border-left-color: 颜色值;,语法说明： 颜色值可以是任何合法CSS颜色值。 border-top-color、border-right-color、border-bottom-col
16、or和border-left-color属性只能有1个值。 border-color的值可以是1-4个，中间以空格分隔。如果只提供1个值，将用于全部的4个边框；如果提供2个值，第1个用于上、下边框，第2个用于左、右边框；如果提供3个值，第1个用于上边框，第2个用于左、右边框，第3个用于下边框；如果提供全部4个值，将按照上、右、下、左的顺序作用于4个边框。,【例10-6】设置边框颜色（10-6.html）,部分代码如下：, div width:80px; height:50px; margin:10px; /*外边距*/ float:left; /*左边浮动*/ font-size:13px; border-style:solid; /*边框样式solid*/ border-width:10px; /*边框宽度1
