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》— [英] 安迪·巴德、[瑞典] 埃米尔·比约克隆德