CSS3帶來了許多新的特性,其中最令人興奮的之一就是塊級元素的變化。在以前,我們只能使用表格和浮動布局來實現多列布局。但現在,使用CSS3,我們可以利用塊級元素的一些新屬性和值來創建多列布局和其他有趣的效果。
/*創建兩列布局*/ .container { display: flex; flex-wrap: wrap; } .item { flex: 0 0 50%; box-sizing: border-box; padding: 10px; } /*創建文章瀑布流*/ .container { column-count: 3; column-gap: 20px; } .item { break-inside: avoid; } /*創建圓形圖像*/ .container { display: flex; align-items: center; justify-content: center; } .item { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; } .item img { width: 100%; height: auto; }
這是CSS3塊級元素變化的一些示例。我們可以使用眾多的新屬性和值來創造更多有趣的布局和效果。快來嘗試吧!
下一篇ios融合vue