CSS頁面布局與網格（上）

網格系統是設計師在切分布局時作為參照的一組行和列。

類名用於為布局新增樣式。為了讓樣式可以重用，讓類名表達其意圖。

.column .column-half .row

另一種做法：

.thing, .other-thing, .third-thing, .fourth-thing

命名規範是高質量**的重要組成部分。

如果設計很複雜，那麼最好選擇乙個現成的css布局框架。

到底是該選擇現成的框架還是自己寫呢？視情況而定。如果你要快速做乙個原型以驗證某個想法，當然要選現成的框架。如果你的**複雜到要修改已有框架的很多**，那可能還不如自己寫更好。

包裝元素是頁面布局中常用的乙個盛放內容的元素。

body 
width: 95%;
max-width: 76em;
margin: 0 auto;
}

通過自動外邊距，將包裝元素設定為在頁面上居中。

.media-block .media-fig .media-body

浮動的元素會被拿出文件流，因此類名為.media-block的div不會占用空間：它只包含浮動的內容，因此無法在文件流中為它生成高度。在類名為.media-block的div內部某處應用clear，從而在使用了clear的元素上方創造出足夠的垂直外邊距，從而為包住浮動元素創造出空間。

.clear

有時候可能會有現成的元素用於清除，但這裡為了實現我們想要的布局而引入了空div。雖然我們可以通過overflow屬性來包含浮動元素，但是比較大的區塊很可能會有定位內容被擺放到行容器之外。因此，比較好做法是使用設定了清除的偽元素。

.media-block:after

/* 使用浮動把行分成列 */ .col /* 使用通用選擇符，降低規則特殊性，後面可以用乙個特殊的類名來覆蓋這個寬度。 */ .row-quartet > * .subcategory-featured

給列間新增一些空距（gutter）。使用外邊距作為空距，保證空距與列寬相協調。

外邊距相對包含塊來計算，空距與總寬度的比例再除以2就是每一列左右兩邊的外邊距。（假設在一般的螢幕尺寸中，空距等於文字的行高，兩個行之間的距離等於行高。）

.row .col

設定空距的替代方案：

.col

用行內塊包裝行與列：font-size: 0; /* 去掉行內塊之間的間隙 */

margin: 0 -11px; /* 考慮到先後相容的後備規則 */

margin: 0 -.6875rem;

} float: none;

vertical-align: top;

display: inline-block; /* 行內塊 */

font-size: 16px; /* 考慮到先後相容的後備規則 */

font-size: 1rem;

}使用flexbox實現等高的列：

.flexbox .row

這樣，我們就已經建立了等高的列，其實這也是可伸縮項會拉伸以填充父元素的預設行為。

.flexbox .col 
.flexbox .col > * 
/* 對包裝行進行增強 */
display: flex;
flex-wrap: wrap; /* 允許折行 */
}

flexbox是一種強大的設計工具，可以實現精細而又靈活的內容布局。

基於浮動的布局基礎上又應用了flexbox，做到了最大限度的向後相容。

現代flexbox效能一般都比浮動要優越。

使用**實現二維布局，**中的單元可通過colspan和rowspan實現複雜的布局。

CSS頁面布局與網格（上）

css 網格布局 CSS網格布局簡介

CSS網格布局

CSS 網格布局

CSS頁面布局與網格（上）

css 網格布局 CSS網格布局簡介

CSS網格布局

CSS 網格布局

相關推薦