css3中display box使用方法是怎樣的

發(fā)布時(shí)間：2021-09-17 16:11:09 來(lái)源：億速云閱讀：134 作者：柒染欄目：web開(kāi)發(fā)

css3中display box使用方法是怎樣的，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

其中的一個(gè)場(chǎng)景如下：

假如我們想要使得內(nèi)部的123元素水平以不同的比例分割outer所占的空間，以往的做法我們可能會(huì)讓123元素浮動(dòng)或者設(shè)置display屬性為inline-block，然后再給width屬性設(shè)置寬度百分比去分割outer。

使用display:box后可以這樣實(shí)現(xiàn)：

代碼如下:

<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>

效果如下：

css3中display box使用方法是怎樣的

子元素中box-flex屬性為該元素的占比，若想讓此屬性生效，父元素必須設(shè)置display:box。以a3為例，a3設(shè)置了box-flex為3，則他所占的寬度為600*(3/(1+2+3))為300px。

如果其中一個(gè)子元素設(shè)置了固定寬度100px，則剩下的500px將會(huì)參與到比例劃分的規(guī)則中。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。

向AI問(wèn)一下細(xì)節(jié)

css3中display box使用方法是怎樣的

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