《深入解析CSS》笔记

如果我大一大二的时候接触这本书，我想，我现在应该就能养成一个良好的编码习惯了吧,我是说在css页面布局这块，还好，不算太迟。下面我将把我读的这本书的知识点写出。但我还是建议诸位去读下原著，微信读书能搜到，免费的。

1.关于单位的使用

1）如果属性值根据元素的 font-size 获得，则使用 em，如padding\margin\line-height\width\height 等值（使字体大小变化时元素周围的间距会等比例缩放）
2）其他一切单位使用 rem

2.要使HTML页面随缩放而整体缩放，您可以使用以下两种方法：

1)使用响应式设计

响应式设计是一种使网站能够适应不同设备和屏幕大小的方法。通过使用响应式设计，您可以使用CSS和HTML等技术来确保页面元素在不同屏幕上都保持良好的布局。
要使用响应式设计，您可以使用以下技术：

1))使用媒体查询（Media Queries）：媒体查询是一种CSS技术，它可以让您根据设备的屏幕大小来更改样式。您可以使用媒体查询来设置不同的样式规则，以适应不同的屏幕大小。

2))使用百分比宽度：使用百分比宽度可以让元素相对于其父元素进行缩放，因此当页面缩放时，元素将相应地缩放。

3)))使用弹性布局（Flexbox）：Flexbox是一种CSS布局技术，它可以让您轻松地在不同屏幕大小和设备上排列元素。使用Flexbox，您可以轻松地实现响应式设计。
2)使用视口单位（Viewport Units）

视口单位是一种相对单位，它相对于视口的尺寸。使用视口单位，您可以使页面元素相对于视口进行缩放。
要使用视口单位，请在HTML页面的视口元素中设置以下属性：
php复制<meta name="viewport" content="width=device-width, initial-scale=1.0">

这将使页面宽度等于设备宽度，并将初始缩放级别设置为1.0。然后，您可以使用CSS的视口单位（vw、vh、vmin和vmax）来设置元素的大小，这些单位将相对于视口的大小进行缩放。
例如，以下代码将一个元素设置为视口宽度的50%，并随着视口的缩放而缩放：
css复制div {
  width: 50vw;
}

3.px，em，rem的用法
用em设置padding，margin，border
rem设置font-size
一般会用rem设置字号，用px设置边框，用em设置其他大部分属性，尤其是内边距、外边距和圆角（不过我有时用百分比设置容器宽度）。
拿不准的时候，用rem设置字号，用px设置边框，用em设置其他大部分属性
通过给页面根元素设置不同字号，我们响应式地重新定义了整个网页的em和rem

4.层叠

1）层叠是决定如何解决样式声明冲突的规则，是CSS语言的基础

2）当声明冲突时，层叠会依据三种条件解决冲突。(1) 样式表的来源：样式是从哪里来的，包括你的样式和浏览器默认样式等。(2) 选择器优先级：哪些选择器比另一些选择器更重要。(3) 源码顺序：样式在样式表里的声明顺序。

3）总体的优先级按照由高到低排列如下所示：(1) 作者的！important(2) 作者（你自己）(3) 用户代理（浏览器默认）

4）浏览器将优先级分为两部分：HTML的行内样式（<a   style="这就是HTML的行内样式">）和选择器的样式。   行内样式的优先级是大于选择器样式的

 5）同等数量下：id选择器   >class选择器  >  标签选择器  ，但是一个id大于n个class的优先级

另外：伪类选择器（如：hover）和属性选择器（如[type="input"]）与一个类选择器的优先级相同。通用选择器（＊）和组合器（>、+、~）对优先级没有影响。

6）有一个好方法来统计和表示优先级

另外需要注意的一点：id只会生效一次，就是说id是唯一的，浏览器只会将样式和方法给第一个，后面的获取不到 ，所以在写代码时，尽量用class，少用id，优先级考虑上也是用class好，这样方便你后期再添加id覆盖样式

7）源码顺序也会影响层叠，顺序的记忆口诀是“LoVe/HAte”（“爱/恨”），即link（链接）、visited（访问）、hover（悬停）、active（激活）。注意，如果将一个选择器的优先级改得跟其他的选择器不一样，这个规则就会遭到破坏，可能会带来意想不到的结果。

8）浏览器遵循三个步骤，即来源、优先级、源码顺序，来解析网页上每个元素的每个属性。如果一个声明在层叠中“胜出”，它就被称作一个层叠值（层叠值——作为层叠结果，应用到一个元素上的特定属性的值）。

5.继承

1）如果一个元素的某个属性没有层叠值，则可能会继承某个祖先元素的值。

2） 不是所有的属性都能被继承。默认情况下，只有特定的一些属性能被继承，通常是我们希望被继承的那些。它们主要是跟文本相关的属性：color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing。还有一些其他的属性也可以被继承，比如列表属性：list-style、list-style-type、list-style-position以及list-style-image。表格的边框属性border-collapse和border-spacing也能被继承。注意，这些属性控制的是表格的边框行为，而不是常用于指定非表格元素边框的属性。

6.margin，padding1的顺序：上，右，下，左

属性值还可以缩写。如果声明结束时四个属性值还剩一个没指定，没有指定的一边会取其对边的值。指定三个值时，左边和右边都会使用第二个值。指定两个值时，上边和下边会使用第一个值。如果只指定一个值，那么四个方向都会使用这个值。

7.特殊值控制层叠
有两个特殊值可以赋给任意属性，用于控制层叠：inherit和initial。

