CSS day06

or0fun 發(fā)布于2019-08-30 15:44 / 3083人閱讀

摘要：布局使用塊元素搭建網(wǎng)頁結(jié)構(gòu)改變默認文檔流的方式，讓其在一行中顯示多列。

布局

使用塊元素搭建網(wǎng)頁結(jié)構(gòu),改變默認文檔流的方式，讓其在一行中顯示多列。【讓塊在一行中顯示】


    
    
    


    
    
    


浮動布局
    float
        float:left/right
        可以使塊元素脫離當前的文檔流
            1) 寬度如果沒有手動指定那么就由內(nèi)容決定
            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/...
        塊/行內(nèi)/行內(nèi)塊
        行內(nèi)塊
            可以與其他行內(nèi)元素共享一行空間
            可以指定寬高

定位布局
    position 
        static        靜態(tài)（默認）     非定位元素

        relative     定位元素（相對定位）
            參照點：原先所在的位置
            特性：不脫離文檔流（寬度默認為為100%，原來在文檔流的位置不會被搶占），但是可以覆蓋在其他元素上


        absolute     定位元素（絕對定位）
            參照點：距離它最近的父定位元素，如果沒有，參照視口
            特性：脫離文檔流（寬度由內(nèi)容決定，原來在文檔流的位置被其他元素搶占）


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