CSS页面布局与网格（上）
1.布局规划
1.1 网格
网格系统是设计师在切分布局时作为参照的一组行和列。
1.2 布局辅助类
类名用于为布局添加样式。为了让样式可以重用，让类名表达其意图。
.column { /* 一般列的样式 */ }
.column-half { /* 占列宽的一半 */ }
.row { /* 一般行的样式 */ }
另一种做法：
.thing,
.other-thing,
.third-thing,
.fourth-thing {
/* 这里共用的样式 */
}
命名规范是高质量代码的重要组成部分。
如果设计很复杂，那么最好选择一个现成的CSS布局框架。
到底是该选择现成的框架还是自己写呢？视情况而定。如果你要快速做一个原型以验证某个想法，当然要选现成的框架。如果你的网站复杂到要修改已有框架的很多代码，那可能还不如自己写更好。
2.创建灵活的页面布局
2.1 包装元素
包装元素是页面布局中常用的一个盛放内容的元素。
<body>
<div class="wrapper">
<h1>My page</h1>
</div>
</body>
body {
margin: 0; /* body元素默认是有外边距的。 */
}
.wrapper {
width: 95%;
max-width: 76em;
margin: 0 auto;
}
通过自动外边距，将包装元素设置为在页面上居中。
2.2 行容器
<div class="media-block">
<img class="media-fig" src="img/pic.png" alt="The pic" />
<div class="media-body">
<h3>Title of this</h3>
<p>Brief description of this</p>
</div>
</div>
.media-block {
background-color: gray;
border: solid 1px black;
}
.media-fig {
float: left;
width: 30%;
}
.media-body {
float: right;
width: 65%;
}
浮动的元素会被拿出文档流，因此类名为.media-block的div不会占用空间：它只包含浮动的内容，因此无法在文档流中为它生成高度。在类名为.media-block的div内部某处应用clear，从而在使用了clear的元素上方创造出足够的垂直外边距，从而为包住浮动元素创造出空间。
<div class="media-block">
<img class="media-fig" src="img/pic.png" alt="The pic" />
<div class="media-body">
<h3>Title of this</h3>
<p>Brief description of this</p>
<div class="clear"></div> <!-- 额外添加的空div -->
</div>
</div>
.clear {
clear: both;
}
有时候可能会有现成的元素用于清除，但这里为了实现我们想要的布局而引入了空div。虽然我们可以通过overflow属性来包含浮动元素，但是比较大的区块很可能会有定位内容被摆放到行容器之外。因此，比较好做法是使用设置了清除的伪元素。
.media-block:after {
content: '';
display: block;
clear: both;
}
2.3 创建列
<div class="row row-quartet">
<div class="col subcategory-featured">
<h3>Story</h3>
</div>
<div class="col">
<h3>Story</h3>
</div>
<div class="col">
<h3>Story</h3>
</div>
</div>
/* 使用浮动把行分成列 */
.col {
float: left;
box-sizing: border-box;
}
/* 使用通用选择符，降低规则特殊性，后面可以用一个特殊的类名来覆盖这个宽度。 */
.row-quartet > * {
width: 25%;
}
.subcategory-featured {
width: 50%;
}
2.4 流式空距
给列间添加一些空距（gutter）。使用外边距作为空距，保证空距与列宽相协调。
外边距相对包含块来计算，空距与总宽度的比例再除以2就是每一列左右两边的外边距。（假设在一般的屏幕尺寸中，空距等于文本的行高，两个行之间的距离等于行高。）
.row {
/* 抵消最外侧的空距 */
margin: 0 -.9%;
}
.col {
/* 流式空距 */
margin: 0 .9% 1.375em;
}
设置空距的替代方案：
.col {
float: left;
box-sizing: border-box;
/* 使用内边距来设置空距。 */
padding: 0 .6875em 1.375em;
}
2.5 增强列：包装与等高
用行内块包装行与列：
<ul class="row row-quartet row-wrapping">
<li class="col">
<div class="story">
<h3><a href="#">Perferendis, ipsam! Dolor sit amet consectetur</a></h3>
</div>
</li>
<li class="col">
<div class="story">
<h3><a href="#">Aliquam mattis eros id posuere.</a></h3>
</div>
</li>
<!-- 还有更多 -->
</ul>
.row-wrapping {
font-size: 0; /* 去掉行内块之间的间隙 */
margin: 0 -11px; /* 考虑到先后兼容的后备规则 */
margin: 0 -.6875rem;
}
.row-wrapping > * {
float: none;
vertical-align: top;
display: inline-block; /* 行内块 */
font-size: 16px; /* 考虑到先后兼容的后备规则 */
font-size: 1rem;
}
使用Flexbox实现等高的列：
.flexbox .row {
display: flex;
}
这样，我们就已经创建了等高的列，其实这也是可伸缩项会拉伸以填充父元素的默认行为。
.flexbox .col {
display: flex;
flex-direction: column;
}
.flexbox .col > * {
flex: 1; /* flex-grow: 1、flex-shrink: 1、flex-basis: 0。 */
}
/* 对包装行进行增强 */
.flexwrap .row-wrapping {
display: flex;
flex-wrap: wrap; /* 允许折行 */
}
Flexbox是一种强大的设计工具，可以实现精细而又灵活的内容布局。
基于浮动的布局基础上又应用了Flexbox，做到了最大限度的向后兼容。
现代Flexbox性能一般都比浮动要优越。
使用表格实现二维布局，表格中的单元可通过colspan和rowspan实现复杂的布局。
参考资料：
- 《精通CSS》— [英] 安迪·巴德、[瑞典] 埃米尔·比约克隆德