有时，我们想用继承代替一个层叠值。这时候可以用inherit关键字。可以用它来覆盖另一个值，这样该元素就会继承其父元素的值。还可以使用inherit关键字强制继承一个通常不会被继承的属性，比如边框和内边距。通常在实践中很少这么做

需要撤销作用于某个元素的样式。这可以用initial关键字来实现。

声明display: initial等价于display:inline。不管应用于哪种类型的元素，它都不会等于display: block。这是因为initial重置为属性的初始值，而不是元素的初始值。inline才是display属性的初始值。

8.当设置padding、height、width、border-radius等属性时，使用em会很方便。这是因为当元素继承了不同的字号，或者用户改变了字体设置时，这些属性会跟着元素均匀地缩放。

在定义这些盒子的样式时，可以用em指定内边距和圆角。给每个元素设置1em的内边距和圆角，再分别指定不同的字号，那么这些属性会随着字体一起缩放。

9.如果知道字号的像素值，但是想用em声明，可以用一个简单的公式换算：用想要的像素大小除以父级（继承）的像素字号。比如，想要一个10px的字体，元素继承的字体是12px，则计算结果是10/12 = 0.8333em。如果想要一个16px的字体，父级字号为12px，则计算结果是16/12 = 1.3333em。在本章我们还会进行几次这样的计算。

10.em的复杂之处在于同时用它指定一个元素的字号和其他属性。这时，浏览器必须先计算字号，然后使用这个计算值去算出其余的属性值。这两类属性可以拥有一样的声明值，但是计算值不一样。

11.em用在内边距、外边距以及元素大小上很好，但是用在字号上就会很复杂。值得庆幸的是，我们有更好的选择：rem（因为文字会逐级减小，如果都是0.9em的话）

12.rem不是相对于当前元素，而是相对于根元素的单位。不管在文档的什么位置使用rem,1.2rem都会有相同的计算值：1.2乘以根元素的字号

13.媒体查询，即@media规则，可以指定某种屏幕尺寸或者媒体类型（比如，打印机或者屏幕）下的样式。这是响应式设计的关键部分

 

14.使用calc()定义字号calc()函数内可以对两个及其以上的值进行基本运算。当要结合不同单位的值时，calc()特别实用。它支持的运算包括：加（+）、减（−）、乘（×）、除（÷）。加号和减号两边必须有空白，因此我建议大家养成在每个操作符前后都加上一个空格的习惯，比如calc(1em + 10px)。（clac（）的用处不止于定义字号，在页面的宽度设计时，配合百分比，也能达到响应式的结果）

15.有些属性允许无单位的值（即一个不指定单位的数）。支持这种值的属性包括line-height、z-index、font-weight（700等于bold,400等于normal，等等）。任何长度单位（如px、em、rem）都可以用无单位的值0，因为这些情况下单位不影响计算值，即0px、0%、0em均相等。警告一个无单位的0只能用于长度值和百分比，比如内边距、边框和宽度等，而不能用于角度值，比如度，或者时间相关的值，比如秒。

使用无单位的数值时，继承的是声明值，即在每个继承子元素上会重新算它的计算值。这样得到的结果几乎总是我们想要的。我们可以用一个无单位的数值给body设置行高，之后就不用修改了，除非有些地方想要不一样的行高

16.自定义属性

 使用JavaScript设置一个自定义属性

 

 如果运行以上脚本，所有继承了--main-bg属性的元素都会更新，使用新的值。在网页中，第一个面板的背景色会改为浅蓝色。第二个面板保持不变，因为它依然继承了深色容器里的属性。利用这种技术，就可以用JavaScript实时切换网站主题，或者在网页中突出显示某些元素，或者实时改变任意多个元素。只需要几行JavaScript代码，就可以进行更改，从而影响网页上的大量元素

17.盒模型的默认行为（如图3-4所示）。当给一个元素设置宽或高的时候，指定的是内容的宽或高，所有内边距、边框、外边距都是追加到该宽度上的。

 这种行为会让一个宽300px、内边距10px、边框1px的元素渲染出来宽322px（宽度加左右内边距再加左右边框）。如果这些值使用不同的单位，情况就会更复杂。

18.调整盒模型

box-sizing的默认值为content-box，这意味任何指定的宽或高都只会设置内容盒子的大小。将box-sizing设置为border-box后，height和width属性会设置内容、内边距以及边框的大小总和，这刚好符合示例的要求。

盒模型的box-sizing为border-box。在这个模型中，内边距不会让一个元素更宽，而是让内部的内容更窄。

19.全局修改盒模型为border-box

 20.盒模型通常不会被继承，但是使用inherit关键字可以强制继承。如下述代码所示，可以在必要时选中第三方组件的顶级容器，将其恢复为content-box。这样组件的内部元素会继承该盒模型。

.third-party-component { box-sizing: content-box; }

21. 正的外边距会将容器的边缘往里推，而负的外边距则会将边缘往外拉

22.除非别无选择，否则不要明确设置元素的高度。先寻找一个替代方案。设置高度一定会导致更复杂的情况。

23.接下来介绍的两个是很有用的属性：min-height和max-height。你可以用这两个属性指定最小或最大值，而不是明确定义高度，这样元素就可以在这些界限内自动决定高度。

 24. 使用内边距让内容垂直居中

不管容器里的内容显示为行内、块级或者其他形式，这种方法都有效，但有时我们想给容器设置固定高度，或者无法使用内边距，因为想让容器内另一个子元素靠近容器的顶部或者底部。

25. 可以用一个自然高度的容器吗？给容器加上相等的上下内边距让内容居中。

❑ 容器需要指定高度或者避免使用内边距吗？对容器使用display: table-cell和vertical-align:middle。

