常用

• 注意区分大小写
• 带空格的字体记得加引号
• 使用背景图的时候最好指定背景色，这样至少能保证背景图加载出现问题时文本是可见的

软件

vscode：可以登陆GitHub账户，进行设置的同步，常用插件：

• live server：开启本地服务器
• prettier：美化代码; prettier需要在设置-editor：default format处勾选-prettier，
• path intellisense：在书写路径时获得智能提示，
• Auto rename tag：方便重命名标签名
• vscode-icons：为资源管理器中的文件显示图标
• imge snippets：自动识别图像宽高
• image preview：代码侧预览外链图片。

pxcook：像素量取

操作

• 使用浏览器进行样式效果调试，直接在emmet.style书写，会添加内联样式；:hov点击可展开进行各种状态下格式的查看
• 重置样式表：覆盖浏览器默认样式，常见normalize.css（http://necolas.github.io/normalize.css/）、reset.css、meyer.css（meyerweb.com）
• 不要修改别人写的样式，用优先级去覆盖
• 爱恨法则：link、visited、focus、hover、active
• 距离相关一般可用1em（字符）、1px（像素）、1%（百分比）、1（数值）；弹性值：fr ，标识份数，会使用剩余可用空间除以份数来进行弹性比例分配；角度单位deg（360）、grad（400），rad（2π），turn圈数
• 背景默认覆盖至边框盒，通过background-clip修改，- background-clip对根元素（HTML或body）没有效果
• 为导航菜单添加50ms的延迟过渡效果，能防止导航菜单意外展开
• 尺寸以border-box为基准

box-sizing: border-box;

• 单行列表显示不完整内容为…

white-space:nowrap #空白折叠会发生但不会换行
overflow:hidden #溢出隐藏
text-overflow:ellipsis #超出文本如何处理

• 浮动情况下为避免高度坍塌，会在最后加一个块盒，并通过clear属性令其可以排列在浮动盒子之下

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

语法糖

1. 多个选择器用逗号分隔，表示两个选择器使用同一个声明块
2. 简写属性：多个属性合在一起书写，例如padding（[[t b] [l r]]）=padding-left + padding-right + padding-top + padding-buttom，中括号内值相同时可只写一次，浏览器检查窗口中可看到折叠三角形，若只写三个值则第四个值取用第一个值
   注意：简写属性的其他未设置属性会设置为默认，所以通常简写属性需要写在具体属性之前

基础知识

CSS规则=选择器+声明块

1. 选择器（用于选中元素）

通配符选择器

• *：选中所有元素，通常情况下会忽略

ID选择器：选中对应ID元素，ID名，#id名
元素选择器：选择一类元素，元素名
类选择器【常用】：html中定义class，.class名称

#css
 .linka{
  color: #ccc;
}
#html
<a class="linka" href="https://www.jianshu.com/u/2c9847303b69">baidu</a>

属性选择器：可以根据需要进行筛选，[属性名=“属性值”]

[href]{
  color:red;
}
- [foo |= "bar"] 选择元素有foo属性，且其值以bar和一个英文破折号开头，或者其值就是bar本身；
- [foo ~= "bar"] 选择元素有foo属性，且其值是包含bar的一组词，以空格分隔；
- [foo ~= "bar"] 选择元素有foo属性，且其值是包含子串bar；
- [foo ^= "bar"] 选择元素有foo属性，且其值以bar开头；
- [foo $= "bar"] 选择元素有foo属性，且其值以bar结尾；

伪类选择器：选中某些元素的某种状态，伪类的效果是把某种幽灵类应用到伪类依附的元素上，:选择器

1. UI状态伪类：enabled，disabled，checked，indeterminate，default，valid，invalid，in-range out-of-range， required，optional，read-write，read-only
2. target伪类，lang伪类，否定伪类

• link：超链接未访问过
• visited：访问过
• hover：鼠标移动到的状态
• active：鼠标按下
• 都有的时候要遵循爱恨法则 lv ha
• first-child ：选择第一个子元素，first-of-type：选中子元素中第一个指定类型的元素、last-child、last-of-type
• nth-child：选中执定的第几个子元素，关键词even（2N）、odd（2N+1）、nth-of-type。
• focus：元素聚焦时的样式
• checked：单选框或多选框被选中的样式

伪元素选择器：::选择器

• before：在前面生成元素
• after：在最后生成元素
• first-letter：选中元素的第一个字母
• first-line：选中元素中第一行文字
• selection：选中被用户框选的文字

