CSS經典布局是我們在網頁設計中常常使用到的布局方式。下面我們介紹五種常用的CSS經典布局。
1. 浮動布局
.container{ overflow:hidden; } .box{ float:left; margin-right:10px; }
浮動布局通過將元素轉換為塊級元素,然后設置float屬性來實現布局。浮動布局適合于左右欄布局、圖文混排等情況。
2. 定位布局
.container{ position:relative; } .box{ position:absolute; left:0; top:0; }
定位布局通過設置元素的position屬性為fixed、absolute等來實現布局。定位布局適合于絕對定位、相對定位等情況。
3. 彈性布局
.container{ display:flex; justify-content:center; } .box{ flex:1; margin:10px; }
彈性布局通過設置容器的display屬性為flex來實現布局。彈性布局適合于垂直居中、自適應等情況。
4. 網格布局
.container{ display:grid; grid-template-columns:repeat(3,1fr); grid-gap:10px; } .box{ background-color:#ccc; }
網格布局通過設置容器的display屬性為grid來實現布局。網格布局適合于網格化布局、響應式布局等情況。
5. 多列布局
.container{ columns:3; column-gap:10px; } .box{ background-color:#ccc; }
多列布局通過設置容器的columns屬性來實現布局。多列布局適合于文本列表、多列圖文混排等情況。
以上就是常用的五種CSS經典布局,我們可以根據實際情況選擇合適的布局方式來實現頁面布局。