❑ 可以用Flexbox吗？ 如果不需要支持IE9，可以用Flexbox居中内容。

❑ 容器里面的内容只有一行文字吗？设置一个大的行高，让它等于理想的容器高度。这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素，可以设置为inline-block。

❑ 容器和内容的高度都知道吗？将内容绝对定位。参见第7章。（只有当前面提到的方法都无效时才推荐这种方式。）

❑ 不知道内部元素的高度？用绝对定位结合变形（transform）。参见第15章的例子。（还是只有当前面提到的方法都无效时才推荐该方法。）

26.不同于内边距和边框宽度，外边距可以设置为负值。负外边距有一些特殊用途，比如让元素重叠或者拉伸到比容器还宽。

如果设置左边或顶部的负外边距，元素就会相应地向左或向上移动，导致元素与它前面的元素重叠，如果设置右边或者底部的负外边距，并不会移动元素，而是将它后面的元素拉过来。给元素底部加上负外边距并不等同于给它下面的元素顶部加上负外边距。

27. 如果不给一个块级元素指定宽度，它会自然地填充容器的宽度。但如果在右边加上负外边距，则会把它拉出容器。如果在左边再加上相等的负外边距，元素的两边都会扩展到容器外面。

警告如果元素被别的元素遮挡，利用负外边距让元素重叠的做法可能导致元素不可点击

28.弹性子元素的外边距不会折叠，而这一块刚好用了Flexbox布局。内边距也能解决这个问题。给头部添加上下内边距，外边距就不会在容器外部折叠。

如下方法可以防止外边距折叠。

❑ 对容器使用overflow: auto（或者非visible的值），防止内部元素的外边距跟容器外部的外边距折叠。这种方式副作用最小。

❑ 在两个外边距之间加上边框或者内边距，防止它们折叠。

❑ 如果容器为浮动元素、内联块、绝对定位或固定定位时，外边距不会在它外面折叠。

❑ 当使用Flexbox布局时，弹性布局内的元素之间不会发生外边距折叠。网格布局（参见第6章）同理。

❑ 当元素显示为table-cell时不具备外边距属性，因此它们不会折叠。此外还有table-row和大部分其他表格显示类型，但不包括table、table-inline、table-caption。

29.猫头鹰选择器：通用的方式，不管网页结构如何变化都能够生效。这就是Heydon Pickering所说的迟钝的猫头鹰选择器（lobotomized owl selector）（以下简称猫头鹰选择器），因为它长这样：＊ +＊。

猫头鹰选择器的顶部外边距对侧边栏有个副作用。因为侧边栏是主列的相邻兄弟元素，所以它也会有顶部外边距。因此要将其恢复为0，还需要给主列补上内边距。

30.Flexbox正在迅速取代浮动在页面布局中的地位。对新手开发人员而言，Flexbox的行为很直观，可预测性更好。你可能会问是否还有必要学习浮动，CSS浮动的时代是不是结束了？在现代浏览器中，不用浮动也能比过去更好地实现布局，甚至可以完全弃用浮动。但是如果要支持IE浏览器，现在放弃浮动还为时过早。只有IE10和IE11支持Flexbox，而且还有一些bug。如果不想碰到bug，或者需要支持旧版浏览器，浮动也许是更好的选择。另外，如果你在支持旧代码库，它很可能用到了浮动布局。为了维护旧代码，也需要了解浮动的工作原理。还有一点，浮动布局通常不需要那么多的标记，新的布局方法则需要添加额外的容器元素。如果你写样式时不允许修改标记，浮动更能满足你的需求。此外，要实现将图片移动到网页一侧，并且让文字围绕图片的效果，浮动仍然是唯一的方法。

31.通过将内容放置到两个嵌套的容器中，然后给内层的容器设置外边距，让它在外层容器中居中（如图4-5所示）。Web开发人员Brad Westfall把这种布局方式叫作双容器模式（double container pattern）。

32.请注意，要给包含浮动的元素清除浮动，而不是给别的元素，比如浮动元素本身，或包含浮动的元素后面的兄弟元素。

 33.清除浮动和display: table在清除浮动时使用display: table能够包含外边距，是因为利用了CSS的一些特性。创建一个display: table元素（或者是本例的伪元素），也就在元素内隐式创建了一个表格行和一个单元格。因为外边距无法通过单元格元素折叠（参见第3章），所以也无法通过设置了display: table的伪元素折叠。看起来似乎使用display: table-cell也能达到相同的效果，但是clear属性只能对块级元素生效。表格是块级元素，但是单元格并不是。因此，clear属性无法跟display:table-cell一起使用。所以要用display: table来清除浮动，同时利用隐式创建单元格来包含外边距。

34.修改清除浮动的代码，让其包含所有的外边距

 这个版本使用display: table而不是display:block。给：:before和：:after伪元素都加上这一属性，所有子元素的外边距都会包含在容器的顶部和底部之间。（当我们不想要外边距折叠时，这个版本的清除浮动非常有用。）

35.BFC：块级格式化上下文

BFC是网页的一块区域，元素基于这块区域布局。虽然BFC本身是环绕文档流的一部分，但它将内部的内容与外部的上下文隔离开。

下面是对比效果（左原图，右BFC：文字就不会跟浮动图片重叠）

 

 BFC里的内容不会跟外部的元素重叠或者相互影响。如果给元素增加clear属性，它只会清除自身所在BFC内的浮动。如果强制给一个元素生成一个新的BFC，它不会跟其他BFC重叠。

使用overflow: auto通常是创建BFC最简单的一种方式。

