HTML的標簽可以用來定義文檔結構和內容，但是在網站開發中，如何使用CSS來對頁面進行布局也是非常關鍵的。其中，對
標簽布局是比較常見和常用的。接下來，我們將講解CSS屬性如何影響
的布局。
<div style="display:flex; justify-content: center;align-items: center;"> <div>這是一段文本</div> <div>這是另一段文本</div> </div>
上述代碼中，我們通過設置
的顯示方式為“flex”，使內部的
元素呈現成“一行”排列。而用“justify-content: center”和“align-items: center”這兩個CSS屬性，則讓這一行內的兩段文本內容垂直水平居中顯示。
<div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px;"> <div>div 1</div> <div>div 2</div> <div>div 3</div> <div>div 4</div> <div>div 5</div> <div>div 6</div> </div>
此句代碼則使用了“grid”屬性，將
元素分為3列自適應大小的網格，并通過“grid-gap”屬性設置格子之間的間距。這樣，無論添加或移除格子元素，頁面都會自動重新布局。
<div style="float:left; width:50%; background-color:grey;"> 左邊區域內容 </div> <div style="overflow:auto;"> <div style="width:100%; background-color:lightgrey;"> 右邊區域內容 </div> </div>
這段代碼通過CSS設置了兩個
的樣式，左邊的div元素使用了“float:left”屬性，并設置了固定寬度為50%。而右邊的div元素則通過“overflow:auto”屬性，添加垂直滾動條來處理內容超過容器高度的情況。同時，設置它的寬度為100%。
總之，CSS對
布局有著重要的影響。熟練掌握CSS屬性的使用，可以為網頁設計帶來更多的創意，提高用戶體驗。
上一篇css屬性對照表