CSS盒子模型（上）
盒子模型（Box Model）是CSS控制页面时一个很重要的概念。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。
所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。 一般来说这些被占据的空间往往都要比单纯的内容大。 可以通过调整盒子的边框和边距等参数，来调节盒子的位置和大小。一个页面由很多这样的盒子组成，这些盒子之间会互相影响。
掌握盒子模型需要从两方面来理解：一是理解单个的盒子的内部结构；二是理解多个盒子之间的相互关系。
本文首先讲解独立的盒子相关的性质，然后介绍在普通情况下盒子的排列关系。下一次将更深入地讲解浮动和定位的相关内容。
一． 盒子模型概念
1.现实生活中的盒子：
图1 现实生活中的盒子
2. 盒子模型（Box Model）
在网页布局中，为了能够使纷繁复杂的各个部分合理地进行组织，通过研究，总结出了一套完整的、行之有效的原则和规范，这就是“盒子模型”的由来。
在CSS中，一个独立的盒子模型由内容(content)、边框(border)、填充(padding)和边界(margin)4个部分组成：
内容(content)：对应盒内物品
边框(border)：对应包装盒的纸壳，具有厚度
填充(padding)：位于边框内部，是内容与边框的距离，对应包装盒的填充部分
边界(margin)：位于边框外部，是边框外面周围的间隙，对应纸壳外围间隙
图2 标准盒子模型
3. 盒子模型的三维立体结构图
图3 CSS2.0盒子模型的三维立体结构图
▪边框（border），位于盒子的第一层。
▪元素内容（content）、内边距（padding），两者同位于第二层。
▪背景图（background-image），位于第三层。
▪背景色（background-color），位于第四层。
▪整个盒子的外边距（margin），位于第五层。
二． 盒子模型属性
1. 边框（border）：用于分隔不同元素、会占据空间、有4条边框、可无边框（设置为0）。
语法：
border : border-width || border-style || border-color
取值：
该属性是复合属性。默认值为： medium none 。 border-color 的默认值将采用文本颜色。
边框属性简写
同时设置边框的三个属性：border: 3px solid blue;
示例代码1：边框属性简写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边框属性简写</title> <style> div{ width: 200px; height: 200px; border: 3px solid blue; } </style> </head> <body> <div>盒子</div> </body> </html>
① border-width：设置对象边框的宽度。
语法：
border-width : medium | thin | thick | length
取值：
medium : 默认值。默认宽度
thin : 小于默认宽度
thick : 大于默认宽度
length : 由浮点数字和单位标识符组成的长度值。不可为负值。
说明：
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四个边框（顺时针）。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
设置border-width、border-color前要设置border-style。
分别设置四条边框：
| 属性 |
语法规则 |
说 明 |
| border-top-width |
border-top-width:5px; |
上边框粗细为5px |
| border-right-width |
border-right-width:10px; |
右边框粗细为10px |
| border-bottom-width |
border-bottom-width:8px; |
下边框粗细为8px |
| border-left-width |
border-left-width:22px; |
左边框粗细为22px |
示例代码2:分别设置四条边框（修改示例代码1的style）
<style> div{ border-top-width:5px; border-right-width:10px; border-bottom-width:8px; border-left-width:22px; width:200px; height:200px; border-style: solid; } </style>
同时设置4条边框：
| 属性 |
语法规则 |
说 明 |
| border-width |
border-width:5px; |
4条边框粗细均为5px |
| border-width |
border-width:20px 2px; |
上、下边框粗细为20px 左、右边框粗细为2px |
| border-width |
border-width:5px 1px 6px; |
上边框粗细为5px 左、右边框粗细为1px 下边框粗细为6px |
| border-width |
border-width:1px 3px 5px 2px; |
上边框粗细为1px 右边框粗细为3px 下边框粗细为5px 左边框粗细为2px |
示例代码3:同时设置4条边框（修改示例代码1的style）
<style> div{ border-width:5px 10px 20px; width:200px; height:200px; border-style: solid; } </style>
② border-color: 指定颜色。
语法：
border-color : color
取值：
color:指定颜色。附：CSS 颜色十六进制值表
说明：
▪从#后第1位开始每2位为一组,表示一个颜色的值（这是以十六进制来算的）：第1组为红色，第2组为绿色，第3组为蓝色。根据三基色的原理，红色与绿色混合为黄色，红色与蓝色混为紫色，绿色与蓝色混合为青色。
▪数值大颜色亮
▪十六进制值是成对重复的可以简写，效果一样。例如:#FF0000 可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B 必须写满六位。
▪红色#FF0000，绿色#00ff00，蓝色为#0000ff，黄色为#FFFFOO，紫色为#ff00ff,青色为#00ffff,白色#ffffff,黑色#000000，要记住（上面所提到的都是饱和色）。
分别设置四条边框和同时设置4条边框语法同border-width
示例代码4:同时设置4条边框的颜色（修改示例代码3的style）
<style> div{ border-color: gold pink blue red; border-width:5px 10px 20px; width:200px; height:200px; border-style: solid; } </style>
③ border-style：设置对象边框的样式。
语法：
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
取值：
none : 默认值。无边框。不受任何指定的 border-width 值影响
hidden : 隐藏边框。IE不支持
dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线
dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线
solid : 实线边框
double : 双线边框。两条单线与其间隔的和等于指定的 border-width 值
groove : 根据 border-color 的值画3D凹槽
ridge : 根据 border-color 的值画3D凸槽
inset : 根据 border-color 的值画3D凹边
outset : 根据 border-color 的值画3D凸边
分别设置四条边框和同时设置4条边框语法同border-width
示例代码5:同时设置4条边框（修改示例代码4的style）
<style> div{ border-style: dotted; border-color: gold pink blue red; border-width:5px 10px 20px; width:200px; height:200px; } </style>
④ inherit：规定应该从父元素继承 border 属性的设置。
注:当有多条规则作用于同一个边框时，会产生冲突，后面的设置会覆盖前面的设置。
2. 填充(padding)：用于控制内容与边框之间的距离；会占据空间；
可设置盒子模型上、右、下、左4个方向的内边距值；padding属性的值可以为0，即无内边距。
分别设置4个方向的内边距：
| 属性 |
语法规则 |
说 明 |
| padding-left |
padding-left:10px; |
左内边距为10px |
| padding-right |
padding-right:5px; |
右内边距为5px |
| padding-top |
padding-top:20px; |
上内边距为20px |
| padding-bottom |
padding-bottom:8px; |
下内边距为8px |
同时设置4个方向的内边距：
| 属性 |
语法规则 |
说 明 |
| padding |
padding:10px ; |
设置4个方向内边距均为10px |
| padding |
padding:10px 5px; |
上、下内边距为10px 左、右内边距为5px |
| padding |
padding:30px 8px 10px ; |
上内边距为30px 左、右内边距为8px 下内边距为10px |
| padding |
padding:20px 5px 8px 10px ; |
上内边距为20px 右内边距为5px 下内边距为8px 左内边距为10px |
示例代码6:同时设置4个方向的内边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>填充(padding)</title> <style> #box1{ width: 400px; height: 300px; background: pink; } #box2{ padding: 30px 8px 10px; width: 300px; height: 200px; background: green; } </style> </head> <body> <div id="box1"> <div id="box2">同时设置4个方向的内边距</div> </div> </body> </html>
3.边界(margin)：用于控制元素与元素之间的距离；会占据空间；
可设置盒子模型上、右、下、左4个方向的外边距值；margin属性的值可以为0，即无外边距。
分别设置4个方向的内边距和同时设置4个方向的内边距语法同padding属性设置方法类似。
示例代码7:同时设置4个方向的外边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边界(margin)</title> <style> #box1{ border:1px solid red; width: 400px; height: 300px; background: pink; } #box2{ margin: 10px 30px; padding: 30px 8px 10px; width: 300px; height: 200px; background: green; } </style> </head> <body> <div id="box1"> <div id="box2">同时设置4个方向的外边距</div> </div> </body> </html>
注：body的外边距，本身是一个盒子，默认情况下，有若干像素外填充。
由于各个浏览器存在着默认的内外边距值且不相同，我们需要将所有浏览器的默认内外边距，都从0计算。 所以，我们用
body,div{/*清除默认外边距和内边距*/
margin: 0;
padding: 0;
}
去除浏览器的默认内外边距。建议要去除的写上，不建议使用*{margin:0;padding:0;}。
示例代码8:去除body外边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>去除body外边距</title> <style> body,div{ margin: 0px; padding: 0px; } div{ border:1px solid red; width: 400px; height: 300px; background: pink; } </style> </head> <body> <div id="box">此时是贴在body边框上</div> </body> </html>
效果：
图4 去除body外边距
4. 内容(content)
内容本身的宽=width
内容本身的高=height
5.盒子模型总尺寸
盒子模型总尺寸=border-width+padding+margin+内容尺寸（宽度/高度）
图5 盒子模型总尺寸
三． 盒子之间的关系
单独的一个盒子不难理解，实际上网页往往是很复杂的，一个网页可能存在着大量的盒子，并且它们之间以各种关系相互影响着。为了适应各种排版要求，CSS规范的思路是：首先确定一种标准的排版模式，这个就是“标准流”。
但仅通过标准流方式，很多排版是无法实现的，CSS规范中又给出了另外几种对盒子进行布局的方法，包括“浮动”和“定位”等属性，对某些元素进行特殊排版。
1. DOM树
一个HTML从表面看是文本文件，从逻辑上看则具有内在的层次关系。“树”可以表示具有层次关系的结构。
任意一个HTML文档都对应一棵DOM树，body是所有对象的根节点。而该DOM树的节点如何在浏览器中表现，则由CSS确定。即HTML控制网页的结构，CSS控制网页的表现。
图6 HTML文档对应DOM树
2. 标准文档流
“标准文档流”（Normal Document Stream），简称“标准流”，是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。
如上图共有四层结构，顶层为body，第二层为ul，第三层为li，第四层为文本。这四种元素分为两类：
① 块级元素（block level）
li占据着一个矩形的区域，并且和相邻的li依次竖直排列，不会排在同一行中。ul也具有同样的性质，占据着一个矩形的区域，并且和相邻的ul依次竖直排列，不会排在同一行中。这类元素称为“块级元素” ，即它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。
常见的块标记：address、block、div、dl、fieldset、form、h1 ~ h6、menu、ol、ul、p、table
② 行内元素（inline）
对于文字这类元素，各个字母之间横向排列，到最右端自动折行，这就是另一种元素，称为“行内元素”。比如<strong></strong>标记，就是一个典型的行内元素，这个标记本身不占有独立的区域，仅仅是在其他元素的基础上指出了一定的范围。再比如，最常用的<a>、<span>标记。
3.浏览器处理元素过程：
第1步：从body开始，依次把两个ul块竖直排列。
第2步：分别进入每一个ul查看它的下级元素，把两个li块竖直排列在ul中。
第3步：进入li内部，是一行文本，按行内元素排列文字。
4．<div>标记与<span>标记
为了更好地理解“块级元素”和“行内元素”，这里重点介绍在CSS排版的页面中经常使用的<div>和<span>标记。
div简单而言就是一个块级容器标记，可以容纳段落、标题、表格、图片，乃至章节、摘要和备注等各种HTML元素。可以把div当做一个独立的对象，用CSS进行控制。<span>和<div>一样，在HTML元素中可以作为独立的对象进行处理。
两者的区别在于：div是一个块级元素，span仅仅是一个行内元素，在它的前后都不会换行。span没有结构上的意义，纯粹是应用样式，当其他行内元素都不适合时，就可以用span标记。div标记可以包含span，span不可以包含div。
5. 盒子在标准流中的定位原则
如果要精确地控制盒子的位置，就必须对margin有更深入的了解。padding只存在于一个盒子内部，所以通常它不会涉及与其他盒子之间的关系和相互影响的问题。margin则用于调整不同的盒子之间的位置关系。
① 行内元素之间的水平margin
图7 行内元素之间的水平margin
两个块之间的距离为：30px+40px=70px。
② 块级元素之间的竖直margin
图8 块级元素之间的竖直margin
如果不是行内元素，而是竖直排列的块级元素，margin的取值情况就会有所不同。
两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者，如图所示。这个现象称为margin的“塌陷”（或称为“合并”）现象，意思是说较小的margin塌陷（合并）到了较大的margin中。
6. 嵌套盒子之间的margin
除了上面提到的行内元素间隔和块级元素间隔这两种关系外，还有一种父子关系，它的margin值对CSS排版也有重要的作用。当一个<div>块包含在另一个<div>块中时，便形成了典型的父子关系。
其中子块的margin将以父块的内容为参考，如图4.22所示。
图9 嵌套盒子之间的margin
在没有设置width和height的情况下，高度和宽度都会自动延伸和收缩。 在标准流中，一个块级元素的盒子水平方向的宽度会自动延伸，直至上一级盒子的限制位置。对于高度，div都是以里面的内容的高度来确定的，也就是会自动收缩到能包容下内容的最小高度。
示例代码7:在没有设置width和height的情况下，高度和宽度都会自动延伸和收缩
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子的嵌套</title> <style> #box1{//父盒子 设置宽度 border:1px solid red; width: 300px; height: 150px; background: pink; } #box2{//子盒子 不设置宽度 border:1px solid red; height: 100px; background: green; } </style> </head> <body> <div id="box1">父盒子 <div id="box2">子盒子宽度 自动延伸为 父盒子宽度</div> </div> </body> </html>
效果：
图10 子盒子宽度延伸为父盒子宽度
如果更改代码：父盒子不设置高度，子盒子设置高度，则父盒子高度会收缩至子盒子的高度，效果如下：
图11 父盒子高度收缩为子盒子高度
7. margin属性可以设置为负值
上面提及margin的时候，它的值都是正数。其实margin的值也可以设置为负数，而且有关的巧妙运用方法也非常多。
图12 margin-left=-50px
CSS盒子模型（下）：CSS3可伸缩框属性（Flexible Box）
转载需注明转载字样，标注原作者和原博文地址。
关注微信公众号获得及时推送
