搜索 [ 或者 延伸 获得拓展链接

CSS in Depth 的笔记

第 0 章 html

语义化标签

语义化标签有利于 seo 帮助更好阅读网页代码 可以不加但是加了更好 而且很重要

- header 
- nav
- article
- section
- figure 和 figcaption
- form
- label
- footer
- main
- aside

伪元素

::before

::after

这俩是针对选到的那个东西来说之前之后 可以拿来加图标什么的 或者清除浮动

display

display 属性是 CSS 中最重要的属性之一，用于设置一个元素的显示类型。它决定了元素的布局方式以及它如何影响其子元素和周围的元素。以下是 display 属性的主要值及其区别：

1. display: block

• 行为：块级元素，占据一行的全部宽度。
• 典型元素：<div>, <p>, <h1> 等。
• 特点：
  • 宽度默认填满父容器。
  • 可以设置宽度、高度、内边距、外边距。
  • 会换行，独占一行。

<div style="display: block;">This is a block element.</div>

2. display: inline

• 行为：内联元素，仅占据其内容的宽度。
• 典型元素：<span>, <a>, <em> 等。
• 特点：
  • 宽度和高度无法直接设置。
  • 内边距和外边距仅影响左右两侧，不影响上下。
  • 不会换行，多个内联元素会在同一行显示。

<span style="display: inline;">This is an inline element.</span>

3. display: inline-block

• 行为：内联块级元素，结合了 inline 和 block 的特性。
• 典型用途：用于需要内联布局但又需要设置宽度和高度的元素。
• 特点：
  • 可以设置宽度、高度、内边距、外边距。
  • 不会换行，可以在同一行内显示多个内联块级元素。
  • 宽度和高度由内容决定，可以通过 CSS 控制。

<span style="display: inline-block; width: 100px; height: 50px;">This is an inline-block element.</span>

4. display: flex

• 行为：使元素成为弹性容器，其子元素变为弹性项目。
• 典型用途：用于实现复杂的布局，特别是响应式设计。
• 特点：
  • 父元素使用 display: flex，子元素自动成为弹性项目。
  • 子元素的排列方式、对齐方式和大小可以灵活调整。
  • 提供强大的布局能力，如横向和纵向居中对齐、等分布局等。

<div style="display: flex; justify-content: center; align-items: center;">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
</div>

5. display: grid

• 行为：使元素成为网格容器，其子元素变为网格项目。
• 典型用途：用于实现二维布局，特别是需要行和列的精确控制的设计。
• 特点：
  • 父元素使用 display: grid，子元素自动成为网格项目。
  • 可以精确控制行和列的大小、位置和对齐方式。
  • 提供复杂的布局能力，如网格区域、行列间距等。

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
  <div>Grid item 1</div>
  <div>Grid item 2</div>
  <div>Grid item 3</div>
</div>

6. display: none

• 行为：隐藏元素及其子元素，不占据任何空间。
• 特点：
  • 元素被完全从文档流中移除，不占据空间。
  • 与 visibility: hidden 不同，visibility: hidden 仅隐藏元素，但仍占据空间。

<div style="display: none;">This element is hidden.</div>

7. 其他常见值

• display: inline-flex：内联弹性容器，其子元素为弹性项目，类似于 inline-block 和 flex 的结合。
• display: inline-grid：内联网格容器，其子元素为网格项目，类似于 inline-block 和 grid 的结合。
• display: table：使元素成为表格容器，类似于 HTML <table> 元素。
• display: table-row：使元素成为表格行，类似于 HTML <tr> 元素。
• display: table-cell：使元素成为表格单元格，类似于 HTML <td> 元素。

总结

• 块级元素（block）：占据一行的全部宽度，宽高可设置。
• 内联元素（inline）：占据内容宽度，宽高不可直接设置。
• 内联块级元素（inline-block）：占据内容宽度，宽高可设置，不换行。
• 弹性容器（flex）：用于创建复杂布局，特别是响应式设计。
• 网格容器（grid）：用于创建二维布局，行列精确控制。
• 隐藏元素（none）：完全隐藏元素及其子元素，不占据空间。

通过理解和应用这些 display 属性值，您可以灵活地设计和调整网页布局，满足不同的设计需求。

第一部分 基础

第一章 层叠优先级和继承

第一章到第三章是基础回顾

零碎 层叠

css里面默认margin 和 padding有值 为了左对齐之类的可以设置padding-left之类的为0

flex布局会盖掉inline-block 导致它们不会自动空开行间块级的距离

用户代理样式

link LoVe、HAte 顺序口诀 visited active

继承

文本字体 list列表属性等会继承

被覆盖的值会被划掉 顶部覆盖底部

特殊值：inherit initial-默认值

inherit 是继承父元素

不要混淆initial和auto

简写会默默把没提到的默认值覆盖掉前面的继承属性等

笛卡尔网格先左右再上下 比如background-position

第二章 相对单位

为什么相对

后期绑定，不知道窗口大小

响应式设计！

绝对常用px

1in=2.54cm=96px

相对于什么？

字号

根据相对计算出绝对值

em rem

1em等于当前元素的字号

字号变量em代表的值会变的

那字号自己呢

fontsize 1.2em怎么办呢

根据继承的字号决定

综上即使声明的em相同 也有可能有不同计算值

字号嵌套的时候会缩小、扩大

选中子元素 嵌套用1em可以保持

rem

rem永远相对于root根部所以是稳定的

始终使用相对单位设置字号 帮助更多人

rem设置字号 px设置边框 em设置其他

网页默认值是16px root

响应式面板

@media(mid-width: 800px){}

放大 缩小组件：

设置父元素字体大小以后覆盖它

视口的相对单位

媒体查询@media

视口：浏览器不含不纯粹的东西 下面那个框里的 vh vw vmin vmax

vh 表示百分之多少的视口高度 vw 则是宽度

把 div 长宽定成 vmin 可以固定显示 xx 大小比例的形状

vw 可以定义字号

rem和视口等是css3（2011） css现在是一个活的标准

使用 calc定义字号

cal (+-x/ 必须两边空白)

font-size:calc(0.5em + 1vw);

行高

行高一般不带单位 不然继承的时候出问题 因为带单位继承计算值

给 body 声明无单位行高 然后别的微调

自定义属性 css 变量

:root{
--main-font: Arial;
}
// 声明变量
p{  
font-family: var(--main-font, sans-serif);

}
// 使用变量，但是如果var非法直接变默认值

: root 里定义 别的容器里重新赋值

js 可以改变 css 变量

关注 can I use 查看是否兼容能用

第三章 盒模型

为了实现元素布局有很多办法 各种布局方法比较复杂 应该先精通一种 文档流和盒模型是他们的基础 决定网页元素大小和位置

设置为块级元素可以填满容器的宽度

元素宽度问题

同时解决了宽度和高度实际上就解决了两列问题

这部分练习里面用到了浮动布局 float

%的宽度设置规定相对于那一行；盒模型里默认设置宽高只设置了内容，还要再加上边距和边框（content-box）

注意要避免像是26%之类的魔术数值来达成目的

可以使用calc() 比如由于padding多了3em那么calc(30% - 3em) 但是还有更好的办法哦

调整盒模型

==将 box-sizing 修改为 border-box== 此时宽高设置整个盒子包含上内边距和边框 这时候动 padding 会挤压 content 大小 不含外边距

常用做法：
~~~css
*,
::before,
::after {
  box-sizing: border-box;
}
~~~

如果使用了第三方组件，要在第三方组件配置里清除上面的设定
更稳健写法，主动将这一段加入每个要写的网站 然后我们就知道自己写的全是这种盒模型
~~~css
:root {
  box-sizing: border-box;

}

*,
::before,
::after {
  box-sizing: inherit;
}
.third-party-component {
  box-sizing: content-box; // 这样的话第三方里面的继承content-box

}
~~~

给列之间加上空隙

使用 calc 减去 em 单位的宽度换成 margin

.sidebar {
    box-sizing: border-box;
    float: left;
    width: calc(30% - 1.5em);
    /* 明确相对关系 这个宽度为什么要这么写 因为要做空隙 空隙从原来的30%里扣过来 */
    margin-left: 1.5em;
    padding: 1.5em;
    background-color: #fff;
    border-radius: .5em;
}

元素高度问题

避免限定一个具体的高度，因为文档流是根据有限宽度和无限高度设计的

控制溢出 overflow

auto hidden visible scroll

百分比高度

1. 视口 vh

2. 等高列

比如使用等高列对齐两个盒子 高度始终保持一致 并且让他们自己就决定高度

实现1 css 表格

.container {
  display: table;
  width: 100%; // table默认不填满所以手动设置

}

.main {
  display: table-cell;
  width: 70%;
  background-color: #fff;
  border-radius: .5em;

}

.sidebar {
  display: table-cell;
  width: 30%;
  margin-left: 1.5em; // tablecell下不生效*
  padding: 1.5em;
  background-color: #fff;
  border-radius: .5em;

}

border-spacing 可以定义单元格间距 但是同时对外边距也有效 所以新在外面套一层 div 用负外边距吸收抵消

.wapper{
  margin-left: -1.5em;
  margin-right: -1.5em;

}

.container {
  display: table;
  width: 100%; // table默认不填满所以手动设置
  border-spacing: 1.5em 0;

}

.main {
  display: table-cell;
  width: 70%;
  background-color: #fff;
  border-radius: .5em;

}

.sidebar {
  display: table-cell;
  width: 30%;

  padding: 1.5em;
  background-color: #fff;
  border-radius: .5em;

}

负外边距

负外边距左上和右下不一样

左上拉元素 右下把别的元素拉过来

不建议经常用

外边距折叠

头部和或者底部外边距 也就是上下

相邻或者不相邻，只要有重叠：上下两个元素外边距算出来有重叠的花不会两个一股脑显示 而是以较大的外边距为准折叠一个小的 只剩一个外边距 抽象

==也就是说可以给任何元素加上外边距==

此外，外边距有可能在容器外折叠 为了防止这种情况可以加内边距；更多方法

• 内边距或者边框
• overflow auto
• 布局 浮动元素 flex 等
• table-cell
  

  相邻元素边距问题

.button-link + .button-link {
  margin-top: 1.5em;

}

使用+选择器不选中开头的元素

但是一旦 html 内容有变动 css 要重写或者多写 不太现实

另一种方法：猫头鹰选择器* + *

长得确实有一点点像猫头鹰

选中父容器下的所有非第一个元素

body * + *{} 选中的就是 body 容器里 所有非首元素；层层传下去

猫头鹰选择器需要权衡，而且不适合半路加 要么一开始就加

实现2 flex 布局 我感觉比 table 好

flex 默认产生等高元素 也不需要外面套一层和负外边距

.container {
  display: flex;  // 变成弹性容器

}

.main {      // 里面的元素不用指定display或者float属性
  width: 70%;
  background-color: #fff;
  border-radius: 0.5em;

}

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

}

