成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

KunMinX / 1973人閱讀

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

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

github地址

display:table

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

負(fù)margin

負(fù)margin的使用技巧和應(yīng)用場景其實還是挺廣泛的，比如使用float和負(fù)margin現(xiàn)實圣杯布局，雙飛燕布局等等。

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

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

    html結(jié)構(gòu)：
    
    

        

            
.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屬性(自己不熟悉的自行g(shù)oogle)
        display: inline-block;  //主要是為了好設(shè)置寬度
        width: 33.3333%;    //都是相對于父元素的33.3333%,即將父元素平均分成了3等份。
        font-size: 1rem;
        vertical-align: top;    //元素在水平線上的對齊方式
        padding-left: 10px;     //左內(nèi)邊距10px
        padding-right: 10px;    //右內(nèi)邊距10px;
    }

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

3個子元素的寬度都是33.333%，平均的3等份，但是設(shè)置padding-left和padding-right的值都為10px的時候，正好和左右負(fù)margin抵消，這樣就是現(xiàn)實了3列等寬布局。

垂直居中 
    html結(jié)構(gòu)：
    

        

            
1

        

    

    
    css：
    .kite--position {
        display: block;
        position: absolute;
        top: 0;     //使用絕對定位也可以實現(xiàn)自適應(yīng)哦~
        right: 0;
        height: 150px;
        text-align: center;//子元素的display屬性為inline-block，因此可以實現(xiàn)水平居中
        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當(dāng)中使用比較巧的是利用.kite--position的偽元素(content屬性一定不能省，可以把值設(shè)為"")，生成一個行內(nèi)元素，其高度為100%，即為父元素的高度。同時，.kite--position的子元素也聲明為行內(nèi)元素，因此這個時候可以利用vertical-align屬性進行垂直居中.

width:auto

這個屬性平時用的不多，看源碼的時候看里面用的很普遍，它的用法和width:100%還是有點區(qū)別的。
比如遇到這種結(jié)構(gòu):

    

        
123123

    

    
    .parent {
        position: absolute;
        left: 50px;
        top: 50px;
        width: 200px;
        height: 200px;
        border: 1px solid #e3e3e3;
    }
    .child {
        width: auto 或者 100%;
        //可以設(shè)置不同margin和padding看下效果
        border: 1px solid #e3e3e3;
    }

一般塊級元素如果不添加float或者絕對定位或者設(shè)定寬度的話，它的寬度默認(rèn)為100%.這個寬度僅僅是內(nèi)容的寬度，如果你再設(shè)置padding或者margin值，會保持width不變，會出現(xiàn)盒模型伸長或者移動位置的情況。

    width = 內(nèi)容

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

    width = 內(nèi)容 + padding + border;

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

可以到codepen上看看
codepen.io

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111206.html

相關(guān)文章

  • 認(rèn)識flexbox布局

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

    fasss 評論0 收藏0

  • CSS 布局經(jīng)典問題初步整理

    摘要：布局經(jīng)典問題初步整理標(biāo)簽前端本文主要對布局中常見的經(jīng)典問題進行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動，居中布局，響應(yīng)式設(shè)計，布局，等等。 CSS 布局經(jīng)典問題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對 CSS 布局中常見的經(jīng)典問題進行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動，居中布局，響應(yīng)式設(shè)計，F(xiàn)l...

    Amos 評論0 收藏0

  • CSS學(xué)習(xí)摘要-布局

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

    bigdevil_s 評論0 收藏0

  • 常見的面試問題：【CSS】已知高度，寫出三欄布局

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

    MobService 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<