选择器的组合

• 并且：直接写，例如 a[href] 标识有 href 属性的 a 元素
• 后代元素——space元素名，例如 ol li 标识 ol 元素的所有后代 li 元素
• 子元素—— >元素名，例如 ol > li 标识 ol 元素的子元素中的 li 元素
• 相邻（后面）兄弟元素—— +元素名，可以理解为+1，要求元素紧邻，否则无法选中
• 兄弟元素（后面所有，不要求相邻）—— ~元素名，可以理解为等

选择器的优先级（层叠）

重要性

1. 作者样式表中<!important>样式
2. 作者样式表
3. 浏览器默认

特殊性

• 范围越窄越特殊
• 具体：计算4位数比较（256进制）

1. 千位：内联=1，其他=0
2. 百位：等于选择器中所有ID选择器数量
3. 十位：等于选择器中所有类选择器、属性选择器、伪类元素选择器数量
4. 个位：等于选择器中所有元素选择器、伪元素选择器数量

比较源次序：代码书写靠后的胜出

2. 声明块

下面是常用的声明块：

color background-color

• 预设值名称
• rgb(0,0,0)，rgba最后一项调整透明度，新的规定中rgb与rgba等同，即可设置rgb(0,0,0,0)
  rgb取值可以为百分数，但是百分数和数值不能混用
• hex：#000000，#000（白），#f00（红），#0f0（绿），#00f（蓝），#ff0（黄），#f0f（紫），#0ff（青），#ccc（灰），#fff（黑）
• hsl(0-360,0%,0%,.5)，hsla与其等同

font-size

• px：像素，绝对单位
• em：相对单位，相对于父元素；每个元素必须又字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素，就使用基准字号（浏览器UA设置值）
• rem：相对body元素

font-weight：加粗

• normal、bold
• 数值（不常用）

font-family

• 需要用户计算机存在
• 使用逗号可添加多个备选
• 最后加<sans-serif>让计算机在前面都没有的时候自己选系统非衬线字体

font-style：斜体

• normal
• italic

text-decoration：文本修饰，可以在中间或者上下加上横线，a、s、del元素会默认带有该属性，为简写属性，可以设置样式、颜色
text-indent：缩进，1em，0，30%

text-align：元素内部文字水平排列方式

• 常用：left right center

line-height：1、1px

• 每行文本的高度、该值越大、每行文本的距离越大
• 设置行高为容器的高度（height）、可以让单行文本垂直居中
• 行高推荐直接设置为纯数字，表示相对于当前元素的字体大小

height、width：1em，1px；容器的高宽

letter-space：em、px；符间距

opacity：设置元素的透明度，取值是0~1

cursor：鼠标样式

display：设置元素盒类型，重要！

• inline：行盒
• block：块盒
• inline-block：行块盒
• none：不生成盒子
• flex：弹性容器
• grid：栅格容器

visiblility：hidden，生成盒子，只是从视觉上移除盒子，盒子仍然占据空间

background：仅用于美化，不包含内容时使用背景，包含内容应该用html的img元素

1. 可通过逗号分割放置多个背景图（只有最后一个可以设置背景色）
2. size 值必须紧随position后面，两者之间要以斜线/隔开，行向在前，纵向在后，origin在前，clip在后

• backgroud-image：url()
  取值可以为渐变：linear-gradient（angle，color，color，color）、radial-gradient
• backgroud-repeat：默认背景图自动重复
  有round、space取值，指定空余空间怎么分配
• backgroud-size：预设值，contain，cover，类似于object-fit数值或百分比
• backgroud-position：设置背景图位置，预设值left、bottom，right、top、center。
  使用位置和盒子大小可以从精灵图（雪碧图spirit）中取特定的区块，并通过JS实现某些效果
  如果只提供一个百分比数值，那么纵向默认50%
• background-attachment：控制背景图是否固定
• background-clip：控制背景到哪里为止，默认到边框盒

阴影：

• text-shadow， box-shadow；一个元素可以应用任意多个盒子投影，各投影之间以逗号分隔，insert关键字会变成内投影，不能放在长度和颜色之间，其他位置均可

样式选择流程

每个元素的所有属性都必须有值，才能在页面上显示

1. 确定声明值
2. 层叠冲突（按照选择器来进行选择）
3. 使用继承（继承父元素取值）
4. 使用默认值（此处默认值为标准规定，不是浏览器定义值，浏览器定义值在第2步进行比较）

应用