盒子的 min-height max-height 有时候有用 （撑开）

垂直居中

vertical-align 只会影响行内元素（比如文字和图片同行对齐）和 table cell 疑似有点鸡肋了

最简单的办法 容器上下内边距相等

how to center

![[Pasted image 20240602181036.png]]

第二部分 精通布局

第四章 理解浮动

第四章到第八章是精通布局

三种改变文档流的方式：

浮动 flex 网格布局

此外还有定位

什么是浮动

将一个元素拉到网页某一侧，使得文档流能够包围它

用匿名 div 进行分组

先把网页大块布局写好然后写小块

双容器模式：把两个 div 套起来 设置最大宽度 设置内层容器外边距 使得内容居中

容器折叠和清除浮动

让 container 里面元素浮起来以后 container 折起来了

怎么会事捏

浮动元素的高度不会加到父元素 所以撑不起来（这样本意是段落不会包住图片 浮在整个文本里）

清除浮动

伪元素——一种特殊的选择器，可以选中文档的特定部分。伪元素以双冒号(::) 开头，大部分浏览器为了向后兼容也支持单冒号的形式。最常见的伪元素 是::before 和::after，用来向元素的开始或者结束位置插入内容。

浮动元素外边距不会折叠 非浮动元素外边距会自然折叠

浮动元素会尽可能靠上 因此如果每个元素高度不一致结果会非常抽象

解决方法： 消除每行第一个上面的浮动 然后给每个元素加上外边距

注意 这种方式需要确定每行几个元素 所以会变的情况不合适

媒体对象布局和BFC

==用BFC 实现媒体对象布局==

媒体对象是一种布局 belike 图像在左文字在右

盒子会包围浮动的图片

为了实现媒体对象布局 需要BFC（block formatting context）

BFC 里的内容不与外部影响

创建 BFC 的方式

给元素添加以下的任意属性值都会创建 BFC：

• float: left 或 right，不为 none 即可。
• overflow: hidden、auto 或 scroll，不为 visible 即可。
• display: inline-block、table-cell、table-caption、flex、inline-flex、grid 或 inline-grid。拥有这些属性的元素称为块级容器（block container）。
• position: absolute 或 fixed。

说明：网页的根元素也创建了一个顶级的 BFC。

所以直接设置overflow 就有用

*如果有时块级元素过宽就会换行 The Media Object Saves Hundreds of Lines of Code

网格系统

为了提高复用性，可以使用网格系统

网格系统的介绍

一种比较普遍的做法是借助网格系统提高代码的可复用性。网格系统提供了一系列的类名，可添加到标签中，将网页的一部分构造成行和列。它应该只给容器设置宽度和定位，不给网页提供视觉样式，比如颜色和边框。需要在每个容器内部添加新的元素来实现想要的视觉样式。

大部分流行的 CSS 框架 包含了自己的网格系统。它们的实现细节各不相同，但是设计思路相同：在一个行容器里放置一个或多个列容器。列容器的类决定每列的宽度。接下来构建一个网格系统，这样你就能掌握它的工作原理，进而应用到网页中。

12 列网格

用网格系统重构浮动布局

网格通过去掉所有列的top-margin 实现顶端对齐 加左右内边距实现空白间隔 但是这会导致和行外元素的略微不对齐 这可以通过行元素的负内边距解决

这样就是==浮动网格系统==

第五章 Flexbox

弹性盒子布局

flexbox 的原则

更好解决垂直居中，等高列等问题，更准确直观 缺点是属性比较多

dispaly: flex; 创建为弹性容器 子元素变成弹性子元素 默认同一行从左到右排列

弹性容器会填满宽度 像block 但是弹性子元素可不一定 弹性子元素高度相等

弹性元素的间距等

css 起手式

:root{
    box-sizing: border-box;
}

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

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

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

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

浏览器前缀

.site-nav {
  display: -webkit-flex;
  display: flex;}

为了兼容

延伸：使用 Autoprefixer 来自动化

为了使得元素贡献的高度按照内边距而不是行高计算

需要把他们变成block 元素

相邻兄弟 * + * 加号意味着选中的元素前面必须有对象

在弹性盒子中，auto的margin会填充所有可用的空间
比如`margin-left: auto;`

创建菜单项的建议

如果你还不太熟悉构建这样的菜单（不管用 Flexbox 还是其他布局方式），那么请注意一下如何实现。在这个例子里，应当把菜单项内边距加到内部的 <a> 元素上，而不是 <li> 元素上。因为整个点击区域的外观和行为应当符合用户对一个菜单链接的预期，而对 <a> 元素，所以如果把 <li> 做成一个好看的大按钮，里面只有很小的区域（<a>）可以点击，就不符合用户预期。

弹性子元素大小

属性：flex

什么都不设置的话子元素宽度是自动适应 宽度可能有问题 可以用flex 属性调整

flex-grow: 2;
flex-shrink: 1;
flex-basis: 0%;

basis 相对于容器的百分比或者数值 基础宽度

grow 增长 使用余白 非 0 时填满容器宽度

flex 属性会自动给有用的数值 不是默认值

shrink 控制超过宽度时是否收缩

弹性方向

flex-direction

flexbox 应该能让左右两边高度相等 但是为什么有时候不起作用呢

因为有的盒子内部没有到那个高度 即使弹性盒子已经等高了

要让空出来的地方被元素撑满 弹性盒子可以套起来

表单样式

通常块级元素会自动占满整行，但是特殊情况要指定 width

对齐 间距 细节

这里的好像不是很常用

行高一般不带单位 不然继承的时候出问题 因为带单位继承计算值

创建弹性盒子的步骤

通常情况下，创建一个弹性盒子需要用到前面提及的这些方法：

• 选择一个容器及其子元素，给容器设置 display: flex
• 如有必要，给容器设置 flex-direction
• 给弹性子元素设置外边距和/或 flex 值，用来控制它们的大小

CTA call to action

没有值得写的内容

注意

只在必要的时候使用

Flexbugs 是的某些环境下会有 bug

flex 的容器大小是自动计算出来的

一行多列的设计可能渲染两次

全局设计建议网格 grid

第六章 网格布局 grid

首个真正的 css 布局系统 网格布局

浏览器实验特性->实验-应用 大多数浏览器支持网格布局

构建基础网格

构建 col 和 row fr 类似于 grow 也可以固定单位

gap 属性和书本不一样 垂直水平

网格区域可以被目标效果填充

设计不必填满每个单元格 在想留白的地方让单元格为空

网格布居中可以使用 flex

每个网格元素必须是网格容器 的子元素

*tips: 由外到内建构网页更简单

使用 repeat() 函数定义重复模式

用 repeat() 符号还可以定义不同的重复模式，例如 repeat(3, 2fr 1fr) 会重复三遍这个模式，从而定义六个网格轨道，重复的结果是 2fr 1fr 2fr 1fr 2fr 1fr。

子元素定位

网格线编号和元素定位

图 6-7 展示了网格线编号从左上角为 1 开始递增，负数则指向从右下角开始的位置。

可以在 grid-column 和 grid-row 属性中用网格线的编号指定网格元素的位置。如果想要一个网格元素在垂直方向上跨越 1 号网格线到 3 号网格线，就需要给元素设置 grid-column: 1 / 3。或者设置 grid-row: 3 / 5 让元素在水平方向上跨越 3 号网格线到 5 号网格线。这两个属性一起就能指定一个元素应该放置的网格区域。

