精通 CSS 第 7 章学习笔记（上）

Posted 2021-06-21 GoldenaArcher

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了精通 CSS 第 7 章学习笔记（上）相关的知识，希望对你有一定的参考价值。

精通 CSS 第 7 章学习笔记（上）

「精通 CSS 高级 Web 标准解决方案（第三版）」中 7.1 和 7.2，布局规划与创造灵活的页面布局的内容总结和案例学习

以浮动模式为基础，进行渐进增强（向上兼容），添加 flexbox 进行页面优化

布局规划

开始实现页面的具体布局之前，总归是要做一些基础规划的。

在学成在线-静态页面终结版中的反思部分也提到了，就是做到后面之后才发现很多页面的布局规划都是可以提取出来的，而一旦提取出来了，就也不会发生很多代码重复的问题了。

布局辅助类

一些最为简单的样式可以抽离出来，例如说：

.container {
  width: 1280px;
}
.flex {
  display: flex;
}

伴随着实现的功能越来越多，就能发现重复的样式也越来越多。这个时候就可以做一些样式的抽离：

.something,
.other-thing,
.another-thing {
  /* 通用样式 */
}

前者只能实现一些简单的布局，后者则是会在代码量较为复杂的时候引起样分离上的难题。更多的实践，书中说第 12 章会有更加详细的分析。

使用现成的框架

优势就在于可以快速的实现一个 prototype，一个完善的 CSS 框架应该是具备了大多数需要的功能。

缺点也在于，因为要兼容大量的功能，因此总会出现多余且用不上的样式。

固定、流动、弹性

固定

页面具有固定的宽度，例如说现在经常使用的 1280px。

例如说 CSDN 的页面，布局就用了固定的宽度：
```
.AppConsole .container {
  width: 1208px;
  margin: 0 auto;
}
```
弹性

指布局尺寸使用 em 单位，这样，即使文本大小被缩放，布局的比例依然不会变
流动

指页面会随着比例缩放，但元素与元素之间的比例——有时候连元素之间的比例也——保持不变

固定布局仍然是用得最多的，但是对于访问者不太友好，也无法适应多种设备和屏幕尺寸。

尽管「精通 CSS 高级 Web 标准解决方案（第三版）」的作者推荐使用流动布局，但是真的要说的话，主流网站，使用流动布局还是比较少的。CSDN、京东、淘宝、小米有品都选择了用固定布局的方式，由此也能看出，流动布局对于开发者的挑战性还是比较高的。

灵活的页面布局

这一个部分主要是案例，先使用 float 布局完成一个基础，再使用 flexbox 对其升级。

最终版的效果如下：

ver5

float 完成的基础布局

ver1

这个效果图的实现应该来说还是比较简单的了，已知导航栏有四个内容，那么就可以设置导航栏的宽度为 25%。在之前的布局中，或许会直接用 nav > li {width: 25%; } 这样的做法，但是，这里有能够明确地看到其他的布局也占用了其父元素的 25%。

可复用的做法有两种：

定义 col 的宽度为 25%，随后将 col 加入到每个子组件中

大部分的实现应该都是这样的，书中偏好的是下面的选项，因为下面的选项要覆写会简单一些，所以也可以加入其他的类名到子元素进行适配
使用 class-name > * { width: 25%; } 去设定父组件中的子组件元素为 25%，因为继承的权重为 0，所以可以轻松的被覆写

* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
body {
  line-height: 1.375;
  font-family: Georgia, Times New Roman, Times, serif;
}
.wrapper {
  width: 95%;
  max-width: 76em;
  margin: 0 auto;
}
.clearfix::after,
.clearfix::before {
  content: "";
  display: block;
}
.clearfix::after {
  clear: both;
}
.col {
  float: left;
  box-sizing: border-box;
  min-height: 100px;
  outline: 1px solid #000;
}
/* 不太适合根据屏幕动态地调整大小 */
.col-lof4 {
  width: 25%;
}
.col-lof2 {
  width: 50%;
}
/* 比 .col-lof 更加合适一点的配方 */
.row-quartet > * {
  width: 25%;
}
.row-trio > * {
  width: 33.3333%;
}

