day05

1. 盒子模型

           width: 200px;
           height: 200px;
           background: red;
           box-sizing: border-box;
           border: 10px solid black;
           padding: 10px;

box-sizing: border-box;
给元素border,padding不会改变他的width,height.

2. 继承

.parent{
            width: 400px;
            background: green;
            /*overflow:hidden;*/
        }
        .child{
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }
        .row:after{
            content: "";
            display: table;
            clear: both;
        }
 <div class="parent row">
        <div class="child"></div>
    </div>

父元素不设置高度，子元素float,父元素的高度会坍塌
让父元素重新获取高度
1. overflow:hidden;
2. 给父元素一个公共的元素row
row:after{
content: "";
display: table;
clear: both;}

3. 浮动float

/* float的原理:相对于整个页面漂浮起来 */
        .one{
            width:100px;
            height:100px;
            background:red;
            float:right;
        }
        /* 如何清除float
        clear:both;
         */
        .two{
            clear:both;
            width:200px;
            height:200px;
            background:blue;
        }

如果前面的元素float,后面的元素没有清除 float,那么就会受到前面元素的影响