浅谈盒子模型

盒子模型是网页布局的基石，只有理解了盒子模型，我们才能更好的进行网页布局。HTML中的每一个元素都可以看成是一个盒子，拥有盒子一样的外形和平面空间，它不可见、不直观，但无处不在，所以初学者很容易在这上面出问题。

盒子模型图片：

说明：

content：是盒子的内容区，可显示文本、图片等，我们设置的宽（width）高（height）就是给内容添加的。
padding：是盒子的内填充也叫内边距，是内容与边框之间的距离，通俗的说就是给盒子添加填充物（泡沫…）。
border：盒子的边框，围绕内边距的一条或多条线。
margin：盒子的外边距，即两个盒子之间的距离。

用法：

padding：

1、作用：控制子元素在盒子内部的位置关系。
2、单一方向的设置：
padding-left：数值；
padding-right：数值；
padding-top：数值；
padding-bottom：数值；
3、设置方法：
padding： 数值； （设置四周）
padding：数值1 数值2； （数值1设置的是上下的值，数值2设置的是左右的值）
padding：数值1 数值2 数值3；（数值1设置的是上边的值，数值2设置的是左右的值 ， 数值3设置的是下边的值 ）
padding：数值1 数值2 数值3 数值4；（分别对应上右下左，顺时针方向）
4、特点
padding是加在父元素上的，它不会对背景图的位置 造成影响，且不能为负值。padding可以把盒子撑大，如果想让盒子保持原有大小，则需要在原来宽高的基础上减掉padding的值；如果盒子没有固定大小，是被内容撑开的，则不需要减去padding。

代码如下：

.box1{
            width:200px;
            height:200px;
            background:red url(./images/1.jpg) no-repeat;
            padding:50px;
        }
        h1{
            width:200px;
            height:200px;
            background:blue;
        }
        .box2{
            width:240px;
            height:220px;
            background:yellow url(./images/1.jpg) no-repeat;
            padding:50px 40px 30px 20px;
        }
        h2{
            width:200px;
            height:200px;
            background:blue;
        }

实现如下：

border：

1、作为网页中修饰性的线条。
2、border有三个值：宽度（width）、颜色（color）以及样式（style）
常用的边框样式有： 实线（solid）、虚线（dashed）、双线（double）、点状线（ dotted）以及无边框（none 默认值）。
语法： border：5px solid red；
3、单一方向的设置：
border-left：； 左边框
border-right：；右边框
border-top：；上边框
border-bottom：；下边框
4、设置方法：
border： 数值； （设置四周）
border：数值1 数值2； （数值1设置的是上下的值，数值2设置的是左右的值）
border：数值1 数值2 数值3；（数值1设置的是上边的值，数值2设置的是左右的值 ， 数值3设置的是下边的值 ）
border：数值1 数值2 数值3 数值4；（分别对应上右下左，顺时针方向）
5、注意
相邻的两条边框之间为斜面
代码如下：

.box{
            width:0px;
            height:0px;
            border-top:200px solid red;
            border-left:200px solid orange;
            border-right:200px solid blue
        }

实现如下：

margin：

1、作用：控制当前元素与其他同级元素的位置关系，通俗的说就是让两个盒子之间产生距离，以免发生碰撞。
2、单一方向的设置：
margin-left：数值；
margin-right：数值；
margin-top：数值；
margin-bottom：数值；
3、设置方法：
margin： 数值； （设置四周）
margin：数值1 数值2； （数值1设置的是上下的值，数值2设置的是左右的值）
margin：数值1 数值2 数值3；（数值1设置的是上边的值，数值2设置的是左右的值 ， 数值3设置的是下边的值 ）
margin：数值1 数值2 数值3 数值4；（分别对应上右下左，顺时针方向）
4、注意
margin不会改变盒子内部的大小，且可以设置负值。
bug1：同级元素 上下 之间的margin的margin值，不会叠加，会重合，按照最大值设置。
代码如下：

.box1{
            width:300px;
            height:300px;
            background:red;
            margin:50px;
        }
        h1{
            width:200px;
            height:200px;
            background:blue;
            margin:50px;
        }
        .box2{
            width:300px;
            height:300px;
            background:red;
            margin:50px;
        }

实现如下：

bug2：当父元素 和 第一个子元素 都没有浮动，给第一个子元素添加margin-top: 会错误的把margin-top:添加在父元素上面。

代码如下：

        .box1{width:300px; height:300px; background:red;}

        h1{width:200px; height:200px; background:blue; margin-top:80px;}
        
        .box2{width:300px; height:300px; background:red; margin:50px; }

实现如下：

计算盒子真正占据的空间：

代码如下：

 p{
            width:300px;
            height:200px;
            background:red;
            border:20px solid yellow;
            padding:50px;
            margin:60px;
        }

实现如下：


由上图可知盒子真正占据的空间为：
content本来的宽（width）高（height） + padding + border + margin

但是盒子真正的大小是不加margin的。

拓展：

IE浏览器解析的盒子模型与W3C的有一点不同，IE盒子模型把border + padding + content的宽高定义为盒子的宽高。W3C盒子模型则认为只有content的宽高才是盒子的宽高，这样就会产生一个兼容问题，要解决这个问题只需要在HTML文件的开头加上，这样所有的浏览器都会使用W3C盒子模型来解析。