建站教程 2022-05-23

CSS3 盒布局與彈性盒布局

文章目錄

1 什麼是CSS3 盒布局
2 什麼是彈性盒布局

什麼是CSS3 盒布局

在網頁布局中，如果讓讓幾個塊狀區域橫向排列，常用的方法就是使用float:left。但使用float屬性時，會出現一些問題，例如浮動，並且如果不同版塊的內容數量不一樣就會造成各個版塊的高度不一樣。

那麼CSS3 盒布局display:box就可以解決這樣的問題，它可以不需要使用float屬性就可以橫排塊狀元素。並且每一個版塊的高度都是一樣的。它的作用與CSS3多欄布局columns很相似。

怎麼使用CSS3 盒布局display:box呢？方法很簡單，只需要給父元素加上display:box即可。

實例代碼如下：

<div class="codecolorer-container html4strict geshi" style="overflow:auto;white-space:nowrap;width:100%;"><div class="html4strict codecolorer" style="white-space:nowrap">&lt;<span style="color: #000000; font-weight: bold;">style</span>&gt;<br>
.tt<span style="color: #66cc66;">{</span>display:box;display:-webkit-box;<span style="color: #66cc66;">}</span><br>
.ft1<span style="color: #66cc66;">{</span>font-<span style="color: #000066;">size</span>:20px;text-transform:capitalize;<span style="color: #000066;">width</span>:200px;<span style="color: #000066;">background</span>:#f00;padding:20px<span style="color: #66cc66;">}</span><br>
.ft2<span style="color: #66cc66;">{</span>font-<span style="color: #000066;">size</span>:20px;text-transform:uppercase;<span style="color: #000066;">width</span>:200px;<span style="color: #000066;">background</span>:yellow;padding:20px<span style="color: #66cc66;">}</span><br>
.ft3<span style="color: #66cc66;">{</span>font-<span style="color: #000066;">size</span>:20px;font-variant:small-caps;<span style="color: #000066;">width</span>:200px;<span style="color: #000066;">background</span>:green;padding:20px<span style="color: #66cc66;">}</span><br>
&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">style</span>&gt;<br>
&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"tt"</span>&gt;<br>
&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"ft1"</span>&gt;首字母大寫：hello world首字母大寫：hello world首字母大寫：hello world首字母大寫：hello world首字母大寫：hello world首字母大寫：hello world&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;<br>
&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"ft2"</span>&gt;全部大寫：hello world全部大寫：hello world全部大寫hello world全部大寫：hello world全部大寫：hello world&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;<br>
&lt;<span style="color: #000000; font-weight: bold;">div</span> <span style="color: #000066;">class</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"ft3"</span>&gt;小型大寫：Hello World小型大寫：Hello World小型大寫：小型大寫：Hello World&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;<br>
&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">div</span>&gt;</div></div>

.tt{display:box;display:-webkit-box;}

.ft1{font-size:20px;text-transform:capitalize;width:200px;background:#f00;padding:20px}

.ft2{font-size:20px;text-transform:uppercase;width:200px;background:yellow;padding:20px}

.ft3{font-size:20px;font-variant:small-caps;width:200px;background:green;padding:20px}

</style>

<div class="ft1">首字母大寫：hello world首字母大寫：hello world首字母大寫：hello world首字母大寫：hello world首字母大寫：hello world首字母大寫：hello world</div>

<div class="ft2">全部大寫：hello world全部大寫：hello world全部大寫hello world全部大寫：hello world全部大寫：hello world</div>

<div class="ft3">小型大寫：Hello World小型大寫：Hello World小型大寫：小型大寫：Hello World</div>

</div></div></div>

什麼是彈性盒布局

上面的盒布局可以自動將塊狀區域橫排，但是它不會隨瀏覽屏幕變化而變化寬度形成自適應。這時可以給盒布局裡子版塊添加box-flex屬性讓變成彈性盒布局，就會自適應了。

語法：

.ft1{-webkit-box-flex:1;-moz-box-flex:1;}

另外還可以通過box-ordinal-group屬性來改變每個子版塊的的順序，後面數字越小越靠前。

.ft1{-webkit-box-ordinal-group:1;-moz-box-ordinal-group:1;}

由於網站搬家，部分鏈接失效，如無法下載，請聯繫站長！謝謝支持！
1. 帶 [親測] 說明源碼已經被站長親測過!
2. 下載後的源碼請在24小時內刪除,僅供學慣用途！
3. 分享目的僅供大家學習和交流，請不要用於商業用途！
4. 本站資源售價只是贊助，收取費用僅維持本站的日常運營所需！
5. 本站所有資源來源於站長上傳和網路，如有侵權請郵件聯繫站長！
6. 沒帶 [親測] 代表站長時間緊促,站長會保持每天更新 [親測] 源碼 !
7. 盜版ripro用戶購買ripro美化無擔保,若設置不成功/不生效我們不支持退款!
8. 本站提供的源碼、模板、插件等等其他資源，都不包含技術服務請大家諒解！
9. 如果你也有好源碼或者教程，可以到審核區發布，分享有金幣獎勵和額外收入!
10.如果您購買了某個產品，而我們還沒來得及更新，請聯繫站長或留言催更，謝謝理解 !
GG資源網 » CSS3 盒布局與彈性盒布局

分享到：