12.4学习笔记

浮动

浮动布局：
        浮动：float:left/right；
        清除浮动：clear：left/right/both;

盒子模型

每个元素都可以看成一个盒子，盒子模型是由content（内容）、padding（内边距）、margin（外边距）、border（边框）四个属性组，还包括宽度width和高度height两大辅助属性。

margin重叠现象：
    1.如果两个元素没有浮动，都设置了margin值，那么他们之间的外边距按照最大的margin值算。
    2.如果两个元素浮动，都设置了margin值，那么他们之间的外边距就是两个margin值和。-->

border元素边框，content可以是文字或图片

   #d2{/*注意实际占用面积*/
    width: 100px;
    height: 100px;
    background: red;
    float: left;
/*    margin-left: 10px;*/
/*    margin-top: 20px;*/
/*    margin-bottom: 40px;*/
/*    margin-right: 30px;*/
/*    上右下左，顺时针*/
/*    margin: 10px 20px 30px 40px;*/
/*    margin: 10px;四周*/
/*    margin: 10px 2opx;*/上右
    margin: 10px 20px 30px;上右下
}