这些属性实际上是简写属性：grid-column 是 grid-column-start 和 grid-column-end 的简写；grid-row 是 grid-row-start 和 grid-row-end 的简写。中间的斜线只在简写属性里用于区分两个值，斜线前后的空格不作要求。

span 会启动布局算法 自动分配放得下的第一个地方

与 flexbox 配合

flexbox本质是一维的 而grid本质是二维的

flex从内容切入 由内向外
gird网格从布局切入 由外向内

用网格给网页的主区域定位是因为我们希望内容能限制在它所在的网格内，但是对于网页上的其他元素，比如导航菜单，则允许内容对布局有更大的影响。也就是说，文字多的元素可以宽一些，文字少的元素则可以窄一些。同时这还是一个水平（一维）布局。因此，用 Flexbox 来处理。

site-nav {

    display: flex;

    background-color: #5f4b44;

    list-style-type: none;

    margin: 0;

    padding: 0.5em;

    border-radius: 0.2em;

}

.site-nav>li {

    margin-top: 0;

}

.site-nav>li>a {

    /* display block */

    display: block;

    color: white;

    text-decoration: none;

    background-color: #cc6b5a;

    padding: 0.5em 1em;

}

.site-nav>li+li {

    margin-left: 1.5em;

}

.site-nav .nav-right {

这里 flex 里面为什么先用父容器的 padding 这样更方便不用每个子元素 margin 去定上下 一下子全定好了

替代语法

• 命名的网格线
• 命名的网格区域

命名的网格线

grid-template-columns:[start] 2fr [center] 1fr [end]

[left-start] 2fr
[left-end right-start] 1fr  // same line
[right-end]

left 成为一个区域（有 start 和 end）

span 可以意指跨越几个轨道 比如 row 3 / span 2 从 row3 开始跨越两个轨道

命名的网格区域

*不用命名网格线

grid-template-areas: "title title"

                           "nav   nav"
                           "main  aside1"
                           "main  aside2";
 grid-template-columns: 2fr 1fr;
      grid-template-rows: repeat(4, auto);
      grid-gap: 1.5em;
      max-width: 1080px;

      margin: 0 auto;
    }

    header {
      grid-area: title;

}

用ASCII art画出网格 每个网格必须组成矩形

显式网格和隐式网格

有时不方便直接指定明确网格 尤其是来自数据库的时候

指定一个网格 多出来的自动创建轨道包含元素 默认大小 auto

grid-auto-row: 1fr;
grid-template-columns: repeat(auto, minmax(200px, 1fr));
auto-fill  vs auto-fit
minmax() // 非固定尺寸下设置下限 上限

grid网站

放大特定图片并维持网格好看

放大=占据更多的轨道

当不指定网格上元素的位置时，元素会按照布局算法自动放置。默认情况下，布局算法会按元素在标记中的顺序将其逐列逐行摆放。当一个元素无法在某一行容纳（也就是说该元素占据了太多网格轨道）时，算法会将它移动到下一行，寻找足够大的空间容纳它。在本例中，鸟被挪到了第二行，放在老鹰下面。

// 控制算法布局行为 row=优先排满一行 column=优先排满一列
dense=尽量填满空白

grid-auto-flow: dense;
grid-row: span 2; //指定网格项跨越两个行轨道。

子网格

网格有一个限制是要求用特定的 DOM 结构，也就是说，所有的网格元素必须是网格容器的直接子节点。因此，不能将深层嵌套的元素放在网格上对齐。

可以给网格元素加上 display: grid，在外层网格里创建一个内部网格，但是内部网格的元素不一定会跟外层网格的轨道对齐。一个网格里的子元素的大小也不能影响到另一个网格的网格轨道大小。

将来可以使用子网格（subgrid）来解决这个问题。通过给一个网格元素设置 display: subgrid，将其变成自己的内部网格容器，网格轨道跟外部网格的轨道对齐。不幸的是，这个特性还没有被任何浏览器实现，因此它被推迟到网格规范的 Level2 版本中。

这个特性备受期待，敬请关注。

底部对齐

刚才放大对齐后 顶部是对齐了但是底部没有 这是因为排列后较大元素里的 img可能没有占满全部网格

网格元素确实会自动占满网格轨道 但是网格元素里的子元素却不会 所以会出现多余的空白高度 简单解决 ： flexbox

flex-grow 可以强制拉伸 加上object-fit（fill contain cover）调整

flex: 1; // grow shrink basis
object-fit: 

特性查询

渐进增强概念：首先是所有浏览器支持的样式 然后是特殊的

使得支持 grid 的浏览器显示 grid

@support (display: grid){

在这里放特性code

}

// 先提供旧布局然后提供查询后的

对齐

justify-content 对于网格轨道
justify-items 对于所有元素
justify-self 对于单个元素
align~~

第七章 定位和层叠上下文

position 属性 默认静态 static=未被定位

定位的隐藏副作用：层叠上下文

固定定位

不太常用

position： fixed；
top
bott
right
left
决定 固定定位元素 和 浏览器视口边缘 的距离
隐式确定宽高 （等于视口总宽度 减去 两侧距离和）
也可以用height 和 width 指定

模态框 with 固定定位

display none -> block (js)

定位是脱离文档流的

技巧：

侧边导航栏 使得其他元素的容器

margin-right: 20%;

绝对定位

绝对定位非常重要 经常和 js 配合 来弹东西

不同于固定定位的包含块 是视口 绝对定位的包含块是 相对最近的祖先定位元素 同样属性可以决定距离/大小

绝对定位 伪元素

找到一个锚定的 定位元素 然后设置

那么这个相对于我们要定位的 定位元素 怎么决定呢：

通常情况下，就像本例一样，包含块是元素的父元素。如果父元素未被定位，那么浏览器会沿着 DOM 树往上找它的祖父、曾祖父，直到找到一个定位元素，用它作为包含块。

说明：
如果祖先元素都没有定位，那么绝对定位的元素会基于初始包含块（initial containing block）来定位。初始包含块跟视口一样大，固定在网页的顶部。

伪元素：将一个按钮改成 x

为了避免可读性出现问题 不能直接把按钮改成 x（因为这样会丢失按钮的文字意义）

办法：用 css 隐藏“close”并显示 x

总共需要两步。首先将按钮的文字挤到外面，并隐藏溢出内容。然后将按钮的 :: after 伪元素的 content 属性设置为 x，并让伪元素绝对定位到按钮中间。按照代码清单 7-4 更新按钮样式。(推荐 unicode)

主要是一个方框 里用 text-indent 推出去（会继承） 溢出后隐藏 然后定位一个乘法 unicode 到框里（用伪元素的内容）

设置行高要较小 太大会看不到

相对定位

相对定位被属性确定位置以后自己会动 但是不会影响其他元素 其他元素还是 围绕 被相对定位元素的 初始位置 跟随正常的文档流

跟固定或者绝对定位不一样，不能用 top、right、bottom 和 left 改变相对定位元素的大小。这些值只能让元素在上、下、左、右方向移动。可以用 top 或者 bottom，但它们不能一起用（bottom 会被忽略）。同理，可以用 left 或 right，但它们也不能一起用（right 会被忽略）。

常用：子绝父相 即为子元素的绝对定位创建一个包含块

创建一个下拉菜单

.dropdown-menu{
display: none; // 隐藏菜单
}

.dropdown:hover .dropdown-menu{
display: block;
}

inline-block显示使得元素仅占用必要长度

创建 css 三角形标识

创建下拉箭头引导用户

还是用伪元素来画

三角形是通过没有宽高(没有内容)只有边框粗细的元素来画的

更多画画技巧：

css tricks

层叠上下文 和 z-index

定位非常有用，但也需要弄清楚它会带来什么后果。当把一个元素从文档流中移除时，我们就需要管理之前由文档流处理的所有事情了。

首先要确保元素不会不小心跑到浏览器视口之外，导致用户会看不到元素。其次要保证元素不会不小心挡住重要内容。

最后还有层叠的问题。在同一页面定位多个元素时，可能会遇到两个不同定位的元素重叠的现象。有时我们会发现“错误”的元素出现在其他元素之前。事实上，本章已经故意设置了这样。

DOM 树 渲染树 -决定绘制元素顺序 后面的元素渲染出现在前面的之前

注意：定位元素会被放到前面

通常情况下 ==模态框要放到最后==

用 z-index 控制层叠

数字越大越靠近屏幕前面

理解层叠上下文

一个层叠上下文包含一个元素或者由浏览器一起绘制的一组元素。其中一个元素会作为层叠上下文的根，比如给一个定位元素加上 z-index 的时候，它就变成了一个新的层叠上下文的根。所有后代元素就是这个层叠上下文的一部分。

层叠上下文之外的元素 无法 叠放到层叠上下文中的两个元素之间

给一个定位元素加上 z-index 是创建层叠上下文最主要的方式，但还有别的属性也能创建，比如小于 1 的 opacity 属性，还有 transform、filter 属性。由于这些属性主要会影响元素及其子元素渲染的方式，因此一起绘制父子元素。文档根节点 html也会给整个页面创建一个顶级的层叠上下文。

