前端孵化日记（一）盒子模型

什么是盒子模型：

所有的HTML元素都能看成一个盒子.
可以通过6大属性(margin,border,padding,width,height,background)来设置这个盒子
，行内元素width和height无效,margin和padding在水平上有效,垂直方向上没有作用。

计算盒子模型占网页的大小：

例：如果一个div没有设置width，它占父元素的100%。假如我的父元素是960px。div也占960px。div的这个960是指div的内容宽度还是指它在页面上占据的空间？ 960px = 左右的margin+左右的border+左右的padding+width。 这里面的div占960是指div所占用的空间。那如果这个div又加了一个10px的边框。那么这个div的内容宽度width = 960-20px = 940px

常见问题：BFC边距重叠解决方案

重叠前提：在标准文档流中，且在垂直方向

问题分析：

1.当输入如下代码块出现上面的盒子的margin-bottom和下面的盒子margin-top出现了重叠，两个盒子之间的距离仅有一个margin的距离。

    <style>
        .father{
            height: 300px;
            width: 300px;
            border:  2px solid red;
        }
        .up {
            height: 100px;
            width: 100px;
            background-color: skyblue;
            margin: 0 0 30px 0;
        }

        .down {
            height: 100px;
            width: 100px;
            background-color: gold;
            margin: 30px 0 0 0;
        }
    </style>
    <div class="father">
        <div class="up">上</div>
        <div class="down">下</div>
    </div>)

解决方案：

添加display:inline-block;
设置浮动
仅设置一边的margin
添加overflow:hidden;

2.父和子之间是没有距离的，给父元素设置margin-top与给这个父元素的第1个子元素设置margin-top效果是一样的，给父元素设置margin-bottom与给这个父元素的最后一个子元素设置margin-bottom效果是一样的。

    .father{
        width: 300px;
        height: 300px;
        background-color: skyblue;
    }
    .son{
        width: 100px;
        height: 100px;
        background-color: yellowgreen;
        margin-top: 80px;
    }
    <div class="father">
        <div class="son"></div>
    </div>

解决方案：

修改父元素的高度，增加padding-top样式模拟（padding-top:1px，常用）；
为父元素添加overflow:hidden （完美）；
为父元素或子元素声明浮动（float:left;可用）；
为父元素添加border（border:1px solid transparent;可用）；
为父元素或子元素声明绝对定位。

盒子模型局限性：如果一个块级元素的盒子没有设置宽度，它的宽度是父元素的100%，这里的100%是指这个盒子所占页面宽度。如果又增加了这个盒子的margin,padding,border，那么这个盒子的内容宽度一定会减小，如果margin,padding,border不断地增加，盒子的内容宽度不断地被压缩，如果压缩到了极限，浏览器会强迫你元素的宽度增加。所以默认情况下的盒子模型也有不足之处。