CSS盒子模型

所有的HTML元素都可以看作是一个盒子。
将盒子模型拆分，则包括 外边距+边框+填充+内容。
显得专业一些，box model = margin+border+padding+content。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
------------------------------------------
|                 margin                 |  
| -------------------------------------- |
| |               border               | |
| | ---------------------------------- | |
| | |             padding            | | |
| | | ------------------------------ | | |
| | | |           content          | | | |
| | | |                            | | | |
| | | |                            | | | |
| | | ------------------------------ | | |
| | ---------------------------------- | |
|  ------------------------------------- |
------------------------------------------

盒子成分分析

margin

1
2
3
4
5
6
7
8
9
10
11
12
13
#marginShow{
    /* 四个方向简写 */
    margin: 10px;
    /* 上下边距，左右边距简写 */
    margin: 10px 10px;
    /* 上右下左四个边距 */
    margin: 10px 10px 10px 10px;
    /* 上右下左分别单独配置 */
    margin-top: 10px;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 10px;  
}

border

1
2
3
4
5
6
7
8
9
#boderShow{
    /* 简写 */
    border: 1px solid #eee;
    /* 四个方向单独配置 */
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
}

padding

1
2
3
4
5
6
7
8
9
10
11
12
13
#paddingShow{
    /* 四个方向简写 */
    padding: 10px;
    /* 上下填充，左右填充简写 */
    padding: 10px 10px;
    /* 上右下左四个填充 */
    padding: 10px 10px 10px 10px;
    /* 上右下左分别单独配置 */
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px;  
}

box-sizing属性

content-box：默认值，width和height属性分别应用到元素的内容框。在宽度和高度之外绘制元素的margin、border、padding，称为标准盒子模型。
border-box：为元素设定的width和height属性决定了元素的边框盒，就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去border和padding才能得到内容的宽度和高度，称为IE盒子模型。
inherit：规定应从父元素继承box-sizing属性的值。

浏览器兼容性

一旦为页面设置了恰当的DTD，大多数浏览器都会按照上面的图示来呈现内容。然而IE5和IE6 的呈现却是不正确的。根据W3C的规范，元素内容占据的空间是由width属性设置的，而内容周围的padding和border值是另外计算的。不幸的是，IE5.X和IE6在怪异模式中使用自己的非标准模型。这些浏览器的width属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
IE8及更早IE版本不支持设置填充的宽度和边框的宽度属性。
解决IE8及更早版本不兼容问题可以在HTML页面声明<!DOCTYPE html>即可。

测试代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
<head>
    <title>CSS盒模型</title>
</head>
<body>

    <div class="normal">我是带了一个border盒子</div>

    <div class="hr"></div>

    <div id="marginShow" class="normal">我是带了margin的盒子</div>

    <div class="hr"></div>

    <div id="paddingShow" class="normal">我是带了padding的盒子</div>

    <div class="hr"></div>

    <div id="boxsizeShow" class="normal">我是带了padding+IE盒子模型的盒子</div>


    <style type="text/css">

        .hr{ 
            height: 1px;
            background: #eee;
        }

        .normal{
            color: #fff;
            width: 300px;
            height: 50px;
            background: #1E9FFF;
            border: 1px solid #aaa;
        }
        #marginShow{
            /* 四个方向简写 */
            margin: 10px;
            /* 上下边距，左右边距简写 */
            margin: 10px 10px;
            /* 上右下左四个边距 */
            margin: 10px 10px 10px 10px;
            /* 上右下左分别单独配置 */
            margin-top: 10px;
            margin-right: 10px;
            margin-left: 10px;
            margin-bottom: 10px;  
        }
        #paddingShow{
            /* 四个方向简写 */
            padding: 10px;
            /* 上下填充，左右填充简写 */
            padding: 10px 10px;
            /* 上右下左四个填充 */
            padding: 10px 10px 10px 10px;
            /* 上右下左分别单独配置 */
            padding-top: 10px;
            padding-right: 10px;
            padding-left: 10px;
            padding-bottom: 10px;  
        }
        #boxsizeShow{
            box-sizing: border-box;
            padding: 10px;
        }
    </style>
</body>
</html>