CSS day06

布局

使用块元素搭建网页结构,改变默认文档流的方式，让其在一行中显示多列。【让块在一行中显示】

<div>
    <div></div>
    <div></div>
    <div></div>
</div>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

浮动布局
    float
        float:left/right
        可以使块元素脱离当前的文档流
            1) 宽度如果没有手动指定那么就由内容决定
            2) 多个浮动元素在一个浮动流中并排显示，如果一排放不下就会自动换行
            3) 浮动元素失去了对父元素的支撑

    clear
        clear:left/right/both
        清理左边/右边/左右两边的浮动元素，一般使用这个特性强制子元素换行，达到支撑父元素的目的

    一行多列：
        全部浮动
        ul>li{
            float:left
        }
    一行两列
        方法一：
            两列都浮动
            .left {float:left }
            .right {float:right; }
        方法二：
            一列浮动，一列添加margin-left
            .left {float:left; width:200px}
            .right {margin-left:220px;}

    overflow
    overflow-x
    overflow-y
        auto/none/visible/scroll
    当父元素的宽/高固定，子元素的宽/高超过了父元素就可以使用这个特性


    display
        block/inline/inline-block/...
        块/行内/行内块
        行内块
            可以与其他行内元素共享一行空间
            可以指定宽高

定位布局
    position 
        static        静态（默认）     非定位元素

        relative     定位元素（相对定位）
            参照点：原先所在的位置
            特性：不脱离文档流（宽度默认为为100%，原来在文档流的位置不会被抢占），但是可以覆盖在其他元素上


        absolute     定位元素（绝对定位）
            参照点：距离它最近的父定位元素，如果没有，参照视口
            特性：脱离文档流（宽度由内容决定，原来在文档流的位置被其他元素抢占）


        fixed         定位元素（固定定位）
    只能定位元素才能使用定位属性
        top 、left、bottom、right