1. 强制继承：在声明值处填写inherit属性，使继承也参与1或2的选择
2. 强制默认：在声明值处填写auto属性，使默认值也参与1或2的选择

书写位置

• 内部样式表：head中添加style元素
  style元素中可以使用@import规则引入css文件，必须放在其他样式之前才会生效
• 内联样式表：元素中添加style属性
• 外部样式表【推荐】：CSS单独文件，解决重复，浏览器缓存响应加速，容易阅读维护

<link rel="stylesheet" href="./文件相对路径">
- rel属性：为relation的缩写，
* 还可取 “alternate stylesheet”，为候选样式表，仅当用户自己选择，才会使用候选样式表渲染
- media属性：指定什么情况下样式表生效，默认适用于全部媒体，可选print，screen等

盒模型

网页中所有内容都是以盒子的形式展示的

盒子类型

1. 行盒：display属性为inline的元素，在页面中不换行（例如默认情况下两个a元素会并排），常见有span、a、img、video、audio
2. 块盒：display属性为block的元素，块盒独占一行（例如默认情况下两个p元素不会在同一行）
3. 行块盒：display属性为inline-block的元素，同时具备行盒和块盒的特点，因为空白折叠应用较少
4. 弹性容器：display属性为flex的元素，用来实现单行布局
5. 栅格容器：display属性为grid的元素，用来实现二维栅格布局

盒子的参数：由内到外类似地球结构

1. 内容盒（content-box）：内容部分，参数width、height
2. 填充盒（padding-box）：填充区+内容区，padding-left、padding-right、padding-top、padding-bottom，简写属性padding
3. 边框盒（boder-box）：边框区+填充区+内容区，简写属性boder（boder-style、boder-width、boder-color），当然里面三个也是简写属性
4. 外边距（magin）：magin

行盒特性：

1. 盒子沿着内容延伸
2. 行盒不能设置宽高，应该使用字体大小、行高、字体类型，间接调整
3. 内边距（填充区）：水平方向有效，垂直方向不会实际占用空间
4. 边框：水平方向有效，垂直方向不会实际占用空间

块盒

1. 盒子占满宽度
2. 可以设置宽高，所有属性水平与垂直方向均生效

行块盒（display:inline-block）特性：

1. 不独占一行
2. 盒模型中所有尺寸都有效
3. 空白折叠，发生在行盒（行块盒）内部 或 行盒（行块盒）之间

弹性容器、栅格容器：新版排布方式

视觉格式化模型

1. 常规流（默认）：别名文档流、普通文档流、常规文档流

• 总体规则：块盒独占一行，行盒水平依次排列
• 包含块：每个盒子都有它的包含块，决定了盒子的活动范围
• 绝大多数情况：盒子的包含块，为其父元素的内容盒

块盒

1. 每个块盒总宽度，必须等于包含块的宽度
   宽度默认auto（将剩余空间吸收掉）
   margin取值可以为auto，默认为0
   width吸收能力强于margin
   若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被margin-right全部吸收
   常规流块盒包含块居中方式：定宽，然后左右margin设置为auto。
2. 每个块盒垂直方向上的auto值
   height：auto，适应内容高度
   magin：auto，表示0
3. 百分比取值
   padding、宽、margin可以取值为百分比
   以上所有百分比相对于包含块的 宽度
   高度百分比：若包含块高度取决于元素高度，百分比无效；包含块高度不取决于子元素高度，百分比相对于父元素高度
4. 上下外边距合并（行盒不会）
   两个常规流块盒，上下外边距相邻，会进行合并（父子之间也会合并），取最大值

2. 弹性布局：适用于一维内容分布（沿一个方向布置内容）

display: flex block(inline)

• 能让元素对不同屏幕尺寸和不同的显示设备做好适应准备
• 一个元素设置为弹性容器后，子元素使用弹性盒布局，其他后代元素不受影响
  弹性容器中的子元素（不论是DOM节点、文本节点还是是生成的内容），都称为弹性元素，只有空白的文本节点将被忽略；
  匿名弹性元素：对弹性容器的文本子节点来说，如果文本节点不是空的，将放在一个匿名弹性元素中，其行为与其他同辈弹性元素一样，继承在弹性容器上设置的相关弹性属性，但是不能直接使用CSS装饰，因此不能直接在匿名弹性元素上设置针对弹性元素的属性。
  弹性容器中绝对定位的子元素也是弹性元素，不过确定其尺寸和位置时，将其视作弹性容器中唯一的弹性元素。
