第十一章 用CSS进行布局
- 11.1.开始布局的注意事项
- 11.2.构建页面
- 11.3.盒模型
- 11.4.控制元素的显示类型和可见性
- 11.5.设置元素的高度和宽度
11.1.开始布局的注意事项
下面列举的一些要点有助于对网站进行布局，并在发布之前对网站进行调整。
1. 内容与显示分离
之前的章节已经提到过了，不过，由于这是构建网页的根本，因此有必要再次强调一下。作为最佳实践，应始终保持内容（HTML）与显示（CSS）分离。本章介绍了如何通过外部样式表实现这一点。如果对所有的页面都这样做，就可以共享相同的布局和整体样式，而只在具体页面设置差异即可。
2. 布局方法
网站设计主要有两大类型：固定宽度和响应式。
对于固定（fixed）布局，整个页面和每一栏都有基于像素的宽度。顾名思义，无论是使用移动电话和平板电脑等较小的设备查看页面，还是使用桌面浏览器并对窗口进行缩小，它的宽度都不会改变。要知道，你访问过的大部分网站都使用固定布局。在引入响应式 Web 设计之前，这是大多数网站选用的布局方式。尽管使用固定布局的网站的比例在减少，但这种布局仍很常见，尤其是公司网站和大牌网站。此外，固定布局也是学习 CSS 时最容易掌握的布局方式，这也是本章演示这种布局的原因。
- 响 应 式 页 面 也 称 为 流 式（fluid 或liquid）页面，它使用百分数定义宽度，允许页面随显示环境的改变进行放大或缩小。除了具有流动栏，响应式页面还可以根据屏幕尺寸以特定方式调整其设计。例如，可以更改图像大小或者调整每一栏，使其大小更合适。这就可以在使用相同HTML的情况下，为移动用户、平板电脑用户和桌面用户定制单独的体验，而不是提供三个独立的网站。
没有一种布局方式可以适用于所有的情景。不过，随着智能手机和平板电脑的广泛出现（更别提我们目前还不知道，但未来一定会出现的各种不同尺寸的设备），有必要将网站做成响应式布局。这也是每天都有大量响应式网站出现的原因。
3. 浏览器注意事项
并非所有的访问者都使用同样的浏览器，同样的操作系统，甚至同样的设备访问你的网站。因此，大多数情况下，在将网站放到服务器上发布之前，通常需要在很多浏览器上对页面进行测试。推荐在开发过程中就用几个浏览器对页面定期进行测试，这样，在最后进行全面测试时，碰到的问题就会少一些。
11.2.构建页面
CSS 让页面内容富有活力，开发人员或者设计人员的设计技巧大部分都要靠它来体现。可以将 CSS 应用于第 3 章讲到的表现页面主体结构元素的内容容器，以及其中的内容。但首先我们应该知道，高效网页的核心是结构良好、语义化的 HTML。
构建页面
(1) 恰 当 地 使 用 article、aside、nav、section、header、footer 和 div 等元素将页面划分成不同的逻辑区块。根据需要，对它们应用 ARIA 地标角色。下图创建了一个名为 Le Journal 的虚构博客，它的页面结构如下所示。
三个div，其中一个将整个页面包起来，另外两个将两部分主体内容区域包起来以便应用样式设计。用作报头的 header，包括标识、社交媒体网站链接和主导航。
- 划分为多个博客条目 section 元素的main 元素，其中每个 section 元素都
有自己的页脚。 - 附注栏 div（同时使用了 article 和aside），提供关于博客作者和右栏（应用 CSS 之后就有了）博客条目的链接。
- 页面级 footer 元素，包含版权信息等内容。
(2) 按照一定的顺序放置内容，确保页面在不使用 CSS 的情况下也是合理的。例如，首先是报头，接着是主体内容，接着是一个或多个附注栏，最后是页面级的页脚。将最重要的内容放在最上面，对于智能手机和平板电脑等小屏幕用户来说，不用滚动太远就能获取主体内容。此外，搜索引擎“看到”的页面也类似于未应用 CSS的页面，因此，如果将主体内容提前，搜索引擎就能更好地对网站进行索引。这同样也会让屏幕阅读器用户受益。
(3) 以一致的方式使用标题元素（h1 ～h6），从而明确地标识页面上这些区块的信息，并对它们按优先级排序。
(4) 使用合适的语义标记剩余的内容，如段落、图和列表。
(5) 如果有必要，使用注释来标识页面上不同的区域及其内容。从代码中可以看出，笔者喜欢使用一种不同的注释格式标记区块的开始（而非结束）。
...
<body>
<div class="page">
<!-- ==== 开始报头 ==== -->
<header class="masthead"
➝ role="banner">
<p class="logo"><a href="/"><img ...
➝ /></a></p>
<ul class="social-sites">
... [社交图片链接] ...
</ul>
<nav role="navigation">
... [主导航链接列表] ...
</nav>
</header>
<!-- 结束报头 -->
<div class="container">
<!-- ==== 开始主体内容 ==== -->
<main role="main">
<section class="post">
<h1>Sunny East Garden at the
➝ Getty Villa</h1>
<img ... class="post-photo-full" />
<div class="post-blurb">
<p>It is hard to believe ...</p>
</div>
<footer class="footer">
... [博客条目页脚] ...
</footer>
</section>
<section class="post">
<h1>The City Named After Queen
➝ Victoria</h1>
<img ... class="post-photo" />
<div class="post-blurb">
<p>An hour and a half aboard
➝...</p>
</div>
<footer class="footer">
... [博客条目页脚] ...
</footer>
</section>
<nav role="navigation">
<ol class="pagination">
... [链接列表项] ...
</ol>
</nav>
</main>
<!-- 结束主体内容 -->
<!-- ==== 开始附注栏 ==== -->
<div class="sidebar">
<article class="about">
<h2>About Me</h2>
...
</article>
<div class="mod">
<h2>My Travels</h2>
... [映射图像] ...
</div>
<aside class="mod">
<h2>Popular Posts</h2>
<ul class="links">
... [链接列表项] ...
</ul>
</aside>
<aside class="mod">
<h2>Recently Shared</h2>
<ul class="links">
... [链接列表项] ...
</ul>
</aside>
</div>
<!-- 结束附注栏 -->
</div>
<!-- 结束容器 -->
<!-- ==== 开始页脚 ==== -->
<footer role="contentinfo" class=
➝ "footer">
<p class="legal"><small>© 2013 Le
➝Journal ...</small></p>
</footer>
<!-- 结束页脚 -->
</div>
<!-- 结束页面 -->
</body>
</html>这是贯穿本章和下一章的 HTML 页面，这个页面中有四个主要区块（masthead、main、sidebar 和页面 footer）。主体内容和附注栏区域包含在 class=“container” 的 div 中。整个页面包含在class=“page” 的 div 中。
11.3.盒模型
CSS 处理网页时，它认为每个元素都包含在一个不可见的盒子里。这就是众所周知的盒模型，这里的盒子由内容区域、内容区域周围的空间（内边距，padding）、内边距的外边缘（边框，border）和边框外面将元素与相邻元素隔开的不可见区域（外边距，margin）构成。这类似于挂在墙上的带框架的画，其中图画是内容，衬边是内边距，框架是边框，而该画框与相邻画框之间的距离则是外边距。
每个元素的盒子都有一些决定该元素所占空间及其外观的要素。可以使用 CSS分别控制各个要素。注意，在默认情况下，宽度和高度仅定义内容区域的尺寸。背景（蓝色区域）会延伸到边框的后面，因此，通常情况下，它仅在内边距所延伸到的区域可见，除非边框是透明的或半透明的
可以使用 CSS 确定每个元素的盒子的外观和位置，并由此控制网页的布局。本章会深入讲解 width、padding、border、margin 和控制盒子外观的其他属性。
但首先，理解盒模型的基础知识非常重要。宽度、高度和盒模型关于 CSS 的 width 属性对元素所显示宽度的影响，有两种处理方式。（不包含任何将其与邻近元素隔开的外边距。）默认的处理方式实际上有些有悖于常理。浏览器中元素的宽度与其 width 属性值并不一致（除非它没有内边距和边框）。CSS 中的宽度指示的是内边距里内容区域的宽度。而元素在浏览器中的显示宽度则是内容宽度、左右内边距和左右边框的总和。显示高度与之类似，只不过计算的是上下内边距和边框值。
示例页面中附注栏的盒模型。记住，每个元素都有自己的盒子。例如，这里显示的img元素有边框，而它左右的空间则是包含该图像的 article元素的内边距
对大多数代码编写人员来说，另一种方式则更为直观。使用这种方式的话，元素的显示宽度就等于 width 属性的值。内容宽度、内边距和边框都包含在里面。height 属性与之类似。要使用这种模式，仅需对元素设置 box-sizing: border-box;。
如果设置了 box-sizing: border-box;，则宽度和高度就包含了除外边距以外的所有要素。
11.4.控制元素的显示类型和可见性
正如第 1 章讲到的，每个元素在默认情况下要么显示在单独的行（如 h1 ～ h6、p 等），要么显示在行内（如 em、strong、cite 等）。第 1 章还提到，前一种元素称为块级元素，后一种称为行内元素（这是一种非官方的叫法）。造成这种情况的本质是它们的 display 属性，即块级元素被设置为 display: block（对于 li 元素为 display: list-item），而行内元素被设置为 display: inline。当然，使用 CSS 可以改变元素的默认显 示 类 型， 例 如 将 block 改 为 inline
<p>This is the <em>first</em> paragraph.</p>
<p>This is the <em>second</em> paragraph.</p>
这些简单嵌套 em 元素的段落演示了display: block 和 display: inline 的区别
p {
display: inline;
}
两个段落看起来像一个段落
em {
display: block;
}
em 元素显示在单独的行，就像段落一样
em {
background: lightgreen;
display: inline-block;
width: 300px;
}
设置为inline的元素会忽略任何width、height、margin-top 和 margin-bottom 设置。不过，设置为 inline-block 的元素可以使用这些属性，如这里的 em 可以设置 width。因此，如果本例对 em 设 置 display:inline;这里将 em 的背景设为浅绿色，是为了让 em 的宽度变得明显。
** 控制元素可见性**
visibility 属性的主要目的是控制元素是否可见。与 display 属性不同的是，使用
visibility 隐藏元素时，元素及其内容应该出现的位置会留下一片空白区域。隐藏元素的空白区域仍然会在文档流中占据位置。
(1) 在样式表规则中，输入 visibility:。
(2) 输入 hidden，让元素不可见，但在文档流中保留它（如图 11.6.8 所示）；或者输入 visible，让元素显示出来。
11.5.设置元素的高度和宽度
可以为很多元素设置高度和宽度，如分块内容、段落、列表项、div、图像、video、表单元素等。同时，可以为短语内容元素设置 display: block; 或display: inline-block;，再对它们设置宽度或高度。
1. 设置元素高度或宽度的步骤
(1) 输入 width: w，其中的 w 是元素内容区域的宽度，可以表示为长度（带单位，如 px、em 等）或父元素的百分数。或者使用auto 让浏览器计算宽度（这是默认值）。
(2) 输入 height: h，其中的 h 是元素内容区域的高度，只能表示为长度（带单位，如 px、em 等）。或者使用 auto 让浏览器计算高度（这是默认值）。
2. 宽度、外边距和 auto
如果不显式设置宽度和高度，浏览器就会使用 auto。对于大多数默认显示为块级元素的元素，width 的 auto 值是由包含块的宽度减去元素的内边距、边框和外边距计算出来的。