.masthead {
  background-color: #8e3339;
}
.masthead h1 {
  margin: 0;
  padding: 0.5em 0;
  color: #fff;
}
.navbar {
  background-color: #5e2126;
  margin-bottom: 1.375em;
}
.navlist {
  background-color: #752a2f;
}
.navlist li {
  float: left;
  text-transform: uppercase;
  text-align: center;
  box-sizing: border-box;
}
.navlist li a {
  display: block;
  line-height: 1.75em;
  padding: 1em 2em;
  color: #fff;
}
.subcategory-featured {
  width: 50%;
}
.subcategory-content {
  width: 80%;
}
.subcategory-header {
  width: 20%;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <header class="masthead">
      <div class="wrapper"><h1>Important News</h1></div>
    </header>
    <nav class="navbar" role="navigation">
      <div class="wrapper">
        <ul class="navlist clearfix row-quartet">
          <li><a href="#">HOME</a></li>
          <li><a href="#">WORLD</a></li>
          <li><a href="#">LOCAL</a></li>
          <li><a href="#">SPORTS</a></li>
        </ul>
      </div>
    </nav>

    <main class="wrapper">
      <section class="subcategory">
        <div class="row">
          <header class="col subcategory-header">
            <h2>Sub-section 1</h2>
          </header>
          <div class="col subcategory-content">
            <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>
            <div class="row row-quartet">
              <div class="col">
                <h3>Story</h3>
              </div>
              <div class="col">
                <h3>Story</h3>
              </div>
              <div class="col">
                <h3>Story</h3>
              </div>
              <div class="col">
                <h3>Story</h3>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="subcategory">
        <div class="row">
          <header class="col subcategory-header">
            <h2>Sub-section 1</h2>
          </header>

          <div class="col subcategory-content">
            <div class="row row-trio">
              <div class="col">
                <h3>Story</h3>
              </div>
              <div class="col">
                <h3>Story</h3>
              </div>
              <div class="col">
                <h3>Story</h3>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  </body>
</html>

将 Story 这个 placeholder 换成文章的假数据。

下图是内容填充完毕后的效果图和源码：

ver2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <header class="masthead">
      <div class="wrapper"><h1>Important News</h1></div>
    </header>
    <nav class="navbar" role="navigation">
      <div class="wrapper">
        <ul class="navlist clearfix row-quartet">
          <li><a href="#">HOME</a></li>
          <li><a href="#">WORLD</a></li>
          <li><a href="#">LOCAL</a></li>
          <li><a href="#">SPORTS</a></li>
        </ul>
      </div>
    </nav>

    <main class="wrapper">
      <section class="subcategory">
        <div class="row">
          <header class="col subcategory-header">
            <h2>Lorem ipsum</h2>
          </header>
          <div class="col subcategory-content">
            <div class="row row-quartet">
              <div class="col subcategory-featured">
                <article class="story">
                  <img src="http://placehold.it/600x300" alt="Dummy image" />
                  <h3><a href="#">Cras suscipit nec leo id.</a></h3>
                  <p>
                    Autem repudiandae aliquid tempora quos reprehenderit
                    architecto, sequi repellat.
                  </p>
                </article>
              </div>
              <div class="col">
                <article class="story">
                  <img src="http://placehold.it/600x300" alt="Dummy image" />
                  <h3><a href="#">Perferendis, ipsam!</a></h3>
                  <p>
                    Neque magnam vero obcaecati facere nobis sint dolore
                    accusamus vitae consequuntur ad necessitatibus, laborum
                    molestiae.
                  </p>
                </article>
              </div>
              <div class="col">
                <article class="story">
                  <img src="http://placehold.it/600x300" alt="Dummy image" />
                  <h3><a href="#">Perferendis, ipsam!</a></h3>
                  <p>
                    Neque magnam vero obcaecati facere nobis sint dolore
                    accusamus vitae consequuntur ad necessitatibus, laborum
                    molestiae.
                  </p>
                </article>
              </div>
            </div>
            <div class="row row-quartet">
              <div class="col">
                <article class="story">
                  <h3><a href="#">Perferendis, ipsam!</a></h3>
                  <p精通 CSS 第 8 章 响应式布局 学习案例
 精通 CSS 第 10 章 变换过渡与动画 学习笔记
 精通 CSS 第 8 章 响应式布局 学习笔记
 精通 CSS 第 9 章 表单与数据表 学习笔记
 HTML5 权威指南第 12 章 表单 学习笔记
 《从python精通到机器学习量化交易全栈学习》