盒模型

盒模型

1.盒模型的介绍

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

2.盒模型大小的计算

(margin2+border2+padding2+width)( margin2+border2+padding*2+height)

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像素

代码演示：

    .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;
    }

2.margin属性：盒子外边框和其他盒子之间的距离。
作用：让两个同级的盒子之间，产生一定距离。
用法：margin：属性值；
注意：margin 是长在盒子外面的，不会影响盒子的大小，且可以为负值。
margin：{一个值} 上下左右全都设置外边距
margin：{二个值} 第一个值代表上下 第二个值代表左右
margin：{三个值} 第一个值代表上方 第二个值代表左右 第三个值代表下方
margin：{四个值} 第一个值代表上 第二个值代表右 第三个值代表下 第四个值代表左


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像素红色的实线边框

补充：边框风格样式的属性值，border-style
1、none 无边框
2、solid 直线边框
3、dashed 虚线边框
4、dotted 点状边框
5、double 双线边框
margin常出现的BUG：
A：同级元素上下之间的margin的margin值，不会叠加，会重合，按照最大值设置。
B：当父元素和第一个子元素都没有浮动，给第一个子元素添加margin-top：会把margin-top：添加在父元素上