沒有flexbox彈性盒子，但咱們還有table

時間 2019-11-09

標籤沒有 flexbox 彈性盒子咱們還有 table 欄目 Flex 简体版

原文原文鏈接

因爲項目要兼容到IE9，所以將以前flex佈局所有給換掉。今天leader讓我看了kitecss這個css框架(裏面的一些佈局方式能比較好的兼容IE8+，裏面有一些比較好的柵格佈局，垂直居中等方案)。而後具體的學習了裏面的一些css技巧和方法，總結以下：javascript

github地址css

display:table

源碼裏面不少將父元素display屬性設爲display: table。這個時候再將子元素display屬性設置爲inline-block屬性後，運用text-align屬性便可進行水平居中，水平靠左，水平靠右。html

負margin

負margin的使用技巧和應用場景其實仍是挺普遍的，好比使用float和負margin現實聖盃佈局，雙飛燕佈局等等。java

具體的使用技巧和參照文章：
由淺入深漫談margin屬性
 不要告訴我你懂margin
我知道你不知道負margingit

而後在kitecss裏面的時候主要是運用在了柵格佈局上面。github

html結構：
    
    <div class="kite kite--grid has-gutter">
        <div class="kite__item is-4of12">
            <div class="fixture">.is-4of12</div>
        </div>
        <div class="kite__item is-4of12">
            <div class="fixture">.is-4of12</div>
        </div>
        <div class="kite__item is-4of12">
            <div class="fixture">.is-4of12</div>
        </div>
    </div>
    
    css：
    .kite {
        font-size: 0 !important;
    }
    .kite--grid.has-gutter {
        display: block;
        width: auto;
        margin-left: -10px;     //左基線向左移動10px
        margin-right: -10px;    //右基線向右移動10px
    }
    .kite_item {
        box-sizing: border-box;     //必定要使用border-box屬性(本身不熟悉的自行google)
        display: inline-block;  //主要是爲了好設置寬度
        width: 33.3333%;    //都是相對於父元素的33.3333%,即將父元素平均分紅了3等份。
        font-size: 1rem;
        vertical-align: top;    //元素在水平線上的對齊方式
        padding-left: 10px;     //左內邊距10px
        padding-right: 10px;    //右內邊距10px;
    }

看到圖上左右2邊的線條沒，這其實就是父元素.kite--grid的左右邊界

3個子元素的寬度都是33.333%，平均的3等份，可是設置padding-left和padding-right的值都爲10px的時候，正好和左右負margin抵消，這樣就是現實了3列等寬佈局。
框架

垂直居中

html結構：
    <div class="kite kite--position">
        <div class="kit__item">
            <div class="fixture">1</div>
        </div>
    </div>
    
    css：
    .kite--position {
        display: block;
        position: absolute;
        top: 0;     //使用絕對定位也能夠實現自適應哦~
        right: 0;
        height: 150px;
        text-align: center;//子元素的display屬性爲inline-block，所以能夠實現水平居中
        font-size: 0;
    }
    .kite--position::after{ 
        display: inline-block;
        content: '';
        height: 100%;
        vertical-align: middle;
    }
    .kite__item {
        display: inline-block;
        font-size: 1rem;
        box-sizing: border-box;
    }
    .fixture {
        border: 1px solid #489;
        margin-bottom: 16px;
        min-height: 48px;
        background-color: rgba(108,200,220,0.75);
    }

css當中使用比較巧的是利用.kite--position的僞元素(content屬性必定不能省，能夠把值設爲"")，生成一個行內元素，其高度爲100%，即爲父元素的高度。同時，.kite--position的子元素也聲明爲行內元素，所以這個時候能夠利用vertical-align屬性進行垂直居中.佈局

width:auto

這個屬性平時用的很少，看源碼的時候看裏面用的很廣泛，它的用法和width:100%仍是有點區別的。
好比遇到這種結構:學習

<div class="parent">
        <div class="child">123123</div>
    </div>
    
    .parent {
        position: absolute;
        left: 50px;
        top: 50px;
        width: 200px;
        height: 200px;
        border: 1px solid #e3e3e3;
    }
    .child {
        width: auto 或者 100%;
        //能夠設置不一樣margin和padding看下效果
        border: 1px solid #e3e3e3;
    }

通常塊級元素若是不添加float或者絕對定位或者設定寬度的話，它的寬度默認爲100%.這個寬度僅僅是內容的寬度，若是你再設置padding或者margin值，會保持width不變，會出現盒模型伸長或者移動位置的狀況。flex