深入淺析css3 中display box使用方法
發(fā)布時(shí)間：2015-11-25 16:11:29 作者：佚名 
我要評(píng)論
我要評(píng)論css3給display屬性提供了box這個(gè)值，極大的方便了開(kāi)發(fā)者，下面給大家介紹css3 display box具體用法,對(duì)css3 display box相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
css3給display屬性提供了box這個(gè)值，極大的方便了開(kāi)發(fā)者，下面給大家介紹css3 display box具體用法。
其中的一個(gè)場(chǎng)景如下：
假如我們想要使得內(nèi)部的123元素水平以不同的比例分割outer所占的空間，以往的做法我們可能會(huì)讓123元素浮動(dòng)或者設(shè)置display屬性為inline-block，然后再給width屬性設(shè)置寬度百分比去分割outer。
使用display:box后可以這樣實(shí)現(xiàn)：
復(fù)制代碼
代碼如下:<code class="language-css" hljs="">#outer{
width:600px;
height:100px;
display:-moz-box;
display:-webkit-box;
display:box;
}
#a1{
background:blue;
-moz-box-flex:1;
-webkit-box-flex:1;
box-flex:1;
}
#a2{
background:green;
-moz-box-flex:2;
-webkit-box-flex:2;
box-flex:2;
}
#a3{
background:yellow;
-moz-box-flex:3;
-webkit-box-flex:3;
box-flex:3;
}</code>
效果如下：
子元素中box-flex屬性為該元素的占比，若想讓此屬性生效，父元素必須設(shè)置display:box。以a3為例，a3設(shè)置了box-flex為3，則他所占的寬度為600*(3/(1+2+3))為300px。
如果其中一個(gè)子元素設(shè)置了固定寬度100px，則剩下的500px將會(huì)參與到比例劃分的規(guī)則中。
以上所述就是本文給大家分享的css3 中display box使用方法，希望大家喜歡。
相關(guān)文章
使用CSS的border-radius屬性 設(shè)置圓弧
這篇文章主要介紹了使用CSS的border-radius屬性 設(shè)置圓弧,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-11-26詳解CSS3中的box-sizing（content-box與border-box）
這篇文章主要介紹了CSS3中的box-sizing（content-box與border-box）的相關(guān)資料,需要的朋友可以參考下2019-04-19
這篇文章主要介紹了使用CSS的border屬性繪制各種幾何形狀的方法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們2019-03-01
CSS繪制三角形的實(shí)現(xiàn)代碼(border法)
這篇文章主要介紹了CSS繪制三角形的實(shí)現(xiàn)代碼(border法)的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-11詳解CSS3 用border寫(xiě) 空心三角箭頭 (兩種寫(xiě)法)
本篇文章主要介紹了CSS3 用border寫(xiě) 空心三角箭頭 (兩種寫(xiě)法)，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-29- 這是一款由腳本之家翻譯自國(guó)外網(wǎng)站的在線CSS工具，可在線調(diào)整生成樣式的邊框圓角效果，以及邊框的寬度、顏色、樣式等屬性，還可實(shí)時(shí)預(yù)覽生成的CSS代碼，并支持一鍵復(fù)制代碼2017-09-19
css display inline block 兼容性問(wèn)題寫(xiě)法
今天在寫(xiě)布局的時(shí)候發(fā)現(xiàn)的一個(gè)bug，如果不這樣就達(dá)不到預(yù)期的效果，無(wú)法兩行排列，原來(lái)ie6、ie7下對(duì)display:inline-block不支持，所以需要用到css hack才可以2016-01-10- 本篇文章給大家介紹css3 display知識(shí)詳解，涉及到css3 display相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧2015-11-25
深入解析CSS的display:inline-block屬性的使用
這篇文章主要介紹了CSS的display:inline-block屬性的使用,其中對(duì)使用時(shí)產(chǎn)生的空隙問(wèn)題的解決作了重點(diǎn)講解,需要的朋友可以參考下2015-11-09- 在一般的CSS布局制作時(shí)候，我們常常會(huì)用到display對(duì)應(yīng)值有block、none、inline這三個(gè)值。下面我們來(lái)分別來(lái)認(rèn)識(shí)和學(xué)習(xí)什么時(shí)候用什么值。這里通過(guò)CSS display知識(shí)加實(shí)例講解2014-09-02