下面上一些实际的例子
 

1）盒模型

<!doctype html>
<head>
  <style>
    :root {
      box-sizing: border-box;
    }

    *,
    ::before,
    ::after {
      box-sizing: inherit;
    }

    body {
      background-color: #eee;
      font-family: Helvetica, Arial, sans-serif;
    }

    body * + * {
      margin-top: 1.5em;
    }

    header {
      padding: 1em 1.5em;
      color: #fff;
      background-color: #0072b0;
      border-radius: .5em;
    }

    .container {
      display: flex;
    }

    .main {
      width: 70%;
      padding: 1em 1.5em;
      background-color: #fff;
      border-radius: .5em;
    }

    .sidebar {
      width: 30%;
      padding: 1.5em;
      margin-top: 0;
      margin-left: 1.5em;
      background-color: #fff;
      border-radius: .5em;
    }

    .button-link {
      display: block;
      padding: .5em;
      color: #fff;
      background-color: #0090C9;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
    }

    .sponsor-link {
      display: block;
      color: #0072b0;
      font-weight: bold;
      text-decoration: none;
    }

  </style>
</head>

<body>
  <header>
    <h1>Franklin Running Club</h1>
  </header>
  <div class="container">
    <main class="main">
      <h2>Come join us!</h2>
      <p>
        The Franklin Running club meets at 6:00pm every Thursday
        at the town square. Runs are three to five miles, at your
        own pace.
      </p>
    </main>
    <aside class="sidebar">
      <a href="/twitter" class="button-link">
        follow us on Twitter
      </a>
      <a href="/facebook" class="button-link">
        like us on Facebook
      </a>
      <a href="/sponsors" class="sponsor-link">
        become a sponsor
      </a>
    </aside>
  </div>
</body>

 2）浮动

 

<!doctype html>
<head>
  <style>
    :root {
      box-sizing: border-box;
    }

    *,
    ::before,
    ::after {
      box-sizing: inherit;
    }

    body {
      background-color: #eee;
      font-family: Helvetica, Arial, sans-serif;
    }

    body * + * {
      margin-top: 1.5em;
    }

    .row {
      margin-left: -0.75em;
      margin-right: -0.75em;
    }

    .row::after {
      content: " ";
      display: block;
      clear: both;
    }

    [class*="column-"] {
      float: left;
      padding: 0 0.75em;
      margin-top: 0;
    }

    .column-1 { width: 8.3333%; }
    .column-2 { width: 16.6667%; }
    .column-3 { width: 25%; }
    .column-4 { width: 33.3333%; }
    .column-5 { width: 41.6667%; }
    .column-6 { width: 50%; }
    .column-7 { width: 58.3333%; }
    .column-8 { width: 66.6667%; }
    .column-9 { width: 75%; }
    .column-10 { width: 83.3333%; }
    .column-11 { width: 91.6667% }
    .column-12 { width: 100%; }

    header {
      padding: 1em 1.5em;
      color: #fff;
      background-color: #0072b0;
      border-radius: .5em;
      margin-bottom: 1.5em;
    }

    .main {
      padding: 0 1.5em 1.5em;
      background-color: #fff;
      border-radius: .5em;
    }

    .container {
      max-width: 1080px;
      margin: 0 auto;
    }

    .media {
      padding: 1.5em;
      background-color: #eee;
      border-radius: 0.5em;
    }

    .media-image {
      float: left;
      margin-right: 1.5em;
    }

    .media-body {
      overflow: auto;
      margin-top: 0;
    }

    .media-body h4 {
      margin-top: 0;
    }

    .clearfix::before,
    .clearfix::after {
      display: table;
      content: " ";
    }
    .clearfix::after {
      clear: both;
    }
  </style>
</head>

<body>
  <div class="container">
    <header>
      <h1>Franklin Running Club</h1>
    </header>

    <main class="main clearfix">
      <h2>Running tips</h2>

      <div class="row">
        <div class="column-6">
          <div class="media">
            <img class="media-image" src="runner.png" width="80">
            <div class="media-body">
              <h4>Strength</h4>
              <p>
                Strength training is an important part of
                injury prevention. Focus on your core&mdash;
                especially your abs and glutes.
              </p>
            </div>
          </div>
        </div>

        <div class="column-6">
          <div class="media">
            <img class="media-image" src="shoes.png" width="80">
            <div class="media-body">
              <h4>Cadence</h4>
              <p>
                Check your stride turnover. The most efficient
                runners take about 180 steps per minute.
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="column-6">
          <div class="media">
            <img class="media-image" src="shoes.png" width="80">
            <div class="media-body">
              <h4>Change it up</h4>
              <p>
                Don't run the same every time you hit the
                road. Vary your pace, and vary the distance
                of your runs.
              </p>
            </div>
          </div>
        </div>

        <div class="column-6">
          <div class="media">
            <img class="media-image" src="runner.png" width="80">
            <div class="media-body">
              <h4>Focus on form</h4>
              <p>
                Run tall but relaxed. Your feet should hit
                the ground beneath your hips, not out in
                front of you.
              </p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>

3）flexbox

 

