深入了解盒子模型

不管是行盒还是快盒，具体由以下几个结构组成。
1:内容盒（content-box）
主要设置宽，高。
2:内边距(padding)，还有一种说法是填充
padding-top
padding-right
padding-bottom
padding-left
简写：padding。顺序是顺时针（上右下左）
内容到盒子边框的距离。
这里我们举例说明：
同样在页面上画个盒子，内容写上“盒子”，

div{
        width: 100px;
        height: 100px;
        background-color: blue;
    }

可以看见字位于蓝色盒子左上角。然后我们设置内边距为10px。

div{
            width: 100px;
            height: 100px;
            background-color: blue;
            padding: 10px;
        }

可以看见字体的位置改变了。

但是我们也发现蓝色的盒子变大了。这是因为设计图给的尺寸，并没有对边框或内边距考虑，所以当我们设置内边距时，内容盒的宽高是不会改的。也就是说这个蓝色盒子此时的宽高为120px。那如果我们不想要改变盒子的宽高应该怎么办呢？解决办法有两个
（1）:根据盒子模型的计算规则，精确计算

div{
        width: 80px;
        height: 80px;
        background-color: blue;
        padding: 10px;
    }

    既宽高减去内边距（上下左右）

（2）:CSS3：box-sizing 重新规定元素边框模型的计算方式
content-box 默认值，采取默认计算方式 标准盒子模型的计算方式。
border-box 采取IE盒子模型的计算方式 元素的尺寸会包含内边距和边框。
或者设置box-sizing为border-box

 div{
            width: 100px;
            height: 100px;
            background-color: blue;
            padding: 10px;
            box-sizing: border-box;
        }

    同样可以达到一样的效果。推荐使用这种方法

3:边框（border）

边框 = 边框样式 + 边框宽度 + 边框的颜色
边框样式：border-style
边框宽度: border-width
边框的颜色: border-color,如何不设置边框颜色，则为字体的颜色
边框 + 填充区 + 内容区 = 边框盒 border-box
4：外边距
边框到其它盒子的距离
margin-top
margin-right
margin-bottom
margin-left
使用方法同内边距