• 各元素在主轴上排列，主轴采用书写模式设置的方向
  可靠左、靠右、居中
  可增加部分、全部弹性元素的尺寸，把多出的空间分给一个，多个元素；
  可换行（一般多行用栅格比较好）
  子元素可以相对容器或其他子元素对齐、容器底部、顶部、居中、拉伸
• 可以保持同辈元素尺寸相同
• 弹性格式化上下文中，元素之间的空白将被完全忽略，元素外边距不折叠，float及clear属性将被忽略，float对框体生成仍有影响
• 弹性元素所在的框体尺寸由flex决定，而不是确定主轴尺寸大小的属性（height或width），要素包括弹性增长因子、弹性缩减因子和弹性基准；flex优先级要低于min-width等内容值

属性

• flex-direction：控制弹性元素的主轴，与书写模式相关，书写模式有writing-mode direction text-orientation属性设定，也可以使用HTML的dir属性设置（建议用dir）
• flex-warp：默认不换行，可以决定下一行在本行前还是后
• flex-flow：上面两个属性的简写属性
• justify-content：应用于弹性容器！控制一行里的弹性元素在主轴上如何分布，默认flex-start左对齐
• align-items：应用于弹性容器！定义各弹性元素行在弹性容器的垂直轴上如何分布，默认拉伸，如果元素显示设置了垂直轴方向上的尺寸，那么弹性元素就是不可拉伸的，stretch对其尺寸没有影响
• align-self：在单个弹性元素上覆盖align-items属性的值，默认auto
• align-content：应用于弹性容器！多行情况！定义弹性容器有额外的空间时，在垂直方向上如何对齐各弹性元素行，以及空间不足以放下所有弹性元素行时从哪个方向溢出；默认stretch，
• min-width：0，默认auto，不换行的话弹性元素宽度将收缩适应弹性容器宽度
• flex：使用该属性，而不要使用单独属性！应用于弹性元素，为flex-grow、flex-shrink、flex-basis的简写属性，初始值 0 1 auto，弹性元素所在的框体尺寸由flex决定，而不是确定主轴尺寸大小的属性（height或width）
  flex-grow属性，决定弹性元素是否可伸长，对于可伸长的元素按照比例进行伸长。
  flex-shrink属性，决定弹性元素是否可压缩，对于可压缩元素按照 比例*元素宽度 进行压缩；对于元素不可压缩内容即使设置该属性也不会进行压缩
  flex-basis属性，决定可用空间，为auto时以width属性（或height属性）值为准，若属性未设置，则以内容为准content，设置值时覆盖width，不覆盖min-width，max-width等属性；
  initial：相当于0 1 auto，允许压缩
  auto：相当于1 1 auto，允许拉伸和压缩
  none：0 0 auto，不允许拉伸和压缩
  <number>：按需设置，如果只填写一个数字无单位默认为flex-grow数值
• order属性：应用于弹性元素，通过order属性可调整元素显示的位置，默认为0，负值靠前，正值靠后

3. 栅格布局：与弹性布局类似，二维布局方式 grid

概念

• 栅格容器：有块级栅格和行内栅格，相比块级容器，浮动元素不会打乱栅格容器，栅格不会移动到浮动元素下方，栅格容器的外边距不与其后代外边距折叠
• 栅格元素
• 有些属性和功能不能应用在栅格容器和栅格元素上：
  容器上的column属性
  容器没有::first-line和::first-letter伪元素
  栅格元素上的float和clear属性将被忽略，但是floate属性对栅格元素的display属性计算值有影响，display值在变成栅格元素之前计算
  vertical-align属性对栅格元素不起作用
• 栅格线、栅格轨道、栅格单元、栅格区域
• 栅格线名称会堆叠，可以重复，取用时后面加序号
• 隐式栅格：如果栅格元素超过目前栅格线，浏览器会自动创建栅格线
  跨度从显示栅格开始计数，向隐式栅格延伸，不能从隐式栅格开始计数
  不一定在显式栅格中结束
  引用栅格线的负数是相对显式栅格而言向结束端的反向计数的，而不是反向引用位于显式栅格开始端前面的隐式栅格线
  一般而言最好使用显式栅格
• 错误处理：
  开始线放在结束线之后：自动对调
  开始线和结束线都声明为跨度：结束线的值将被丢弃，替换为auto，栅格元素结束边界根据当前栅格流自动放置，开始边界则放在前一条栅格线上
• 栅格流：如果不明确指定栅格元素位置，栅格元素将放在第一个适合它的区域中，通过grid-auto-flow属性设置
• 栏距

