-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;
posted @ 2016-09-12 19:25  Huan_klyj  阅读(218)  评论(0编辑  收藏  举报