在支持的地方可以使用变量记录 z-index

如果发现 z-index 不对劲就要去找根 然后把根放起来

定位用的越多网页就越复杂

粘性定位

比如说侧边栏导航 相对定位和固定定位的结合 再往下滑的时候固定位置

用 canIUse 确认是否支持

条件和前提

1. 包含块必须有一个特定的高度：

• 粘性定位元素的包含块（父元素）必须有一个确定的高度或宽度，以便计算粘性定位的生效范围。否则，粘性定位将无法生效。

2. 必须指定粘性偏移值：

• 必须指定至少一个粘性偏移值（top、right、bottom 或 left），否则 position: sticky; 不会生效。

3. 父元素不能有**overflow: hidden**：

• 如果粘性定位元素的父元素设置了 overflow: hidden;，那么粘性定位可能会失效。

• 可能将 position 的定位功能与 display 的布局功能混淆

• position 影响元素在页面上的具体位置，而 display 影响元素如何在文档流中呈现和排列。

第八章 响应式设计

如果将移动版和桌面版强制分开 无法应对各种类型的屏幕

本章概要

• 基于多种设备和屏幕尺寸构建网页
• 使用媒体查询，根据视口大小来改变设计
• 采用“移动优先”的方式
• 响应式图片

移动优先

移动端 hover 很难生效

创建一个网站，在任何设备都能运行 = 响应式设计

响应式设计三原则：

• 移动优先 = 首先实现移动端布局 ； 随后渐进增强
• @media 规则 = 为不同视口设置不同布局 断点
• 流式布局 = 允许容器根据视口缩放尺寸

隐藏菜单=汉堡包图标

移动端设计主要关注内容=目标 重要的内容先出现

实现移动优先设计

因为要先实现移动版设计，所以更应该了解在更大的视口下网页长什么样，这样才能在一开始就写出合适的 HTML 结构。新建一个网页和样式表，给页面添加样式表，同时给 HTML 的结构添加适应不同视口的内容。

基础字号缩放

font-size: calc(1vw+0.6em);

text-shadow: 上 下 模糊程度 颜色;

background-image: url();

创建移动版的菜单

可读性 nav 里面要有东西 不然视力有障碍的人无法判断页面主要内容

nav容器作为兄弟元素出现在header后面；
不寻常：使用绝对定位把菜单切换按钮拉到上面
white-space: nowrap; 该属性值会使元素内的所有空白符（包括空格、换行符、制表符等）被保留，但文本会在一行内显示，而不会自动换行。

//显示的元素一般都块级 换行 设置大小和边距
.menu{
    position: relative;
}

.menu-toggle{
    position: absolute;
    top: -1.2em;
    right: 0.1em;

    border: 0;
    background-color: transparent;

    height: 1em;
    width: 1em;
    font-size: 3em;
    /* line-heigh with no 单位 */
    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;
    top: 0;
    left: 0;
    margin: 0;
}

js负责改变一个类 css负责隐藏或者显示
.menu.is-open .menu-dropdown {
    display: block;
}

你的理解基本是正确的，内外边距属性用于布局控制，定位属性用于精确位置控制。通过结合使用这些属性，可以实现复杂且灵活的页面布局。

给视口添加 meta 标签

现在移动版设计已经完成，但是还差一个重要细节：视口的 meta 标签。这个 HTML 标签告诉移动设备，你已经特意将网页适配了小屏设备。如果不加这个标签，移动浏览器会假定网页不是响应式的，并且会尝试模拟桌面浏览器，那之前的移动端设计就白做了。为了避免这种情况，按照代码清单 8-6 更新 HTML 里的 head，将 meta 标签包含进去。

<head>
    <meta charset="UTF-8">
    // 告诉浏览器适配了移动端 要用视口
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./respStyles.css">
    <title>responsive</title>
</head>

meta 标签的 content 属性

meta 标签的 content 属性里包含两个选项。首先，它告诉浏览器当解析 CSS 时将设备的宽度作为假定宽度，而不是一个全屏的桌面浏览器的宽度。其次，当页面加载时，它使用 initial-scale 将缩放比例设置为 100%。

content 属性的第三个选项

此外，content 属性还有第三个选项 user-scalable=no，阻止用户在移动设备上用两个手指缩放。通常这个设置在实践中并不友好，不推荐使用。当链接太小不好点击，或者用户想要把某个图片看得更清楚时，这个设置会阻止他们缩放页面。

提示

现代浏览器的开发者工具提供了模拟移动浏览器的功能，包括较小的视口尺寸和视口 meta 标签的行为。这些工具能帮助我们测试响应式设计。更多信息请参考以下链接：

• Chrome 开发者工具
• Firefox 响应式设计模式

媒体查询

针对小中大屏幕设计样式

媒体查询的优先级

媒体查询里面的规则仍然遵循常规的层叠顺序。它们可以覆盖媒体查询外部的样式规则（根据选择器的优先级或者源码顺序），同理，也可能被其他样式覆盖。媒体查询本身不会影响到它里面选择器的优先级。

==推荐查询单位使用 em==

查询的临界情况称为断点

媒体查询的类型

联合媒体查询

必须都满足
@media () and (){}

满足一个
@media () , () , (){}

教材 p209

媒体特征

比如说宽高；宽高之间关系等

提示

媒体查询还可以放在 <link> 标签中。在网页里加入 <link rel="stylesheet" media="(min-width: 45em)" href="large-screen.css" />，只有当 min-width 媒体查询条件满足的时候才会将 large-screen.css 文件的样式应用到页面。然而不管视口宽度如何，样式表都会被下载。这种方式只是为了更好地组织代码，并不会节省网络流量。

媒体类型

常见：screen 和 print 不需要加括号

@media print{}

@media screen{}

@media print { 

    *{
        color: black !important;

        background: none !important;
      }

}

给网页添加断点

移动优先的开发方式

通常来说，移动优先的开发方式意味着最常用的媒体查询类型应该是 min-width。在任何媒体查询之前，最先写的是移动端样式，然后设置越来越大的断点。

添加响应式的列

为更大的屏幕引入多列布局

响应式设计的方法

许多响应式设计遵循这种方法：当设计要求元素并排摆放时，只在大屏上将它们摆放在一行。在小屏下，允许每个元素单独一行，填满屏幕宽度。这种方法适用于列、媒体对象，以及任意在小屏下容易拥挤的元素。

你可能会好奇为什么在代码清单 8-7 中要将断点设置为 35em，因为在这个宽度时，三列布局就开始显得拥挤了。本例中小于 35em 时，每列就显得太窄了。

各种响应模式

断点的选择

不要根据设备选择

未来可能实现根据 容器 选择

流式布局 fluid layout

定义：使用的容器随着视口大小变化而变化

与固定布局相反 固定：px em 等

流式布局中的容器宽度

在流式布局中，页面容器通常不会有明确宽度，也不会给百分比宽度，但可能会设置左右内边距，或者设置左右外边距为 auto，让其与视口边缘之间产生留白。也就是说容器可能比视口略窄，但永远不会比视口宽。

主容器中的列宽度定义

在主容器中，任何列都用百分比来定义宽度（比如，主列宽 70%，侧栏宽 30%）。这样无论屏幕宽度是多少都能放得下主容器。用 Flexbox 布局也可以，设置弹性元素的 flex-grow 和 flex-shrink（更重要），让元素能够始终填满屏幕。要习惯将容器宽度设置为百分比，而不是任何固定的值。

容器用内边距（用对里面内容的内边距 而不是最外层容器的外边距）有时候外边距会被吃掉什么的

内容用百分比

给大视口添加样式

:root {
      box-sizing: border-box;
      font-size: calc(1vw + 0.6em);

}

    @media (min-width: 50em) {
      :root {

        font-size: 1.125em;
      }

}

设置最大字体上限

处理表格

多列表格可能超过屏幕宽度 被剪裁

小屏将表格全都变成 block

  table {
      width: 100%;

}

@media (max-width: 30em) {
  table, thead, tbody, tr, th, td {

    display: block;
  }

  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;

}

  tr {
    margin-bottom: 1em;

  }
}

响应式图片

为了带宽和访问速度

响应式设计中的图片优化

在响应式设计中，图片需要特别关注。不仅要让图片适应屏幕，还要考虑移动端用户的带宽限制。图片通常是网页上最大的资源。首先要保证图片充分压缩。在图片编辑器中选择“Save for Web”选项能够极大地减小图片体积，或者用别的图片压缩工具压缩图片，比如 tinypng 网站。还要避免不必要的高分辨率图片，而是根据视口大小决定是否必要提供大图，也没有必要为小屏幕提供大图，因为大图最终会被缩小。

不同视口 不同图片

提供不同分辨率的图片
下面分别给设备提供小，中，大图

   .hero {
      padding: 2em 1em;
      text-align: center;
      background-image: url(coffee-beans-small.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;
    background-image: url(coffee-beans-medium.jpg);

} }

@media (min-width: 50em) {
  .hero {

    padding: 7em 6em;

    background-image: url(coffee-beans.jpg);
  }

}

使用 srcset

针对 html 的 img 标签

    <img alt="A white coffee mug on a bed of coffee beans"
         src="coffee-beans-small.jpg"

