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