属性

• grid-template-rows、grid-template-columns：应用于栅格容器，生成栅格线，可使用固定值、百分比、fr，通过在数值后使用中括号的方式添加名称

grid-template-rows: [start] 1em [1] 50% [2] 1fr [end]
minmax(min,max),设定最大最小值，具体取值视情况而定
minmax(min, fr)
fr弹性栅格，份数单位，可以用1fr来占满剩余空间
min-context:尽量少占据空间，能够显示内容即可，当行列都设为该值时，因为先解析列尺寸，所以相当于只有列应用该参数
max-context:宽度尽量大，以防换行
fit-content(argment)--> min(max-content, max(min-content, argment))
repeat(10,5em 1fr 1fr)：表明以后面规则重复放置轨道，总共放置10个
repeat(auto-fill,20em):填充尽可能多次，占满可用空间，auto-fit参数没有栅格元素的轨道将被剔除

• grid-template-areas：应用于栅格容器，定义简单的栅格区域，不支持非矩形形状，之后再设定大小
  会自动为四周栅格线命名，例如：header-start，header-end

gred-template-areas:
"head head head head"
"left . . right"
"footer footer footer footer";

• grid-row（grid-row-start，grid-row-end），grid-column（grid-column-start，grid-column-end）：应用于栅格元素，指定位置

grid-row: R / span R 2
grid-column: col-A 3 / col-A 4
参数可以为数字（负值表示从后往前数），栅格名（重复的需要加上标签）、span
span：表示跨多少，开始结束之前都能使用，后可接数字或者栅格名
auto：对开始线来说，通常指吓一条可用的列线或航向，对结束线来说，通常指跨一个栅格单元后的栅格线

• grid-area：应用于栅格元素：直接将栅格元素放在某个区域内

还可以用 row-start/column-start/row-end/column-end，来指定位置

• grid-auto-flow：应用于栅格容器，指定栅格流方式

row
column
dense：从起点扫描整个栅格，找到能放下栅格元素的位置就把元素放在那里

• grid-auto-row，grid-auto-column：栅格容器，设定隐式栅格尺寸
• grid：栅格容器，简写属性，用以定义栅格模板；或者设定栅格流，并为自动增加的轨道设定尺寸，二者不能同时设置
  要放在其他声明前，因为会把未声明值设置为默认值

grid:
"head head head head" 3em
"left . . right" 1fr
"footer footer footer footer" 5em /
2em 3fr minmax(10em 1fr) 2em;

grid: dense row 2em / 2em

grid:subgrid , 容器中的栅格元素根据父容器定义的栅格对齐

• gap[早期使用grid-gap](grid-row-gap, grid-column-gap)：栅格容器，提供一个绝对长度值确定栏距

grid-gap: 12px 2em

• justify-self
• justify-items
• justify- content
• align-self
• align-items
• align-content
• z-index, order：分层排序

4. 定位：手动控制元素在包含块中的精确位置，position

position

• 默认static，不定位
• relative：相对定位
• absolute：绝对定位
• fixed：固定定位

一个元素，只要position不是static，认为该元素是定位元素
定位元素会脱离文档流（常规流），相对定位除外
文档流中的元素摆放时，会忽略脱离了文档流的元素
文档流中元素自动计算高度时，会忽略脱离了文档流的元素

相对定位

• 不会导致元素脱离文档流，最多能让元素在原位置偏移
• 可选属性：left、right、top、bottom
• 盒子偏移不会对其他盒子造成任何影响

绝对定位

• 宽高为auto，适应内容
• 包含块变化：找祖先中第一个定位元素，该元素的填充盒为其包含块，若找不到，则包含块为整个网页（初始包含块）

固定定位

• 其他情况和绝对定位完全一样
• 包含块不同：固定为视口（浏览器的可视窗口）

居中方式和块盒相似，不过可以通过设置margin垂直居中

多个定位元素重叠

• 堆叠上下文
• 设置z-index，通常情况下，该值越大，越靠近用户
• 只有定位元素设置z-index有效
• z-index可以是负数，如果是负数，遇到常规流、浮动元素时，会被覆盖

常见场景

• 二级菜单
• 弹出层
• 轮播图

5. 浮动（文字环绕，横向排列）

修改float属性

1. left：左浮动
2. right：右浮动

当元素浮动之后display属性默认变成block，包含块也为父元素内容盒

盒子尺寸