srcset="coffee-beans-small.jpg 560w,
                 coffee-beans-medium.jpg 800w,

                 coffee-beans.jpg 1280w"

/>

jakearchibald 有关响应式图片

不要忘记给网页添加meta标签

大型应用程序中的 CSS
在组织中编写易于维护的代码

第三部分 大项目

第九章 模块化 css

确保 css 应用在对的地方

编写网页的每个部分 按需组合

模块化 CSS

模块化 CSS（Modular CSS）是指把页面分割成不同的组成部分，这些组成部分可以在多种上下文中重复使用，并且互相之间没有依赖关系。最终目的是，当我们修改其中一部分 CSS 时，不会对其他部分产生意料之外的影响。

封装

将相关函数和数据装在一起，内部情况外部不可调整

组成部分 1 基础样式

开头的，适用给所有的规则 参见第三章

完成默认渲染 方便之后覆盖

    :root {
      box-sizing: border-box;

}

    *,
    *::before,
    *::after {

      box-sizing: inherit;
    }

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

}

a {
  color: var(--primary-color);
  text-decoration: none;
}

%% 其他一些base.css %%

颜色
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --background-color: #ecf0f1;
  --text-color: #2c3e50;
}

链接
a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

通用容器
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1em;
}

标题
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  margin: 0 0 1rem 0;
}

图片
img {
  max-width: 100%;
  height: auto;
  display: block;
}

表单
input, button, textarea, select {
  font-family: inherit;
  font-size: inherit;
  margin: 0;
}

清除浮动
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

flex类
.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

响应式设计
body {
  font-size: 100%;
}

@media (min-width: 600px) {
  body {
    font-size: 110%;
  }
}

@media (min-width: 900px) {
  body {
    font-size: 120%;
  }
}
<link rel="stylesheet" href="base.css">

%% chrome里通过检查可以查看手机端情况 %%

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css/normalize.min.css">

normalizecss

组成部分 2 模块样式

通过类名指向模块 模块选择器由单个类名构成

修饰符

一种命名方式 来自 BEM 命名规范

--连接具体功能

双连字符的写法

双连字符的写法可能看起来有点儿多余，但当我们开始创建名称很长的模块的时候，比如导航菜单或者文章摘要，好处就显现出来了。为这些模块添加修饰符后，类名将如 nav-menu--horizontal 或者 pull-quote--dark。

双连字符的写法很容易区分哪部分是模块名称，哪部分是修饰符。nav-menu--horizontal 和 nav--menu-horizontal 分别代表了不同的含义。这样一来，即使项目里有很多名称相似的模块，也很容易分辨它们。

说明

这种双连字符的写法是从一个叫 BEM 的 CSS 命名规范流行起来的。本章快结束的时候，会介绍 BEM 和其他一些类似的方法论。

.message{}

.message--sucess{}

.message--error{}

用例

<div class="message message--error">
      Invalid password

</div>

消息模块

  .message {
      padding: 0.8em 1.2em;
      border-radius: 0.2em;
      border: 1px solid #265559;
      color: #265559;
      background-color: #e0f0f2;

}

按钮模块

   .button {
      padding: 0.5em 0.8em;
      border: 1px solid #265559;
      border-radius: 0.2em;
      background-color: transparent;
      font-size: 1rem;

}

    .button--success {
      border-color: #cfe8c9;
      color: #fff;
      background-color: #2f5926;

}

.button--danger {
  border-color: #e8c9c9;
  color: #fff;
  background-color: #a92323;

}

.button--small {  
font-size: 0.8rem; 小号变体

}

.button--large {  
font-size: 1.2rem; 大号变体

}

提示 要把一个模块所有的代码集中放在同一个地方，这样一个接一个的模块就会组成 我们最终的样式表。

为了可维护性，类名不应该依赖语境，不要反复用很多选择器选择一个要素，这会使得后面的修改更加麻烦。

• 不要基于页面位置的后代选择器来修改模块
• 只有模块自己能够决定本身的样式表现

多元素模块

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

}

.media::after {
  content: "";
  display: block;
  clear: both;

}

.media__image {
  float: left;
  margin-right: 1.5em;

}

.media__body {
  overflow: auto;
  margin-top: 0;

}

.media__body > h4 {
  margin-top: 0;

}

  <div class="media">
      <img class="media__image" src="runner.png">
      <div class="media__body">

        <h4>Strength</h4>
        <p>

          Strength training is an important part of
          injury prevention. Focus on your core—
          especially your abs and glutes.

</p> </div>

</div>

模块名称__子元素 双下划线

模块组合

每个模块只干一件很小的具体的事情，当不得不使用 并 与 和 这种词的时候说明可能可以拆分

= 单一职责原则

拆分模块职责

例子：下拉菜单=下拉控制显示和隐藏，菜单控制菜单内容

触发-动作 列表-内容

   <div class="dropdown">
      <button class="dropdown__toggle">Main Menu</button>
      <div class="dropdown__drawer">

        <ul class="menu">
          <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>

    <script type="text/javascript">
    (function () {

      var toggle =
        document.querySelector('.dropdown__toggle');

      toggle.addEventListener('click', function (event) {
          event.preventDefault();
          var dropdown = event.target.parentNode;
          dropdown.classList.toggle('is-open');

} );

    }());
    </script>

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

}

    .dropdown__toggle {
      padding: 0.5em 2em 0.5em 1.5em;
      border: 1px solid #ccc;
      font-size: 1rem;
      background-color: #eee;

}

    .dropdown__toggle::after {
      content: "";
      position: absolute;
      right: 1em;

      top: 1em;
      border: 0.3em solid;
      border-color: black transparent transparent;

}

    .dropdown__drawer {
      display: none;
      position: absolute;
      left: 0;

      top: 2.1em;
      min-width: 100%;
      background-color: #eee;

}

    .dropdown.is-open .dropdown__toggle::after {
      top: 0.7em;
      border-color: transparent transparent black;

    }
    .dropdown.is-open .dropdown__drawer {

      display: block;
    }

• 模块中定位 要关联同模块其他要素
• 状态类 通过 js 控制 is- has-开头

预处理器可以把多个样式合并成一个文件 减少请求次数

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

}

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

}

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

}

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

}

模块命名

• 避免视觉效果命名
• 思考模块代表什么意义
• 简单记忆
• 消息，媒体，下拉，菜单，面板，警告，可折叠，表单控制
• 有时可以用两个词更准确 避免重复
• 不要使用精确修饰

原则应用的实例：比起button--red button--alert更合适，不使用外观，而是着眼意义 

组成部分 3 工具类

用一个类对要素做简单操作 例如居中 浮动等

工具类是唯一应该使用!important 的地方
最多十几个工具类

.text-center {
      text-align: center !important;
}
    .float-left {
      float: left;
}
    .clearfix::before,
    .clearfix::after {
content: " ";
        display: table;
    }
    .clearfix::after {
        clear: both;
}
    .hidden {
      display: none !important;
}

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }

.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-bold { font-weight: bold; }

.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }

.d-flex { display: flex; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }

.w-100 { width: 100%; }
.h-100 { height: 100%; }
.max-w-full { max-width: 100%; }

.visibility-hidden { visibility: hidden; }
.visibility-visible { visibility: visible; }

.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

同时使用变体和子元素

.media--right > .media__image {
  float: right;

}
只在media--right中生效改为右浮动

避免在模块选择器中使用通用标签名

我们在媒体模块中使用了选择器 .media__body > h4 来匹配标题元素。这么做是允许的，因为 <h4> 标签就是用来标识一个次要标题的。同样的方式也可以用在带列表的模块上。相较于列表里的每个项目都添加 menu__item 类名，使用 .menu > li 匹配菜单项简单多了，尽管这种写法有些争议。

我们应该避免使用基于通用标签类型的匹配选择器，比如 div 和 span。类似 .page-header > span 的选择器就太宽泛了。最初建立模块的时候，可能只是用 span 标签做一件事，但谁也说不准以后会不会出于其他目的再添加第二个 span。后面再为 span 添加类名就比较麻烦了，因为我们需要在 HTML 标记中找到所有用到模块的地方，全部改一遍。

css 方法论

最近可以完全通过 js 控制 css 称为 css in js 或者内联样式

第十章 模式库

模式库 或者 style guide是单独的一组网页，用来展示每个 css 模块

KSS 工具

https://kss-node.github.io/kss-node/

kss 已经是 10 年前的东西了 我觉得有点太过时了，本章简单记录下

kss 是一个在 css 里写注释然后生成模式库的工具

kss 不会主动删除旧页面

<img src="https://via.placeholder.com/300x200" alt="placeholder image">

• 任务管理 gulp 自动更新=检测更新后自动重新运行
• https://gulpjs.com/
• 模式库更适合大型项目
• 迭代最好弃用旧模块重写一个新的

css 优先方案

• [ ] 建立一个自己的 css 模式库 (@2024-08-30 11:00)

语义版本

软件包命名方式 使用 3 个数字 1.2.3 表示主版本，次版本和修订号

1. 主版本号（Major）:

   • 当你做了不兼容的 API 修改时，需要递增主版本号。
   • 这意味着新版本可能无法与旧版本完美兼容，可能需要用户或开发者作出相应的调整。