<!doctype html>
<head>
  <style>
    :root {
      box-sizing: border-box;
    }

    *,
    ::before,
    ::after {
      box-sizing: inherit;
    }

    body {
      background-color: #709b90;
      font-family: Helvetica, Arial, sans-serif;
    }

    body * + * {
      margin-top: 1.5em;
    }

    .container {
      max-width: 1080px;
      margin: 0 auto;
    }

    .site-nav {
      display: flex;
      padding: .5em;
      background-color: #5f4b44;
      list-style-type: none;
      border-radius: .2em;
    }

    .site-nav > li {
      margin-top: 0;
    }

    .site-nav > li > a {
      display: block;
      padding: .5em 1em;
      background-color: #cc6b5a;
      color: white;
      text-decoration: none;
    }

    .site-nav > li + li {
      margin-left: 1.5em;
    }

    .site-nav > .nav-right {
      margin-left: auto;
    }

    .tile {
      padding: 1.5em;
      background-color: #fff;
    }

    .flex {
      display: flex;
    }

    .flex > * + * {
      margin-top: 0;
      margin-left: 1.5em;
    }

    .column-main {
      flex: 2;
    }

    .column-sidebar {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .column-sidebar > .tile {
      flex: 1;
    }

    .login-form h3 {
      margin: 0;
      font-size: .9em;
      font-weight: bold;
      text-align: right;
      text-transform: uppercase;
    }

    .login-form input:not([type=checkbox]):not([type=radio]) {
      display: block;
      margin-top: 0;
      width: 100%;
    }

    .login-form button {
      margin-top: 1em;
      border: 1px solid #cc6b5a;
      background-color: white;
      padding: .5em 1em;
      cursor: pointer;
    }

    .centered {
      text-align: center;
    }

    .cost {
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: .7;
    }

    .cost > span {
      margin-top: 0;
    }

    .cost-currency {
      font-size: 2rem;
    }
    .cost-dollars {
      font-size: 4rem;
    }
    .cost-cents {
      font-size: 1.5rem;
      align-self: flex-start;
    }

    .cta-button {
      display: block;
      background-color: #cc6b5a;
      color: white;
      padding: .5em 1em;
      text-decoration: none;
    }

  </style>
</head>

<body>
  <div class="container">
    <header>
      <h1>Ink</h1>
    </header>
    <nav>
      <ul class="site-nav">
        <li><a href="/">Home</a></li>
        <li><a href="/features">Features</a></li>
        <li><a href="/pricing">Pricing</a></li>
        <li><a href="/support">Support</a></li>
        <li class="nav-right">
          <a href="/about">About</a>
        </li>
      </ul>
    </nav>
    <main class="flex">
      <div class="column-main tile">
        <h1>Team collaboration done right</h1>
        <p>Thousands of teams from all over the
          world turn to <b>Ink</b> to communicate
          and get things done.</p>
      </div>
      <div class="column-sidebar">
        <div class="tile">
          <form class="login-form">
            <h3>Login</h3>
            <p>
              <label for="username">Username</label>
              <input id="username" type="text"
                name="username"/>
            </p>
            <p>
              <label for="password">Password</label>
              <input id="password" type="password"
                name="password"/>
            </p>
            <button type="submit">Login</button>
          </form>
        </div>
        <div class="tile centered">
          <small>Starting at</small>
          <div class="cost">
            <span class="cost-currency">$</span>
            <span class="cost-dollars">20</span>
            <span class="cost-cents">.00</span>
          </div>
          <a class="cta-button" href="/pricing">
            Sign up
          </a>
        </div>
      </div>
    </main>
  </div>
</body>

4）网格布局

<!doctype html>
<head>
  <style>
    :root {
      box-sizing: border-box;
    }

    *,
    ::before,
    ::after {
      box-sizing: inherit;
    }

    body {
      background-color: #709b90;
      font-family: Helvetica, Arial, sans-serif;
    }

    .portfolio > figure {
      display: inline-block;
      max-width: 300px;
      margin: 0;
    }

    .portfolio img {
      max-width: 100%;
      object-fit: cover;
    }

    .portfolio figcaption {
      padding: 0.3em 0.8em;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      text-align: right;
    }

    @supports (display: grid) {
      .portfolio {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        grid-auto-rows: 1fr;
        grid-gap: 1em;
        grid-auto-flow: dense;
      }

      .portfolio > figure {
        display: flex;
        flex-direction: column;
        max-width: initial;
      }

      .portfolio img {
        flex: 1;
      }

      .portfolio .featured {
        grid-row: span 2;
        grid-column: span 2;
      }
    }

  </style>
</head>

<body>
  <div class="portfolio">
    <figure class="featured">
      <img src="images/monkey.jpg" alt="monkey" />
      <figcaption>Monkey</figcaption>
    </figure>
    <figure>
      <img src="images/eagle.jpg" alt="eagle" />
      <figcaption>Eagle</figcaption>
    </figure>
    <figure class="featured">
      <img src="images/bird.jpg" alt="bird" />
      <figcaption>Bird</figcaption>
    </figure>
    <figure>
      <img src="images/bear.jpg" alt="bear" />
      <figcaption>Bear</figcaption>
    </figure>
    <figure class="featured">
      <img src="images/swan.jpg" alt="swan" />
      <figcaption>Swan</figcaption>
    </figure>
    <figure>
      <img src="images/elephants.jpg" alt="elephants" />
      <figcaption>Elephants</figcaption>
    </figure>
    <figure>
      <img src="images/owl.jpg" alt="owl" />
      <figcaption>Owl</figcaption>
    </figure>
  </div>
</body>

5）定位和层叠上下文

 

<!doctype html>
<head>
  <style>
    body {
      font-family: Helvetica, Arial, sans-serif;
      min-height: 200vh;
      margin: 0;
    }

    button {
      padding: .5em .7em;
      border: 1px solid #8d8d8d;
      background-color: white;
      font-size: 1em;
    }

    .top-banner {
      padding: 1em 0;
      background-color: #ffd698;
    }

    .top-banner-inner {
      width: 80%;
      max-width: 1000px;
      margin: 0 auto;
    }

    .modal {
      display: none;
    }

    .modal-backdrop {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1;
    }

    .modal-body {
      position: fixed;
      top: 3em;
      bottom: 3em;
      right: 20%;
      left: 20%;
      padding: 2em 3em;
      background-color: white;
      overflow: auto;
      z-index: 2;
    }

    .modal-close {
      position: absolute;
      top: 0;
      right: 0;
      padding: 0.3em;
      font-size: 2em;
      height: 1.5em;
      width: 1.5em;
      cursor: pointer;
      border: 0;
    }
    .modal-close::before {
      display: block;
      content: '\00D7';
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
    }

    .container {
      display: flex;
      width: 80%;
      max-width: 1000px;
      margin: 1em auto;
      min-height: 100vh;
    }

    .dropdown {
      display: inline-block;
      position: relative;
    }

    .dropdown-label {
      padding: 0.5em 2em 0.5em 1.5em;
      border: 1px solid #ccc;
      background-color: #eee;
    }

    .dropdown-label::after {
      content: "";
      position: absolute;
      right: 1em;
      top: 1em;
      border: 0.3em solid;
      border-color: black transparent transparent;
    }
    .dropdown:hover .dropdown-label::after {
      top: 0.7em;
      border-color: transparent transparent black;
    }

    .dropdown-menu {
      display: none;
      position: absolute;
      left: 0;
      top: 2.1em;
      min-width: 100%;
      background-color: #eee;
    }
    .dropdown:hover .dropdown-menu {
      display: block;
    }

    .submenu {
      padding-left: 0;
      margin: 0;
      list-style-type: none;
      border: 1px solid #999;
    }

    .submenu > li + li {
      border-top: 1px solid #999;
    }

    .submenu > li > a {
      display: block;
      padding: .5em 1.5em;
      background-color: #eee;
      color: #369;
      text-decoration: none;
    }

    .submenu > li > a:hover {
      background-color: #fff;
    }

    .col-main {
      flex: 1 80%;
    }

    .col-sidebar {
      flex: 20%;
    }

    .affix {
      position: sticky;
      top: 1em;
    }

  </style>
</head>

<body>
  <header class="top-banner">
    <div class="top-banner-inner">
      <p>Find out what's going on at Wombat Coffee each
        month. Sign up for our newsletter:
        <button id="open">Sign up</button>
      </p>
    </div>
  </header>
  <div class="modal" id="modal">
    <div class="modal-backdrop"></div>
    <div class="modal-body">
      <button class="modal-close" id="close">
        <span class="sr-only">close</span>
      </button>
      <h2>Wombat Newsletter</h2>
      <p>Sign up for our monthly newsletter. No spam.
         We promise!</p>
      <form>
        <p>
          <label for="email">Email address:</label>
          <input type="text" name="email"/>
        </p>
        <p><button type="submit">Submit</button></p>
      </form>
    </div>
  </div>

<div class="container">
  <main class="col-main">
    <nav>
      <div class="dropdown">
        <div class="dropdown-label">Main Menu</div>
        <div class="dropdown-menu">
          <ul class="submenu">
            <li><a href="/">Home</a></li>
            <li><a href="/coffees">Coffees</a></li>
            <li><a href="/brewers">Brewers</a></li>
            <li><a href="/specials">Specials</a></li>
            <li><a href="/about">About us</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <h1>Wombat Coffee Roasters</h1>
  </main>

  <aside class="col-sidebar">
    <div class="affix">
      <ul class="submenu">
        <li><a href="/">Home</a></li>
        <li><a href="/coffees">Coffees</a></li>
        <li><a href="/brewers">Brewers</a></li>
        <li><a href="/specials">Specials</a></li>
        <li><a href="/about">About us</a></li>
      </ul>
    </div>
  </aside>
</div>

  <script type="text/javascript">
  var button = document.getElementById('open');
var close = document.getElementById('close');
var modal = document.getElementById('modal');

button.addEventListener('click', function(event) {
  event.preventDefault();
  modal.style.display = 'block';
});

close.addEventListener('click', function(event) {
  event.preventDefault();
  modal.style.display = 'none';
});
</script>
</body>

6）响应式设计

 

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wombat Coffee Roasters</title>
<style>
  :root {
    box-sizing: border-box;
    font-size: calc(1vw + 0.6em);
  }

  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }

  body {
    margin: 0;
    font-family: Helvetica, Arial, sans-serif;
  }

  /*
   * Links
   */
  a:link {
    color: #1476b8;
    font-weight: bold;
    text-decoration: none;
  }
  a:visited {
    color: #1430b8;
  }
  a:hover {
    text-decoration: underline;
  }
  a:active {
    color: #b81414;
  }

  /*
   * Header section
   */
  .page-header {
    padding: 0.4em 1em;
    background-color: #fff;
  }

  @media (min-width: 35em) {
    .page-header {
      padding: 1em;
    }
  }

  .title > h1 {
    color: #333;
    text-transform: uppercase;
    font-size: 1.5rem;
    margin: .2em 0;
  }

  @media (min-width: 35em) {
    .title > h1 {
      font-size: 2.25rem;
    }
  }

  .slogan {
    color: #888;
    font-size: 0.875em;
    margin: 0;
  }

  /*
   * Hero image
   */
  .hero {
    padding: 2em 1em;
    text-align: center;
    background-image: url(coffee-beans.jpg);
    background-size: 100%;
    color: #fff;
    text-shadow: 0.1em 0.1em 0.3em #000;
  }

  @media (min-width: 35em) {
    .hero {
      padding: 5em 3em;
      font-size: 1.2rem;
    }
  }

  /*
   * Main section
   */
   main {
     padding: 1em;
   }

  @media (min-width: 35em) {
    main {
      padding: 2em 1em;
    }
  }

  .subtitle {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    font-size: 0.875rem;
    text-transform: uppercase;
  }

  /*
   * Menu
   */
  .menu {
    position: relative;
  }

  .menu-toggle {
    position: absolute;
    top: -1.2em;
    right: 0.1em;
    border: 0;
    background-color: transparent;
    font-size: 3em;
    width: 1em;
    height: 1em;
    line-height: 0.4;
    text-indent: 5em;
    white-space: nowrap;
    overflow: hidden;
  }
  .menu-toggle::after {
    position: absolute;
    top: 0.2em;
    left: 0.2em;
    display: block;
    content: "\2261";
    text-indent: 0;
  }

  .menu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    left: 0;
    margin: 0;
  }

  .menu.is-open .menu-dropdown {
    display: block;
  }

  .nav-menu {
    margin: 0;
    padding-left: 0;
    border: 1px solid #ccc;
    list-style: none;
    background-color: #000;
    color: #fff;
  }

  .nav-menu > li + li {
    border-top: 1px solid #ccc;
  }

  .nav-menu > li > a {
    display: block;
    padding: 0.8em 1em;
    color: #fff;
    font-weight: normal;
  }