1. 宽度为 auto 时，适应内容宽度
2. 高度为 auto 时，与常规流一致
3. magin为 auto 时，为0
4. 边框、内边距、百分比设置与常规流相同
5. 浮动元素的四周外边距不折叠

盒子排列

1. 左（右）浮动的盒子靠左（右）排列
2. 浮动盒子在包含块中排列时，会避开常规流块盒
3. 常规流块盒在排列时，无视浮动盒子
4. 行盒在排列时，会避开浮动盒子（如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字，该行和叫做匿名行盒）

高度坍塌：常规流盒子的自动高度，在计算时，不会考虑浮动盒子，所以要用到clear参数

• 默认值：none
• left：清除左浮动，该元素必须出现在前面所有左浮动盒子的下方
• right：清除右浮动，该元素必须出现在前面所有右浮动盒子的下方
• both：清除左右浮动

视觉效果

1. 变形

• 范围框：受CSS控制的元素，其范围是边框框，即元素的外边界。
• 变形元素有自己的堆叠上下文，经过缩放的元素可能比变形前小或大，不过元素在页面上所占的空间于变形前保持不变
• 有顺序性，变形函数从最左边第一个开始，到最后一个结束依次处理变形，顺序不一样结果就可能不一样
• 有多个变形函数时，即使有一个函数时无效的，整个值都将失效
• 变形不叠加，后者会覆盖前者，
• 使用过渡或动画添加变形效果的情况可以叠加

属性

• transform，适用于除span、链接等“基元行内”框之外的所有元素

平移：可取百分比或具体值
- translate（translateX translateY）：若只提供一个参数，Y默认为0
- translate3d（X Y Z）：三个参数必须都提供
缩放：可取正值数字
- scale（X Y）：若只提供一个参数，X和Y均使用该参数
- scale3d（X Y Z）：仅当元素有深度时，才可以缩放，XY轴旋转可以产生深度
旋转：可取数字，角度单位（deg、grad、rad、turn），超出常规值范围之后将转化为范围内值（对于动画来说时有区别的）
- rotate（Z）：水平面进行旋转
- rotate3d（num，num，num，angle）：前三者确定一个向量、然后绕该向量旋转angle度
倾斜：skew、skewX、skewY，取值为角度
- skew与X，Y不同，
- skew若只提供一个值，Y值默认为0

• transform-origin：变形起始位置设定，可取百分比（相对于对应轴和元素的尺寸计算）；可取长度绝对值，从左上角为起始点，默认为50% 50%
• transform-style：在3D空间内呈现元素，默认flat，可取preserve-3d
• perspective：可取绝对长度，或者none

Apple指出，
小于300px的视域值得到的效果特别失真，
大于2000px像素的值失真“十分温和”，
而500px到10000px之间的值产生“适中的视域”

• perspective-origin：与transform-origin类似
• backface-visibility：处理背面，取值可以为visible或hidden，使用该属性可以做出反面显示文字的效果

2. 过渡

在一段时间内从一个值变到另一个值，属性需要支持动画，有中间值；过渡的目的是增强效果，不能牺牲用户体验

• 通常写在稳态中，假如写在hover等瞬态之中时，因为鼠标离开时hover失效，会导致鼠标移开无过渡
• 祖辈和后代元素上都有过渡效果时要小心，过渡的属性变化后立即过渡祖辈或后代节点可能导致意料之外的后果。
• 只有当下不受CSS动画影响的属性才能过渡
• 过渡结束会触发transitionend事件，中断不触发。（如果属性返回初始值，又触发一次transitionend事件。这次事件在过渡开始时就触发即使原方向的过渡还未结束？）
  事件有三个属性
  propertyName：结束过渡的CSS属性的名称
  pseudoElement：应用过渡效果的伪元素
  elapsedTime：过渡持续的时间

属性

• transition

nav ul li {
    transition: transform 200ms ease-in 50ms; opacity 200ms ease in 50ms
}
- transition-property：限制受影响的属性，默认all，多个属性需用逗号分隔，一一列出。all必须放在首位
* 禁用过度效果可将其设置为none或者延迟时间设置为0
- transition-duration：持续时间，默认0秒，多时间可逗号分隔
- transition-timing-function：调整过渡时序，默认ease，
* 可选linear、ease-in、ease-out、ease-in-out，或使用cubic-bezier（）自定义贝塞尔曲线
* 可选步进时序函数：steps（n，start/end），分N步阶梯变化
- transition-delay：延迟过渡，默认0秒，立即开始过渡，可取正或者负的时间单位
* 为负值时过渡将从中间开始，负值绝对值超过duration时属性值瞬间变化，不触发transitionend事件