2. 次版本号（Minor）:

   • 当你在保持向后兼容的情况下添加了新功能时，需要递增次版本号。
   • 这通常表明添加了新的功能或改进，但是不会破坏现有系统的工作。

3. 修订号（Patch）:

   • 当你进行了向后兼容的问题修正时，需要递增修订号。
   • 主要用于修复已知的错误或漏洞，这些修复通常不会影响软件的主要功能或API。

示例：

• 如果当前版本是 1.0.0，并且你添加了一个新功能，没有破坏任何现有的API，那么新版本应该是 1.1.0。
• 如果你修复了一些小错误，并且没有改变任何API，那么新版本应该是 1.0.1。
• 如果你重新设计了整个系统，改变了多个API，那么新版本应该是 2.0.0。

bootstrap 等框架

所有框架都是模块化的 - 模式库更加定制化

第四部分 高级

第十一章 背景阴影和混合模式

如何设计精致 ui，更好的观感

了解设计的具体规则

渐变

• background-image——指定一个文件或者生成的颜色渐变作为背景图片。
• background-position——设置背景图片的初始位置。
• background-size——指定元素内背景图片的渲染尺寸。
• background-repeat——决定在需要填充整个元素时，是否平铺图片。
• background-origin——决定背景相对于元素的边框盒、内边距盒（初始值）或内容盒子来定位。
• background-clip——指定背景是否应该填充边框盒（初始值）、内边距盒或内容盒子。
• background-attachment——指定背景图片是随着元素上下滚动（初始值），还是固定在视口区域。注意，使用 fixed 值会对页面性能产生负面影响。
• background-color——指定纯色背景，渲染到背景图片下方。

linear-gradient函数定义角度颜色

角度单位

角度 0 度两个颜色时，是从下往上渐变，旋转正数是顺时针旋转，所以 90 度的时候从左到右变

• rad——弧度（radian）。一个完整的圆是 (2\pi) 弧度，大概是 6.2832 弧度。
• turn——代表环绕圆周的圈数。一圈相当于 360 度（360deg）。可以使用小数来表示不足一圈，比如 0.25turn 相当于 90deg。
• grad——百分度（gradian）。一个完整的圆是 400 百分度（400grad），100grad 相当于 90deg。

条纹

同一个位置两个不同颜色节点