</style>
</head>

<body>

<header id="header" class="page-header">
  <div class="title">
    <h1>Wombat Coffee Roasters</h1>
    <div class="slogan">We love coffee</div>
  </div>
</header>

<nav class="menu" id="main-menu">
  <button class="menu-toggle" id="toggle-menu">
    toggle menu
  </button>
  <div class="menu-dropdown">
    <ul class="nav-menu">
      <li><a href="/about.html">About</a></li>
      <li><a href="/shop.html">Shop</a></li>
      <li><a href="/menu.html">Menu</a></li>
      <li><a href="/brew.html">Brew</a></li>
    </ul>
  </div>
</nav>

<aside id="hero" class="hero">
  Welcome to Wombat Coffee Roasters! We are
  passionate about our craft, striving to bring you
  the best hand-crafted coffee in the city.
</aside>

<main id="main">
  <div class="row">
    <section class="column">
      <h2 class="subtitle">Single-origin</h2>
      <p>We have built partnerships with small farms
        around the world to hand-select beans at the
        peak of season. We then carefully roast in
        <a href="/batch-size.html">small batches</a>
        to maximize their potential.</p>
    </section>
    <section class="column">
      <h2 class="subtitle">Blends</h2>
      <p>Our tasters have put together a selection of
        carefully balanced blends. Our famous
        <a href="/house-blend.html">house blend</a>
        is available year round.</p>
    </section>
    <section class="column">
      <h2 class="subtitle">Brewing Equipment</h2>
      <p>We offer our favorite kettles, French
        presses, and pour-over cones. Come to one of
        our <a href="/classes.html">brewing
        classes</a> to learn how to brew the perfect
        pour-over cup.</p>
    </section>
  </div>
