小白成长路之盒模型

盒模型

1.盒模型的介绍

所有页面中的元素都可以看作是一个装了东西的盒子，**盒子最里面叫做内容区域（content）**如左图粉色区域，右图120*110区域。**内容区域到盒子的边框之间的距离叫做内边距或内填充( padding)**如左图黄色区域，右图浅绿色虚线区域,**内填充外围就叫边框（border）**如左图蓝色区域，**盒子外边框和其他盒子之间的距离叫做边界或外边距( margin)**如右图最外层虚线到最近的实线部分。1个盒子从外到内由4个独立部分组成。第一部分是外边距( margin);第二部分是边框( border),第三部分是内填充( padding),填充用来定义内容区域与边框( border)之间的空白；第四部分是内容区域（content）。

2.盒模型大小的计算

(margin2+border2+padding2+width)( margin2+border2+padding2+height)
上图面积：（102+02+152+120）（102+02+152+110）=27200px

3.盒模型属性的用法

1.padding属性内容区域到盒子的边框之间的距离。
作用：控制子元素在盒子内部的位置关系。
用法：padding：属性值；
！注意：padding会把盒子撑大，从而影响布局效果。且padding不能为负值。
padding：{一个值} 上下左右全都设置内填充
padding：{二个值} 第一个值代表上下 第二个值代表左右
padding：{三个值} 第一个值代表上方 第二个值代表左右 第三个值代表下方
padding：{四个值} 第一个值代表上 第二个值代表右 第三个值代表下 第四个值代表左

也可以在单独某方向上设置padding值：
padding-left：50px ：左边填充50像素
padding-right：50px ：右边填充50像素
padding-top：50px ：顶部填充50像素
padding-bottom：50px ：底部填充50像素

网页结构如图所示：
代码演示：

<style> 
    .box{
        /* 设置box宽度为500像素 */
        width: 500px;
        /* 设置box高度为400像素 */
        height: 400px;
        /* 设置box背景颜色为粉红色 */
        background: pink;
    }
    .box1{
        /* 设置box1宽度为300像素 */
        width: 300px;
        /* 设置box1高度为200像素 */
        height: 200px;
        /* 设置box1背景颜色为蓝色 */
        background: blue;
    }
    .box2{
        /* 设置box2宽度为300像素 */
        width: 300px;
        /* 设置box2高度为200像素 */
        height: 200px;
         /* 设置box2背景颜色为蓝色 */
        background: blue;
        /* 设置box2内填充为50像素 */
        padding: 50px;
    }
</style>

效果图：
通过不加padding的box1和加padding的box2对比发现子元素p离父元素的顶部和左边都产生了明显的间距，而且加了padding的box2蓝色区域明显增增大，说明padding撑大了父元素。
2.margin属性：盒子外边框和其他盒子之间的距离。
作用：让两个同级的盒子之间，产生一定距离。
用法：margin：属性值；
！注意：margin 是长在盒子外面的，不会影响盒子的大小，且可以为负值。
margin：{一个值} 上下左右全都设置外边距
margin：{二个值} 第一个值代表上下 第二个值代表左右
margin：{三个值} 第一个值代表上方 第二个值代表左右 第三个值代表下方
margin：{四个值} 第一个值代表上 第二个值代表右 第三个值代表下 第四个值代表左

也可以在单独某方向上设置margin值：
margin-left：50px ：左边设置外边距50像素
margin-right：50px ：右边设置外边距50像素
margin-top：50px ：顶部设置外边距50像素
margin-bottom：50px ：底部设置外边距50像素

网页结构如下：

不加margin之前：

代码演示如下：

效果如下图：
通过不加margin之前的图片和加margin之后的图片对比发现margin也改变了子元素的位置，让其距离父元素上方产生了30px的外边距和同级元素box1左方向产生了30px的外距离。
3.border属性
作用：给盒子加边框
用法：border：属性值1 属性值2 属性值3；
也可以在单独某方向上设置边框：
border-left：solid 2px red； 盒子左边设置2像素红色的实线边框
border-right：solid 2px red； 盒子右边设置2像素红色的实线边框
border-top：solid 2px red； 盒子顶部设置2像素红色的实线边框
border-bottom：solid 2px red； 盒子底部设置2像素红色的实线边框

页面结构如下：

代码演示：

演示效果：

通过不加边框属性的box1和加了边框属性的box2对比发现，box2周围多了红色的边框。
补充：边框风格样式的属性值，border-style
1、none 无边框
2、solid 直线边框
3、dashed 虚线边框
4、dotted 点状边框
5、double 双线边框

margin常出现的BUG：
A：同级元素上下之间的margin的margin值，不会叠加，会重合，按照最大值设置。
B：当父元素和第一个子元素都没有浮动，给第一个子元素添加margin-top：会把margin-top：添加在父元素上