重复渐变：

 .fade {
      height: 1em;
      width: 400px;
      background-image: repeating-linear-gradient(-45deg,

        #57b, #57b 10px, #148 10px, #148 20px);
      border-radius: 0.3em;

}

更多实例 css-tricks

重复的时候抬头repeating-

径向渐变

从点扩展至全方位

radial-gradient();

![[Pasted image 20240803210735.png]]

阴影

box-shadow & text-shadow
box-shadow: 水平偏移量（左到右） 垂直偏移量（上到下）模糊半径 扩展半径 阴影颜色

insert关键字使得阴影朝内部，多个阴影用逗号隔开

两个设计方向：拟物化设计 扁平化设计

渐变和阴影

渐变和阴影可以以各种各样的方式组合使用。随着时间的推移，又会有新的设计流行起来。我们要做的是，在看到某个网站上的新设计时，停下来花些时间，用浏览器的开发者工具检查一下，看看这是如何实现的。不要觉得麻烦哦，见多才能识广。

混合模式

background-image: url(bear.jpg), linear-gradient(to bottom, #57b, #148);

多个图片使用时前面会渲染在上面

 .blend {
        min-height: 400px;
        background-image: url(images/bear.jpg), url(images/bear.jpg);
        background-size: cover; （contain则是缩）
        background-repeat: no-repeat;
        background-position: -30vw, 30vw;
        background-blend-mode: multiply; %% 应用混合模式 %%

}

混合模式用处

can i use

• 使用某种颜色或者渐变为图片着色；
• 为图片添加纹理效果，比如划痕或者老胶片放映时的颗粒感等；
• 缓和、加深或者减少图片的对比度，使图片上的文字更具可读性；
• 在图片上覆盖了一条文字横幅，但是还想让图片完整显示。

background-blend-mode

着色

 .blend {
        min-height: 400px;
        background-image: url("images/bear.jpg");
        background-color: #148;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-blend-mode: luminosity;

}

明度混合：使用背景色的颜色和照片的明度；各种混合取决于哪个图层在哪个上面

书本 11.3.2 有各种混合模式

纹理

.blend {  
min-height: 400px;  
background-image: url("images/scratches.png"), url("images/bear.jpg"); 
background-size: 200px, cover;  
background-repeat: repeat, no-repeat;  
background-position: center center;  
background-blend-mode: soft-light;

}

soft-light 模式对于暗色系纹理图效果很好，而 hard-light 和 overlay 模式更适用于亮色的纹理图片（如果纹理图放在主图片下面则恰好相反）。然而实际应用效果可能需要根据具体情况进行调整。

融合混合模式

mix-blend-mode

不仅混图片，还混合文字等

可以实现图片上的透明文字

   <div class="blend">
      <h1>Ursa Major</h1>

</div>

  .blend {
      background-image: url("images/bear.jpg");
      background-size: cover;
      background-position: center;
      padding: 5em 0 10em;

}

.blend > h1 {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 6rem;
  text-align: center;
  mix-blend-mode: hard-light;
  background-color: #c33;
  color: #808080;
  border: 0.1em solid #ccc;
  border-width: 0.1em 0;
}

文字渐变

webkit 渐进增强

第十二章 对比、颜色和间距

像设计师一样思考

对比最为重要

为了有对比，页面必须首先建立模式和规则，只有先有规则才可能打破规则。使用模块化 css 保证统一性

使用不同的颜色 间距 大小来创造对比

设计师的工作是让最重要的信息凸显出来

建立模式

还原设计稿

颜色

主色，将主色和延伸颜色指定为变量

html {
      --brand-green: #076448;
      --dark-green: #099268;
      --medium-green: #20c997;
      --text-color: #212529;
      --gray: #868e96;
      --light-gray: #f1f3f5;
      --extra-light-gray: #f8f9fa;
      --white: #fff;

      box-sizing: border-box;

      color: var(--text-color);
    }

    *,
    *::before,
    *::after {

      box-sizing: inherit;
    }

body {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.4;
  background-color: var(--extra-light-gray);

为每种颜色 指定变量

}

h1, h2, h3, h4 {
  font-family: Georgia, serif;

}

a{  
color: var(--medium-green);

}  
a:visited {

  color: var(--brand-green);
  }  
a:hover {

  color: var(--brand-green);
}

a:active { }

布局；颜色字体；间距

cta 按钮 有意召唤行动

双容器模式

内边距定位

%% flex等宽 %%
.tile-row {
      display: flex;
}
.tile-row > * {
flex: 1; 
}

颜色表示法

rgb 法不如 hsl 直观 因为前者没有明度

hsl 色相，饱和度，明度，透明度 0~1

HSL Color Picker

转换颜色

推荐转换为 hsl 观察颜色 可以简单知道色相，然后添加衍生颜色

添加新颜色

色相环

• 找补色：色相环的对侧

  使用hsl时，色相值-180或者+180 就是补色，hsl0~180红黄绿，180~360 蓝紫红

如果你想更深入地研究颜色选择，可以上网浏览颜色理论相关的文章。你可以从 Natalya Shelburne 所写的这篇著名的文章 "Practical Color Theory for People Who Code" 开始。

字体

字体颜色

颜色 不是黑色而是深灰色

 --text-color: hsl(210, 11%, 15%);

纯白加纯黑文字=狗屎设计

WCAG=Web内容无障碍指南

WCAG 定义的大号文本，是指未加粗的 18pt（24px）及其以上的文本，或者加粗的 14pt（18.667px）及其以上的文本。也就是说，正文字体应达到或者超出普通文本建议的对比度，标题文本应达到或者超出大号文本建议的对比度。

Css 颜色对比检查器（）CSS color contrast checker
对比检查

纤细字体需要更多的字重感知到的对比度才合理

字体间距

em 还是 px

相对单位还是绝对单位？
响应式字体

font-size: calc(0.5em+1vw);  加上vw可以随视窗变化而变化

如果font-size 默认16px 那么10px间距=10/16 em=0.625em

内外边距的判断看是应用到父元素的内部还是目标元素的外部

行高如何影响垂直间距

文字之间的行高会影响垂直的间距，比如说外边距 30px 加上行高居然会变成快 36px

文字高度是不带行高的，行高会另算 尤其是垂直居中的情况

网页里的行高

网页里的行高是 1.4，这是从<body>元素上设置并继承下来的。这样只有一行文字的元素，内容盒子的高度就是 1.4em。文字在内部垂直居中，字号是 16px，内容盒子的最终高度就是 22.4px。额外的 6.4px 平均分配到文字的上方和下方。

解决办法是在内容盒子外边距里减掉算出来的间距

[font-size*1.4px-(font-size)] / 2 =上下各有？px行高

目标间距-已有行高=真实设置间距

为行内元素设置间距

例如：标签的微型布局

方法：flex 或者行内元素

这里讲行内元素 display: inline;

行列表项的高度:

每一行列表项的灰色背景会和另一行的列表重叠，原因在于行高。前面讲到过，文本行的高度是由行高乘以字号决定的。如果为行内元素添加内边距，元素本身会变高，却不会增加文本行的高度。文本行的高度只由行高来决定。

行内元素同元素换行的时候可以折行但是 flex 不行整个元素直接换一行 个人觉得 flex 合理一点

**rem设置字号 px设置边框(或者rem) em设置其他**

字号要用 rem 设置

我们的目的是让用户的注意力被吸引到该被吸引的地方，其他的信息则做减法，所以调配资源使得注意力分布合理很重要，这就是为什么对比这么重要！对比是在帮用户筛选信息

意外的是，原来 hsl 这么好用！

第十三章 排版

关键词：web 字体，谷歌字体 api，字间距，性能

网页设计，成也字体败也字体，web 字体使用@font-face 告诉浏览器去哪找字体，字体改变网站氛围

web 字体

常见的在线服务：

• Typekit
• Webtype
• 谷歌字体 <- free

标题与正文使用不同字体，或者不同字重

serif 和 sans-serif

一种有衬线，也就是英文字末端有爪，另一种是圆润的

字体是字型=typeface中确定字重等的一种

谷歌字体

1. 找到字体
2. 挑选字重
3. 只挑选需要的，为了性能
4. 在清单里选择并获得 href 地址
5. 在 html link 标签添加地址
6. 使用 font family 指定使用字体

@font-face

一个例子

输入上面获得的 href 的链接获得谷歌字体的 css

/* latin */
@font-face {
  font-family: 'Sansita';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sansita/v11/QldLNTRRphEb_-V7JLmXWX5-w4dsz_k.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

字体格式与回退处理

WOFF=web 开放字体 有些浏览器可能不支持 WOFF2 此时回退

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  src: local("Roboto Light"), local("Roboto-Light"),

}

url(https://example.com/roboto.woff2) format('woff2'),
url(https://example.com/roboto.woff) format('woff');

字型的变体

  /* latin */
    @font-face {

      font-family: 'Roboto';
      font-style: normal;
      font-weight: 300;
      src: local('Roboto Light'), local('Roboto-Light'),

           url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-
         tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2');

font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('Roboto Bold'), local('Roboto-Bold'),

unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;

}
...
/* latin */
@font-face {

url(https://fonts.gstatic.com/s/roboto/v15/d-
6IYplOFocCacKzxwXSOJBw1xU1rKptJj_0jans920.woff2) format('woff2');
}

使用@font-face 可以定义浏览器需要的字体的格式 比如 bold 具体是什么

字距与可读性

涉及两个属性：line-height letter-spacing

分别管理垂直和水平的间距

正文主题的字间距

line-height: normal; 是默认初始值 大约是 1.2 （行高不带单位） 左右

行高一般设置1.4~1.6之间，文字行越长，行高应该越大。每行文字长度在45~75个字符

letter-spacing 一般一次增加 1em 的百分之一 0.01em

letter-spacing: 0.01em;

设计常用 pt 把 pt 转为行高的无单位比例数字：

具体行距pt*1.33/16px(这是字号)=无单位行高值

算字距一般除以 1000

标题、小元素和间距

标题

大字体行高可能小于 1.4 更合适 长标题有时候会有问题 排长强制换行测试

标题的字间距可以稍宽 0.03em；也可以使用负间距 -0.02em

小元素

减小字号 改内边距 对齐方式 大小写等
.top-nav a {
  display: block;
  font-size: 0.8rem;
  padding: 0.3rem 1.25rem;
  color: var(--white);
  background: var(--brand-green);
  text-decoration: none;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.03em;

}

垂直规律排版：

使用基线网格，行之间距离相等。使用各种规格的元素，但是垂直上排列有序

垂直规律需要行高标明单位，这意味着所有字号改变的地方必须明确设有行高。

FOUT 和 FOIT

浏览器加载字体：首先使用可用的系统字体然后渲染指定的 Web 字体。有时时间太长渲染后页面变化导致不好的体验=FOUT 无样式文本闪动 Flash Of Unstyled Text

后来浏览器为了满足开发者，修改了渲染的方式，使得文字渲染不可见而首先渲染其他的要素。这导致新的问题 FOIT= Flash Of Invisible Text 这次的问题是如果渲染字体不可用那么网页会出现文字位置的空白，终究没有意义。甚至不如回退处理。

书里的解决方案：使用 js 或者新的 css 属性来控制字体加载

使用 Font Face Observer（js）

使用Font Face Observer 的库

在字体准备好时，使用 js 创建 fonts-loaded 类，使用这个类控制字体加载和渲染

先下载fontfaceobserver.js 文件，保存到和页面相同的目录下。然后添加代码到页面底部 body 闭合前

<script type="text/javascript">
      var html = document.documentElement;
      var script = document.createElement("script");
      script.src = "fontfaceobserver.js";
      script.async = true;

%% 为要加载的字体创建观察器 %%
      script.onload = function () {
        var roboto = new FontFaceObserver("Roboto");
        var sansita = new FontFaceObserver("Sansita");
        var timeout = 2000;

        Promise.all([
          roboto.load(null, timeout),
          sansita.load(null, timeout)

        ]).then(function () {
          html.classList.add("fonts-loaded");

        }).catch(function (e) {
          html.classList.add("fonts-failed");
%% 检查是否加载成功 %%

});

      document.head.appendChild(script);
    </script>

在前端开发中，polyfill 是一种代码或插件，旨在为旧版本的浏览器或不支持某些现代功能的浏览器提供功能补充。它允许开发人员使用最新的 web 标准和 API，而不必担心这些功能在用户的旧浏览器中无法使用。

使用 font-loaded 类和 font-failed 类控制字体表现

回退

1. css 里使用回退字体 然后 font-loaded 选中改为 Web 字体（FOIT 改为 FOUT）
2. css 用 Web font-failed 类用回退字体 依然会有 FOIT 但是超时转为系统字体<-推荐

%% 使用Web字体 %%
body{
  margin: 0;
  font-family: Roboto, sans-serif;
  line-height:1.4;
  letter-spacing: 0.01em;
  background-color: var(--extra-light-gray);
}

%% 处理failed改成系统字体 %%
.fonts-failed body {
  font-family: Helvetica, Arial, sans-serif;

}

h1, h2, h3, h4 {
  font-family: Sansita, serif;
  letter-spacing: 0.03em;

}
.fonts-failed h1,
.fonts-failed h2,
.fonts-failed h3,
.fonts-failed h4 {

  font-family: Georgia, serif;
}

...
.home-link {

  color: var(--text-color);
  font-size: 1.6rem;
  font-family: Sansita, serif;
  font-weight: bold;
  letter-spacing: 0.03em;
  text-decoration: none;

}
.fonts-failed .home-link {

  font-family: Georgia, serif;
}

font style matcher 网站帮助调整字体变更后间距等的调整

解决 FOUC= Flash Of Unstyled Content 问题

font-display

font-display 一个新的 css 属性
font-display支持的属性：

• auto=FOIT
• swap=FOUT
• fallback=较短时间 FOIT 后 FOUT
• optional=如果 Web 字体搞得太慢了就不显示了

 @font-face {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 300;
      src: local("Roboto Light"), local("Roboto-Light"),

           url(https://example.com/roboto.woff2) format('woff2'),
           url(https://example.com/roboto.woff) format('woff');

  font-display: swap; %% 立即显示回退字体然后交换为Web字体 %%
}

延伸内容：Web Performance in Action

第十四章 过渡 transition

过渡可以吸引用户的注意力 过渡的本质是让属性的一个值"移动到"另一个值

transition 属性

• transition-property：指定对于哪些属性使用过渡 all=所有
• transition-duration：过渡占有的时长

元素属性任何时候发生变化都会触发过渡，比如 hover 等情况。始终把过渡属性放在一直能选择到元素的选择器里。过渡属性本身通常不随元素状态变化而变化。

transition: 对应属性 持续时间 定时函数 延迟时间，(下一个对象);

时间必须添加单位 0.3s 或者 300ms

定时函数

我自己的理解，定时函数决定变化的过程，说明属性是如何“移动”的。书上说是决定中间值的计算。

• linear: 固定值
• ease-in: 逐渐加速
• ease-out: 逐渐减速
• steps () 分步

为了性能，有些属性最好避免使用transition 比如left等

自定义-贝塞尔曲线

流畅过渡：定时函数的前三种

浏览器使用贝塞尔曲线作为随着时间变化的函数来计算某个属性的值

可以在 Chrome 开发者工具里修改贝塞尔曲线 在 css 属性里面

cubic-bezier(0,0,0,0); 四个参数前2后2分别对应两个控制点的xy坐标

哪种曲线何时是有用的？
应该复用减速，加速，线性linear曲线，使得体验统一

线性：颜色变化和淡入淡出效果

减速：用户发起的变化，比如点按按钮或者hover，获得快速反馈

加速：系统发起的变化，内容加载或者超时触发等，慢慢引起注意

延伸：cubic-bezier 在线编辑

steps () 分步

非流畅过渡 分步完成 需要 2 个参数=次数+变化发生在步骤的开始还是结束，第二个参数默认是 end

延伸：clever uses for step easing

分步最常用的是做 类似翻页动画的效果 帅！

还有进度条啥的

非动画属性

下拉菜单的过渡效果

详见 vscode 第十四章 code 大部分过渡时间应该介于 200ms 和 500ms 之间，小动作快，弹跳等大动作稍慢

不可添加动画效果的属性

display 只有 0 或 1 没有过渡 MDN 文档可查那些属性有动画的条件，因为 display 没有动画，所以可用不透明的动画效果代替，来做淡入淡出等

淡入淡出

注意，使用不透明度时，元素只是不显示了，不是收缩进去了，这意味着元素还在原来的位置上挡着其他元素，所以会导致页面不正常工作。说人话就是如果只设置不透明度的过渡，盖在那个元素下面的东西就点不到了。需要呢在不可见的时候移除掉。

`visibility: visible/hidden;` 属性，可以用于移除元素。它支持 transition-delay 注意可见性的值不是 0 和 1 是 visible 和 hidden，hidden 的时候不会盖住下面的元素

visibility 是从可见页面移除元素，无法移除其在文档流里的位置和排版，但是！只要绝对定位脱离文档流，就可以不用担心了。

过渡到自动高度

另一种打开下拉菜单的办法：使用高度的过渡，配合 overflow 0- >渲染后的高度（使用 js）

`display:none;时 scrollHeight为0`

过渡有时候需要 js 和 css 配合捏。

第十五章 变换 transform

transform改变页面元素的形状和位置

旋转，平移，缩放和倾斜

`transform:rotate(90deg);`

• rotate 旋转
• translate 平移
• scale 缩放
• skew 倾斜

transform 不会脱离文档流 这意味着元素原来的位置不会被其他元素占用，而且会可能发生遮盖 要留足提前量

transform不能作用在行内元素上

更改变换基点

`transform-origin: right bottom;`

`keyword: top right left bottom center 也可以用百分比或者带单位去描述`

使用多重变换

指定多个变换 中间空格隔开

`transform: rotate(15deg) translate(10px, 20px);`

在运动中变换

实现左侧导航菜单

使用 svg 格式图片-可缩放矢量 可以缩放到任意大小

使用背景渐变在 body 类里改效果的时候 为了铺满最小视窗 `min-height` 应该要 100vh

fixed 不受滚动影响 一直在那个位置 适合菜单等需要一直显示的东西

使用变换不会改变原来排列布局，因为边距等都不会变 只是元素本身变一下

因此放大图标不是改变它的宽高 而是用 svg 缩放实现

图标技术：

• 精灵图 把所有图标放入单个图标文件 调整背景图片位置来显示某个图标
• 图标字体 icon fonts 把图标作为字符放入 然后 Web 字体渲染
• svg 图标 基于 xml 文件格式 在 html 直接使用 可作为 img 来源，直接使用指的是 `<svg>然后<path>` css 还可以改变 svg 里的部分

延伸：using-svg

使用 svg 文件做背景图的时候需要额外设置 `background-size` 和上层图片一样大 不然显示不对

位置的定位和移动直接用 transform做, transition 一开始状态的定位也直接用 transform 定位

弹跳特效

transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.3),

opacity 0.3s ease-out;

交错显示过渡

`transiton-delay`

使用 `nth-child(n) ` 来按顺序选中子类 然后分别按照顺序延时不同的时间

动画性能

transform 是一个性能很好的选择 比 transition 和 animation 要好

渲染路径

三阶段：布局-绘制-合成

布局

计算各个元素的大小位置和相互关系

任何时间改变任一个元素的大小或者位置都需要重新对整个页面进行计算，也就是重排 删除或者添加元素也会

绘制

绘制就是在电脑的内存里对各个元素进行像素的绘制，包括文本图像颜色阴影什么的，那么这时候只对那一个元素进行计算。此外有图层的概念，可以把对应绘制图层放到 GPU 里单独计算，也就是硬件加速，这样占用更多内存，但是速度更快

合成

把绘制好的所有图层合成到计算机屏幕上显示

transform 等之所以快是因为只对对应图层修改 在 gpu 里加速 不需要对所有图层重新绘制

由于一般来说 1s 刷新 60 次 也就是绘制六十次的话，每次的计算量小对整体提升很大

`will-change:transform;` 提前告知计算机元素的什么属性需要变化了，来对渲染图层添加控制 来使用 gpu 加速，但是这会占用很多资源

3D 变换

`translateZ()` `rotateX()` `rotateY()`

rotate 默认是照着 Z 轴旋转的

控制透视距离

透视距离=摄像机和场景之间的距离

透视距离越近 3d 效果越明显

反之越不明显

`perspective: 400px;`

两种指定透视距离的方式

1. perspective() 变换 = 为单个元素设置
   例子 `transform: perspective(200px) rotateX(30deg);` 就像是为每个元素单独拍照 然后照片并排放在一起
2. perspective 属性 = 为父容器设置后，建立统一透视距离
   例子 就像是一群人一起拍照 共享一个透视距离 一个相机

   
   .row {
     display: flex;
     justify-content: center;
     perspective: 200px;

}

为容器添加 透视距离

.box {
box-sizing: border-box;
width: 150px;
margin: 0 2em;
padding: 60px 0;
text-align: center;
background-color: hsl(150, 50%, 40%);
transform: rotateX(30deg);
%% 这里就不再需要定义透视距离 %%
}

### 高级 3d 变换

实际开发中好像用得不多

`perspective-origin: ;`

`backface-visibility: hidden;` ->应用场景：两个卡片合在一起 卡片翻转特效

延伸：Intro to CSS 3D Transforms 
- [ ] 阅读这篇文章 (@2024-08-21) 

`transform-style(preserve-3d)`

延伸：Ana Tudor 在 DWB 网站写的教程

# 第十六章 动画 animation

通过关键帧动画 实现比过渡更为精确多样的控制

定义关键帧以后，浏览器自动填充剩下的帧图像

动画可以向用户传递有意义的反馈

两个部分

定义动画 `@keyframes`

添加动画 `animation`

animation 简写的几个属性：

`animation-name`

`animation-duration`

`animation-timing-function`

`animation-iteration-count`

如果重复多次需要考虑初始值和结束值匹配

出现动画时，动画的属性在样式层叠中具有更高的优先级，而当动画结束会回到**原来的**属性设置 比如绿色背景在动画如果设置其他颜色，就不会是绿色，但是动画结束会立刻回到绿色

## 3D 变换的动画

考虑布局的时候优先实现移动端布局，然后一步步加上复杂的布局，做响应式一定要先检查 head 里有没有 不然拿不到设备的视口

```html

移动端-flex-grid

在 1000px 左右的视口下，这个 flex 布局的显示是不正常的，所以再加 grid 解决

@support (display:grid){} 使用 @support 查询，如果浏览器支持这个属性就应用

对图片使用 max-width:initial; 来重置最大宽度
initial值

为布局添加动画 （3d 飞入）

3d布局

xy 轴都在电脑平面上 x 横着 z 轴垂直于电脑平面

添加飞入 3d 动画需要 translateZ 和 rotateY 在那之前需要先确定透视距离和关键帧

在容器上设置透视距离 使得所有元素共享一个摄像机 在运动过程中通过关键帧 在中途插入状态来定义接近的速度和旋转变化的幅度 以及不透明度的变化

动画延迟和填充模式

animation-delay:;

animation-fill-mode:;

• backwards
• forwards
• none
• both
  由于教材上不透明度应用在动画里，所以一开始不透明度是 1 再变成 0 再变成 1 比较尴尬 要把动画样式 向后填充 就像暂停在第一帧那样

向后填充：更接近开始的时候 在动画执行之前浏览器会读出动画开始第一帧的状态直接应用上去

向前填充：浏览器读出最后一帧状态，一直应用下去

通过动画传递意图

动画的意义：通过 ui 反馈给用户信息，他们的操作确实符合他们的预期

反馈用户操作

反馈一个加载动画 把边框画成月牙的伪元素 让它转起来=css 动画

吸引用户注意

摇动元素引起注意

动画可以重复多次不同位置调用，建议是都写在一块，比如都放在最后

js 可以控制动画的播放 也有专门控制 css 动画的 api 可以参考 mdn 的 animation

延伸：不错的动画库animista

验证一个想法 focus 伪类是不是更适合手机屏幕

附录 A 选择器

基础选择器

组合器

伪类选择器

伪元素选择器

属性选择器

a[attr="value"] {}

附录 B 预处理器

原理：把源文件（我们写的自定愿意）转译为输出文件（常规 css 样式表）

预处理器不会添加任何新特性，只是做一个翻译的过程，让人写的时候可以写更具有语义的 code

种类：Sass Less

例如定义 $brand-blue 变量 替换 #0086b3

Sass

推荐 LibSass

Sass 可以对变量进行运算

对颜色处理的延伸：A Visual Guide to Sass & Compass Color Functions

@for 迭代

Sass 我劝你学！

性能

使用 Autoprefixer 保证兼容性

使用 gzip 压缩

在 Sass 中更多使用@extend