</main>

<script type="text/javascript">
(function() {
  var menuButton = document.getElementById('toggle-menu');
  menuButton.addEventListener('click', function(event) {
    event.preventDefault();
    var menu = document.getElementById('main-menu');
    menu.classList.toggle('is-open');
  });
})();
</script>

</body>
</html>

7）动画

 

<!doctype html>
<html lang="en">
  <head>
    <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One|Raleway" rel="stylesheet">
    <style type="text/css">

      html {
        box-sizing: border-box;
      }
      *,
      *::before,
      *::after {
        box-sizing: inherit;
      }

      body {
        background-color: hsl(200, 80%, 30%);
        background-image: radial-gradient(hsl(200, 80%, 30%), hsl(210, 80%, 20%));
        color: white;
        font-family: Raleway, Helvetica, Arial, sans-serif;
        line-height: 1.4;
        margin: 0;
        min-height: 100vh;
      }

      h1, h2, h3 {
        font-family: Alfa Slab One, serif;
        font-weight: 400;
      }

      main {
        display: block;
      }

      img {
        max-width: 100%;
      }

      .page-header {
        margin: 0;
        padding: 1rem;
      }

      @media (min-width: 30em) {
        .page-header {
          padding: 2rem 2rem 3rem;
        }
      }

      @media (min-width: 30em) {
        .main-nav {
          position: fixed;
          left: 0;
          top: 8.25rem;
          z-index: 10;
          background-color: transparent;
          transition: background-color .5s linear;
          border-top-right-radius: 0.5em;
          border-bottom-right-radius: 0.5em;
        }

        .main-nav:hover {
          background-color: rgba(0, 0, 0, 0.6);
        }
      }

      .nav-links {
        display: flex;
        margin-top: 0;
        margin-bottom: 1rem;
        padding: 0 1rem;
        list-style: none;
        justify-content: space-between;
      }
      .nav-links > li + li {
        margin-left: 0.8em;
      }
      .nav-links > li > a {
        display: block;
        padding: 0.8em 0;
        color: white;
        font-size: 0.8rem;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      .nav-links__icon {
        height: 1.5em;
        width: 1.5em;
        vertical-align: -0.2em;
      }
      .nav-links > li > a:hover {
        color: hsl(40, 100%, 70%);
      }
      @media (min-width: 30em) {
        .nav-links {
          display: block;
          padding: 1em;
          margin-bottom: 0;
        }
        .nav-links > li + li {
          margin-left: 0;
        }

        .nav-links__label {
          display: inline-block;
          margin-left: 1em;
          padding-right: 1em;
          opacity: 0;
          transform: translate(-1em);
          transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3),
                      opacity 0.4s linear;
        }
        .nav-links:hover .nav-links__label,
        .nav-links a:focus > .nav-links__label {
          opacity: 1;
          transform: translate(0);
        }
        .nav-links > li:nth-child(2) .nav-links__label {
          transition-delay: 0.1s;
        }
        .nav-links > li:nth-child(3) .nav-links__label {
          transition-delay: 0.2s;
        }
        .nav-links > li:nth-child(4) .nav-links__label {
          transition-delay: 0.3s;
        }
        .nav-links > li:nth-child(5) .nav-links__label {
          transition-delay: 0.4s;
        }

        .nav-links__icon {
          transition: transform 0.2s ease-out;
        }

        .nav-links a:hover > .nav-links__icon,
        .nav-links a:focus > .nav-links__icon {
          transform: scale(1.3);
        }
      }

      .flyin-grid {
        margin: 0 1rem;
        perspective: 500px;
      }

      .flyin-grid__item {
        animation: fly-in 600ms ease-in;
        animation-fill-mode: backwards;
      }

      .flyin-grid__item:nth-child(2) {
        animation-delay: 0.15s;
      }
      .flyin-grid__item:nth-child(3) {
        animation-delay: 0.3s;
      }
      .flyin-grid__item:nth-child(4) {
        animation-delay: 0.45s;
      }

      @media (min-width: 30em) {
        .flyin-grid {
          display: flex;
          flex-wrap: wrap;
          margin: 0 5rem;
        }

        .flyin-grid__item {
          flex: 1 1 300px;
          margin-left: 0.5em;
          margin-right: 0.5em;
          max-width: 600px;
        }

        @supports (display: grid) {
          .flyin-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            grid-gap: 2em;
          }

          .flyin-grid__item {
            max-width: initial;
            margin: 0;
          }
        }
      }

      .card {
        margin-bottom: 1em;
        padding: 0.5em;
        background-color: white;
        color: hsl(210, 15%, 20%);
        box-shadow: 0.2em 0.5em 1em rgba(0, 0, 0, 0.3);
      }
      .card > img {
        width: 100%;
      }

      @keyframes fly-in {
        0% {
          transform: translateZ(-800px) rotateY(90deg);
          opacity: 0;
        }
        56% {
          transform: translateZ(-160px) rotateY(87deg);
          opacity: 1;
        }
        100% {
          transform: translateZ(0) rotateY(0);
        }
      }

    </style>
  </head>
  <body>
    <header>
      <h1 class="page-header">The Yolk Factory</h1>
    </header>
    <nav class="main-nav">
      <ul class="nav-links">
        <li>
          <a href="/">
            <img src="images/home.svg" class="nav-links__icon"/>
            <span class="nav-links__label">Home</span>
          </a>
        </li>
        <li>
          <a href="/events">
            <img src="images/calendar.svg" class="nav-links__icon"/>
            <span class="nav-links__label">Events</span>
          </a>
        </li>
        <li>
          <a href="/members">
            <img src="images/members.svg" class="nav-links__icon"/>
            <span class="nav-links__label">Members</span>
          </a>
        </li>
        <li>
          <a href="/about">
            <img src="images/star.svg" class="nav-links__icon"/>
            <span class="nav-links__label">About</span>
          </a>
        </li>
      </ul>
    </nav>

    <main class="flyin-grid">
      <div class="flyin-grid__item card">
        <img src="images/chicken1.jpg" alt="a chicken"/>
        <h4>Mrs. Featherstone</h4>
        <p>
          She may be a bit frumpy, but Mrs Featherstone gets
          the job done. She lays her largish cream-colored
          eggs on a daily basis. She is gregarious to a fault.
        </p>
        <p>This Austra White is our most prolific producer.</p>
      </div>
      <div class="flyin-grid__item card">
        <img src="images/chicken2.jpg" alt="a chicken"/>
        <h4>Hen Solo</h4>
        <p>
          Though the most recent addition to our flock, Hen
          Solo is a fast favorite among our laying brood. She
          is a sassy and suspicious hen; we frequently have to
          follow her to find where she has hidden her loot from
          the other hens.
        </p>
        <p>This Snowy Easter Egger lays in delicate shades of
          blue and green. A full dozen of her eggs costs an
          additional $2.</p>
      </div>
      <div class="flyin-grid__item card">
        <img src="images/chicken3.jpg" alt="a chicken"/>
        <h4>Cluck Norris</h4>
        <p>
          Every brood has its brawler. Cluck Norris is our
          feistiest hen, frequently picking fights with other
          hens about laying territory and foraging space. Her
          sister hens continue to hope that she will follow the
          steps of her namesake (eventually) and focus the her
          strength of will for good.
        </p>
        <p>This Buff Chantecler is as robust and hardy as her
          Canadian forebears, laying through the coldest parts
          of the winter.</p>
      </div>
      <div class="flyin-grid__item card">
        <img src="images/chicken4.jpg" alt="a chicken"/>
        <h4>Peggy Schuyler</h4>
        <p>
          Peggy was our first and friendliest hen. She is the
          most likely to greet visitors to the yard, and
          frequently to be found nesting in the coop. Though
          not a prolific layer, her output is consistent and
          regular. You will regularly find her eggs among your
          dozen.
        </p>
        <p>This Lavender Orpington lays light brown eggs.</p>
      </div>
    </main>
  </body>
</html>