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

KunMinX 發布于2019-08-28 18:22 / 1955人閱讀

摘要：結構左基線向左移動右基線向右移動一定要使用屬性自己不熟悉的自行主要是為了好設置寬度都是相對于父元素的即將父元素平均分成了等份。

由于項目要兼容到IE9，因此將之前flex布局全部給換掉。今天leader讓我看了kitecss這個css框架(里面的一些布局方式能比較好的兼容IE8+，里面有一些比較好的柵格布局，垂直居中等方案)。然后具體的學習了里面的一些css技巧和方法，總結如下：

github地址

display:table

源碼里面很多將父元素display屬性設為display: table。這個時候再將子元素display屬性設置為inline-block屬性后，運用text-align屬性即可進行水平居中，水平靠左，水平靠右。

負margin

負margin的使用技巧和應用場景其實還是挺廣泛的，比如使用float和負margin現實圣杯布局，雙飛燕布局等等。

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

然后在kitecss里面的時候主要是運用在了柵格布局上面。

    html結構：
    
    
        
            .is-4of12
        
        
            .is-4of12
        
        
            .is-4of12
        
    
    
    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結構：
    
        
            1
        
    
    
    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%還是有點區別的。
比如遇到這種結構:

    
        123123
    
    
    .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不變，會出現盒模型伸長或者移動位置的情況。

    width = 內容

但是如果你設置為width: auto，它起到的作用實際上和申明box-sizing: border-box的一樣。

    width = 內容 + padding + border;

你再怎么設置padding值和border值都是在width這個寬度里面進行設置。

可以到codepen上看看
codepen.io

云服務器 GPU云服務器 linux磁盤滿但沒有找到彈性公網IP 有沒有優惠彈性公網IP 有沒有打折活動 flexbox

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111206.html

認識flexbox布局

摘要：對于原有布局很多都是基于和這樣的布局，但是新一代問世后出現了現在風靡的布局方案，其布局理解大大的迎合了現在前端開發中的布局需求什么是布局是的簡稱，可以直觀的理解成彈性布局，是對盒子模型的一種靈活表現。對于css原有布局很多都是基于float和display:table這樣的布局，但是新一代CSS3問世后出現了現在風靡的flex布局方案，其布局理解大大的迎合了現在前端開發中的布局需求！...

fasss 2019-08-30 14:15 評論0 收藏0
CSS 布局經典問題初步整理

摘要：布局經典問題初步整理標簽前端本文主要對布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負，清除浮動，居中布局，響應式設計，布局，等等。 CSS 布局經典問題初步整理標簽：前端 [TOC] 本文主要對 CSS 布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，Fl...

Amos 2019-08-29 12:36 評論0 收藏0
CSS學習摘要-布局

摘要：注全文摘自介紹布局頁面布局技術允許我們拾取網頁中的元素，并且控制它們相對正常布局流周邊元素父容器或者主視口窗口的位置。添加此代碼將給出以下結果絕對定位絕對定位絕對定位用于將元素移動到頁面的任何位置，以創建復雜的布局。注：全文摘自MDN-介紹CSS布局 CSS頁面布局技術允許我們拾取網頁中的元素，并且控制它們相對正常布局流、周邊元素、父容器或者主視口/窗口的位置。在這個模塊中將涉及更多關于頁面...

bigdevil_s 2019-04-23 13:39 評論0 收藏0
常見的面試問題：【CSS】已知高度，寫出三欄布局

摘要：問題已知高度，寫出三欄布局，其中左右兩欄寬度各位，中間自適應回答效果示例解決方案浮動絕對定位彈性布局表格布局網格布局。方案二絕對定位將和的都設置脫離文檔流，給的設置左右兩邊距離即左右兩邊盒子的實際寬度。問題：已知高度，寫出三欄布局，其中左右兩欄寬度各位200px，中間自適應showImg(https://segmentfault.com/img/bVbu6r1?w=300&h=1...

MobService 2019-08-02 15:33 評論0 收藏0