3. 动画

• 设置关键帧动画：动画名不要使用关键字，一般使用百分值定义关键帧，也可以使用from代表0%，to代表100%
• 如未指定0%关键帧，用户代理将使用要应用动画效果的属性的原始值构建一个0%的关键帧；如未定义100%关键帧，而且没有应用其他动画，浏览器将使用没有动画效果时的属性值构建一个虚设的100%关键帧
• 不支持动画的属性直接被忽略，其他相同属性的关键帧若发生冲突，将层叠
• 某些属性值初始为auto、none，需要设定初始值，否则可能导致动画失效
• 可以通过appendRule(‘50% {top: 50%}’)、deleteRule('50%‘)、添加删除关键帧，通过findRule(’25%‘, '75%')可获取关键帧的内容
• 动画包含animationstart、animationend、animationiteration三个事件，animationiteration事件仅在动画多次迭代时触发，且其不能与animationend事件同时触发，即使一次迭代也没有，animationstart事件依然触发
• 在播放动画的过程中改变动画属性的值对动画没有影响，但是删除或增加animation-name会删除或重新加载动画
• 结合setInterval或setTimeout使用较多
• 如果属性值是以关键帧动画形式改变的，应用到元素上时，属性及其值好像是通过行内样式表添加的一样（动画覆盖常规的规则，但是能被带有!important的规则覆盖，动画声明块中不能使用!important。
• CSS动画在用户界面（UI）线程中优先级最低

建议动画可选择去除：

@media（prefers-reduced-motion）{
    * {animation：none !important; transition none !important;}
}
@media not (prefers-reduced-motion){
    所有动画和过渡
}

属性

@keyframes change_bgcolor{
    20%,
    45%{ background-color: green;}
    75%{ background-color: blue;}
}

• animation：duration写在delay前，名称建议写在最后

animated：{
    animation： 200ms，ease-in，50ms，1 ， normal，running，forwards，slidedown
}
- animation-name：可逗号分隔，如果其中一个失效会继续应用其他动画
* 为相同属性设置的多个动画在同一时刻播放时，起作用的是后列出的动画；
* 当最后的动画没有0%/100%关键帧时，会从前面的动画进行查找应用
- animation-duration：动画持续一次的时间，单位s或ms，默认0s，以逗号分隔
* 如果其中又一个无效值，整组声明均失效；
* 会自动重复使用
- animation-iteration-count：动画迭代次数，默认为1，可取infinite无限重复
* 如果不是整数，将在最后一次循环中途结束
- animation-direction：动画方向，可取normal、reverse、alternate、alternate-reverse
* alternate指第一次从0%到100%，第二次从100%到0%
- animation-delay：延迟，可取正值或负值，与过渡类似
- animation-timing-function：改变动画内部时序，默认值ease，同过渡
* 可以添加在关键帧中，使不同区间使用不同时序函数
- animation-play-state：暂停和继续播放动画，取值默认running，可取paused
- animation-fill-mode：动画的填充模式，动画播放结束后是否继续使用原来属性值，默认none，可取both或以下值：
* forwards：动画结束后结束帧一直应用，
* backwards：添加动画后0%立即应用

其他待整理

• sans-serif：非衬线字体，适合网页显示，衬线如宋体适合打印的
• 继承：当层叠后属性值仍未确定时，继承父元素属性（并非所有属性都可继承，一般boder和多数盒模型的属性不会继承）
• white-space：nowrap
• object-fit：调整适应方式
• 默认图片是自适应的，若只设置一个参数，会保持纵横比
• css元素主要分为可替换元素（置换元素，ex：img、input），与非可替换元素（），对于可替换元素，CSS无法完全控制其样式
• 属性大都用空格分隔，也有用逗号分隔的

• 对于属性选择符来说，元素自身必须有lang属性才能匹配，而:lang伪类能比配设定了语言的元素的后代
• 通常背景样式不会传递，但应用到body元素上的背景样式可以传给html元素，html是文档的根元素，仅发生在body元素定义了背景而HTML没有定义背景的情况下
• unset: 将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial一样
• 在这里最好也解释下内部 和 外部 显示类型。如上所述， css的box模型有一个外部显示类型，来决定盒子是块级还是内联。同样盒模型还有内部显示类型，它决定了盒子内部元素是如何布局的。
• 在开发网站的时候，你应该一直把溢出的问题挂在心头，你应该用或多或少的内容测试设计，增加文本的字号，确保你的CSS可以正常地协调。
• 下划线是使用 border-bottom 创造的, 而不是 text-decoration，有一些人喜欢这样，因为前者比后者有更好的样式选项， 并且绘制的位置会稍微低一点，所以不会穿过字母 (比如 字母 g 和 y 底部)
• fr单位分配的是可用空间而非所有空间，所以如果某一格包含的内容变多了，那么整个可用空间就会减少，可用空间是不包括那些已经确定被占用的空间的。
• 自定义变量 --变量名，使用var（）调用，作用域在一定范围内，最好使用support属性判断支持后使用
• 渐变生成器：https://cssgradient.io/

• 在浏览器中使用新元素：解决方法是在DOM中创建元素，让浏览器知道元素的存在，例如 使用下述JavaScript让ie8知道 main的存在：
  document.createElement('main')

可替换元素（img） 和 非可替换元素

• 大部分元素页面上显示的结果取决于元素内容，称为非可替换元素
• 少部分元素页面上显示的结果取决于元素属性，称为可替换元素
• 绝大部分可替换元素为行盒* 厂商前缀（了解而已）：浏览器厂商通过它标记实验性或专属（或二者兼具）的属性、值或者其他内容
  -epub-：国际数字出版论坛指定的ePub格式
  -moz-：基于Mozilla的浏览器
  -ms-：微软Inernet explorer
  -o-：基于Opera的浏览器
  -webkit-：基于WebKit的浏览器（safari、chrom）
• 可替换元素可以理解为行块盒

浏览器解析：解析组成文件的顺序：当浏览器向服务器发送请求获取 HTML 文件时，HTML 文件通常包含 "link" 和 "script" 元素，这些元素分别指向了外部的 CSS 样式表文件和 JavaScript 脚本文件。了解这些文件被浏览器解析的顺序是很重要的：

• 浏览器首先解析 HTML 文件，并从中识别出所有的 "link" 和 "script" 元素，获取它们指向的外部文件的链接。
• 继续解析 HTML 文件的同时，浏览器根据外部文件的链接向服务器发送请求，获取并解析 CSS 文件和 JavaScript 脚本文件。
• 接着浏览器会给解析后的 HTML 文件生成一个 DOM 树（在内存中），会给解析后的 CSS 文件生成一个 CSSOM 树（在内存中），并且会编译和执行解析后的 JavaScript 脚本文件。
• 伴随着构建 DOM 树、应用 CSSOM 树的样式、以及执行 JavaScript 脚本文件，浏览器会在屏幕上绘制出网页的界面；用户看到网页界面也就可以跟网页进行交互了。

规则

• 不允许注释嵌套
• CSS中可以包含HTML注释
• mdn代码规范示例：https://developer.mozilla.org/en-US/docs/MDN/Guidelines/Code_guidelines/CSS
• CSS结构格式：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Organizing

背景图：背景图是属于CSS的概念，img元素属于HTML的概念
一般当图片属于网页内容时，必须使用img元素
一般当图片仅用于美化页面时，必须使用背景图

方法

• @import ：引入其他样式表，必须放在CSS文件，或者style最前面？
• @media：设置CSS生效的媒体条件

@media projection{
    body { background : yellow; }
}

• @supports 支持则应用，不支持则跳过

@supports (color : black) {
    body { color: yellow; }
}

• @keyframes：动画

响应布局：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design

• repeat(auto-fill, minmax(200px, 1fr))

表单

在一些浏览器中，表单元素默认不会继承字体样式，因此如果你想要确保你的表单填入区域使用body中或者一个父元素中定义的字体，你需要向你的CSS中加入这条规则。为了保证统一，将所有元素的内外边距均设为0，然后在单独进行样式化控制的时候将这些加回来。除了上面提到的规则以外，你也应该在<textarea>上设置overflow: auto 以避免IE在不需要滚动条的时候显示滚动条：

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  box-sizing: border-box;
  padding: 0; margin: 0;
}
textarea {
  overflow: auto;
} 

将以下 CSS 应用于它们会删除系统级样式。

input {
  -webkit-appearance: none;
  appearance: none;
}

• 表单样式可调整性比较差，有的时候甚至会自己制作元素外观

表单元素样式

1. 重置表单元素样式
2. 设置textarea是否允许调整尺寸（both默认都可以调整、none不能、horizontal水平可以、vertical垂直方向可以
3. 文本框边缘到内容的距离
4. 控制单选和多选的样式