-CSS盒模型和float

一、盒模型

1、margin      外边距（能使用负值，也可用像素值、百分比）

 

               1参数    上右下左

               2参数    上下    左右

               3参数    上       左右     下

               4参数    上       右         下          左

 

2、border     边框

        3参数

             (大小         类型         颜色)

                            solid（实线）

                           dotted（虚线）

                           double（双实线）

3、padding内填充（不能使用负值，可用像素值、百分比）

            1参数    上右下左

            2参数    上下         左右

            3参数    上            左右          下

            4参数    上             右             下         左

        

4、display ：设置框的类型

             inline 行级

             block 块级

             inline-block 内联块

             table-cell 表格单元格

                （vertical-align：middle  垂直居中）

 

二、浮动  

float：  定义元素（块区域）的浮动方向

1、   float：left (right none)

2、清除：(left、right、both)浮动布局完成后使用clear加浮动的元素拉回流文档

（1）在之后添加空标签，并用为样式添加clear：both；

（2）伪类，在浮动元素父级添加

        #warp:after{

                content: "";

                display: block;

                clear: both;

                /*模拟空标签*/

           }

（3）浮动元素父级添加float，能够消除子级的float

（4）浮动元素父级加overflow：auto

            overflow：scroll（hidden 、 auto）

 (5) 给父级加display：inline-block;