参考资料
CSS 概述
层叠样式表 (Cascading Style Sheets)
- 用于解决内容与表现分离的问题
- 样式定义如何显示 HTML 元素，通常存储在样式表中
- 多个样式定义可层叠为一个
样式表
- 内部样式表通常包含在
<style>标签内，一个<style>标签就表示一个内部样式表
- 外部样式表通常存储在 CSS 文件中，进而实现HTML文档与CSS样式的分离
HTML嵌入CSS样式
行内样式：style属性
- 把 CSS 样式直接放在代码行内的标签中
- 一般都是放入标签的
style属性中
- 由于行内样式直接插入标签中，故是最直接的一种方式，同时也是修改最不方便的样式
内嵌式：<style> 标签
- 将 CSS 写在网页源文件的头部即在
<head>和</head>之间，通过使用 HTML 标签中的<style>标签将其包围
- 其特点是该样式只能在此页使用，解决行内样式多次书写的弊端
链接式：<link> 标签
- 通过 HTML 的
<link>标签，将外部样式表文件链接到 HTML 文档中
- 将 HTML 文档和 CSS 文件完全分离，实现结构层和表示层的彻底分离，增强网页结构的扩展性和 CSS 样式的可维护性
导入样式
- 使用
@import命令导入外部样式表
HTML渲染顺序
CSS 词法与数据模型
CSS 语法
一个属性（property）与值（value）的键值对被称为声明（declaration）
- 属性是一个标识符，用可读的名称来表示其特性。
- 值描述了浏览器引擎如何处理该特性。每个属性都包含一个有效值的集合，它有正式的语法和语义定义，被浏览器引擎实现。
- 大小写不敏感；属性与值之间以英文冒号
:（U+003A）隔开
- 声明无法解析时会跳过错误声明
声明块（declaration block）
- 声明可以按照块的形式被组合，声明之间使用英文分号
;（U+003B）隔开
- 声明块以英文左大括号
{（U+007B）开始，以英文右大括号}（U+007D）结束
- 声明块可能为空，声明块之间可以嵌套
在声明块前面放置选择器（selector）
- 选择器用来选择页面多个元素的条件
- 一对选择器与声明块称为规则集（ruleset），常简称为规则（rule）
示例
层叠 cascade、专一性 specificity 和继承 inherit
- 简化版规则
- 相互冲突的声明将按以下顺序适用，后一种声明将覆盖前一种声明：
- 用户代理样式表中的声明（例如，在没有设置其他样式时使用浏览器的默认样式）
- 用户样式表中的常规声明（由用户设置的自定义样式）
- 作者样式表中的常规声明（由web开发人员设置的样式）
- 作者样式表中的
!important声明 - 用户样式表中的
!important声明
专一性（specificity）
- 与层叠对应，决定在发生冲突的时候应该使用哪条规则
层叠（cascade）
当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。
有三个考虑因素需要（从重要性高到低排序）：
重要程度 importance
!important可以用来覆盖所有上面所有优先级计算。
优先级 specificity
- 不同类型的选择器有不同的分数值，把这些分数相加就得到特定选择器的权重
- 在进行计算时不允许进行进位。无论多少个类选择器的权重叠加，都不会超过一个 ID 选择器。
- 一个选择器的优先级可以说是由四个部分相加：
- 千位： 如果声明在 style 的属性（内联样式）则该位得一分。这样的声明没有选择器，所以它得分总是1000。
- 百位： 选择器中包含ID选择器则该位得一分。
- 十位： 选择器中包含类选择器、属性选择器或者伪类则该位得一分。
- 个位：选择器中包含元素、伪元素选择器则该位得一分。
- 多样式表优先级
- 作者样式表 > 用户样式表 > 浏览器默认样式表
- Inline style > Internal style sheet = External style sheet > Default
- 在CSS3中，内部样式表和外部样式表之间的优先级取决于每个样式表中使用的选择器的优先级
- 如果内部样式表中的选择器与外部样式表中的选择器具有相同的优先级，则内部样式表中的选择器将优先
- 对于多个外部样式表，它们的优先级取决于它们在HTML文档中引用的顺序
资源顺序 order
- 后面的规则覆盖前面的规则，直到最后一个开始设置样式
- 如果内部样式表中的选择器与外部样式表中的选择器具有相同的优先级，但外部样式表在内部样式表的后面，则适用外部样式表
继承（inherit）
- 一些设置在父元素上的css属性是可以被子元素继承的，有些则不能
- 如border, margin, padding, background等属性是不可继承的属性
控制继承的四个属性值
inherit：设置该属性会使子元素属性和父元素相同
initial：将属性的初始值应用于元素- 即重置为CSS规范定义中的默认值（不是浏览器定义的默认值）
- 如果浏览器默认样式中未设置且该属性是自然继承的，那么会设置为
inherit
unset：将属性重置为自然值- 如果该属性默认是继承的，则相当于
inherit；否则相当于initial - 由于
span元素的border属性被设置为unset，它将重置为默认值 - 由于
border属性默认不继承，所以相当于设置为initial，即没有边框
最终的渲染结果将是一个蓝色文本，其中包含一个红色文本，但没有边框
revert：重置为用户代理（浏览器）的默认值，除非存在用户样式表，在这种情况下使用该样式表- 只有很少的浏览器支持
重设所有属性值
- CSS 的 shorthand 属性
all可以用于同时将这些继承值中的一个应用于（几乎）所有属性。
- 它的值可以是四个属性值中任意一个。这是一种撤销对样式所做更改的简便方法，以便回到之前已知的起点。
选择器 selector
- 使用选择器列表时，任何一个选择器无效 (存在语法错误)，那么整条规则都会被忽略
- 使用
,分割多个选择器可以将一组选择器适用同一个CSS样式
类型列表
通配选择器 *
- 匹配任意类型的 HTML 元素
- 在 CSS3 中，通配选择器 (
*) 可以和命名空间组合使用 ns|*- 会匹配ns命名空间下的所有元素|*- 会匹配所有命名空间下的所有元素|*- 会匹配所有没有命名空间的元素
类型选择器 tag、类选择器 .和ID选择器 #
标签属性选择器 [attr [operator value] [i]]
- 匹配那些具有特定属性或属性值的元素
attr匹配存在 attr 属性的元素
运算符列表
=属性值等于value
~=属性值不等于value
|=属性值等于value或前缀包含value-
^=前缀包含value
$=后缀包含value
*=至少有一个value
- 如果想在大小写不敏感的情况下匹配属性值的话，可以在闭合括号之前使用
i值
关系选择器 , >, ~, +
后代(ancestor)选择器（ ）
- 被第二个选择器匹配的元素只需具有与第一个选择器匹配的祖先（父母，父母的父母，父母的父母的父母等）即可
子代(parent)选择器（>）
- 被第二个选择器匹配的元素必须是被第一个选择器匹配的元素的直接子元素
通用兄弟(general sibling)选择器（~）
- 同属于一个父级的子元素，匹配第二个选择器位于第一个选择器后的所有元素（位置无须紧邻于第一个元素）
邻接兄弟(adjacent sibling)选择器（+）
- 同属于一个父级的子元素，匹配紧跟在第一个元素之后的第二个元素
伪类 :class
- 伪类是选择器的一种，用于选择处于特定状态的元素
常用的伪类
:active- 选择被激活的元素
:checked- 选择被选中的表单元素
:disabled- 选择被禁用的表单元素
:empty- 选择没有子元素的元素
:enabled- 选择启用的表单元素
:first-child- 选择作为其父元素的第一个子元素的元素
:first-of-type- 选择作为其父元素的第一个指定类型子元素的元素
:focus- 选择获得焦点的表单元素
:hover- 选择鼠标悬停在其上的元素
:in-range- 选择值在指定范围内的表单元素
:invalid- 选择无效值的表单元素
:last-child- 选择作为其父元素的最后一个子元素的元素
:last-of-type- 选择作为其父元素的最后一个指定类型子元素的元素
:link- 选择未访问过的链接
:not(selector)- 选择不匹配给定选择器的所有元素
:nth-child(n)- 选择作为其父元素第n个子元素的所有元素
:nth-last-child(n)- 选择作为其父元素倒数第n个子元素的所有元素
:nth-of-type(n)- 选择作为其父元素第n个指定类型子元素的所有元素
:nth-last-of-type(n)- 选择作为其父元素倒数第n个指定类型子元素的所有元素
:only-of-type- 选择作为其父亲唯一指定类型子代的所有元素
伪元素 ::element
- 伪元素是通过CSS给HTML添加一个元素
- 这个元素在文档树中是找不到的
- 伪元素被当做CSS的样式来进行展现，用法和普通的元素用法是一样的
伪元素
::before：在被选中元素里面、元素现有内容之前插入内容
- 和
content属性一同使用，使用CSS将内容插入到你的文档中
::after：在被选中元素里面、元素现有内容之后插入内容
- 和
content属性一同使用，使用CSS将内容插入到你的文档中
::first-letter：选择每个元素的首字母
::first-line：选择每个元素的首行
::selection：选择用户已选取的元素部分
@规则 at-rules
- 用于指示CSS如何执行特定操作
@规则语法
以@符号开头，后跟一个标识符，并包括直到下一个分号的所有内容
@identifier (RULE);
- at 规则之间可以嵌套
条件规则
- 定义一组基于设备的功能或样式表所应用的文档来决定是否应用的规则
@media：定义媒体查询，根据设备的显示能力应用不同的样式。@document：定义条件规则，仅在文档满足指定条件时应用样式。@supports：定义条件规则，仅在浏览器支持指定的CSS特性时应用样式。
通过逻辑运算符only, and, or和not来组合多个条件
- 如果条件评估为真，则组内的所有语句都将应用
@font-face：定义自定义字体
- 字体能从远程服务器或者用户本地安装的字体加载
@font-face 语法
font-family：所指定的字体名字将会被用于 font 或 font-family 属性
src：远程字体文件位置的 URL 或者用户计算机上的字体名称- 提供了 local() 函数，从用户本地查找指定的字体名称，并且找到了一个匹配项，本地字体就会被使用。否则，字体就会使用 url() 函数下载的资源
font-variant,font-stretch,font-weight,font-style：控制字体适用的样式范围- 默认值均为normal
unicode-range：指定字体支持的字符集范围
@font-face 示例
- 每个
@font-face只支持适用于一种对应样式的元素 - 如果只定义了斜体和粗体，仍需要额外定义斜粗体才能正确适用
- 如果某种 Web 字体没有粗体、斜体或粗斜体版本，而我们又对文本添加了这些样式，浏览器就会显示伪样式（浏览器实现的字体版本）
@media：定义媒体查询
- 针对不同的设备和媒体类型定义不同的样式规则
媒体查询 @media 语法
- 可以通过逻辑运算符
only,and,or和not来组合多个条件
媒体类型 mediatype
- 描述设备的一般类别，可选
可选值
- all：适用于所有设备
- print：适用于在打印预览模式下在屏幕上查看的分页材料和文档
- screen：用于屏幕
媒体特性 (media feature)
- 描述了用户代理、输出设备或环境的具体特征
常用的 CSS 媒体特性
- width：指定视口的宽度，包括滚动条的宽度，可以使用 min-width 和 max-width 限定最小和最大宽度
- height：指定视口的高度，可以使用 min-height 和 max-height 限定最小和最大高度
- device-width：指定设备的物理宽度，通常用于移动设备
- device-height：指定设备的物理高度，通常用于移动设备
- orientation：指定设备的方向，可以是 landscape（横向）或 portrait（纵向）
- aspect-ratio：指定视口的宽高比，例如 16/9
- device-aspect-ratio：指定设备的宽高比，例如 16/9
- resolution：指定屏幕分辨率，通常用于打印样式表
- color：指定设备的颜色位数，例如 8、16、24 或 32
- grid：指定设备是否支持网格布局
其余常见的@规则
@charset：定义样式表使用的字符集
@import：导入外部样式表
@namespace：定义XML命名空间
@supports：定义条件规则，仅在浏览器支持指定的CSS特性时应用样式
@document：定义条件规则，仅在文档满足指定条件时应用样式
@page：定义打印文档时应用的样式
@keyframes：定义CSS动画序列中的中间步骤
@counter-style：定义列表计数器样式
盒模型 box model
基础盒模型
- Content box: 这个区域是用来显示内容； 大小通过
width和height设置
Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置
- 进一步分为padding-top，padding-right，padding-bottom，padding-left
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
- 有四个边框，每个边框都有样式、宽度和颜色
Margin box: 盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。
- 进一步分为margin-top，margin-right，margin-bottom，margin-left
替代盒模型
- 替代盒模型中，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框盒（Border box）填充部分
- 默认浏览器会使用标准模型，通过设置
box-sizing: border-box来使用替代模型
- 常见的替代元素包括
<img>、<video>、<audio>、<canvas>、<iframe>
外边距折叠
- 块级元素的上外边距 (margin-top) 和下外边距 (margin-bottom) 在某些情况下会折叠为单个边距，其大小为单个边距的最大值
- 即使某一外边距为 0，这些规则仍然适用
- 如果参与折叠的外边距中包含负值，折叠后的外边距的值为最大的正边距与最小的负边距（即绝对值最大的负边距）的和
- 如果所有参与折叠的外边距都为负，折叠后的外边距的值为最小的负边距（即绝对值最大的负边距）的值。这一规则适用于相邻元素和嵌套元素
有三种情况会形成外边距重叠
同一层相邻元素之间
- 除非后一个元素加上 clear-fix 清除浮动
没有内容将父元素和后代元素分开
- 当一个父元素没有上边框、上内边距和上内联内容时，它的上外边距会和它的第一个子元素的上外边距合并
- 当一个父元素没有下边框、下内边距和下内联内容时，它的下外边距会和它的最后一个子元素的下外边距合并
空的块级元素
- 当一个块元素上边界margin-top 直接贴到元素下边界margin-bottom时也会发生边界折叠
外边距重叠示例
避免外边距重叠
- 使用内边距、边框或内联元素来隔开元素的外边距
- 设定了
float属性或position=absolute属性的元素不会产生外边距重叠行为
显示类型 display type
- 外部显示类型决定盒子是块级（block）还是内联（inline）
- 内部显示类型决定盒子内部元素是如何布局的
不同的外部显示类型在 页面流 和 与元素之间的关系 方面表现出不同的行为
块级盒子（block-box）
- 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
- 每个盒子都会换行
width和height属性可以发挥作用
- 内边距（padding）, 外边距（margin） 和 边框（border） 会将其他元素从当前盒子周围“推开”
内联盒子（Inline-box）
- 盒子不会产生换行。
width和height属性将不起作用。
- 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于
inline状态的盒子推开。
- 水平方向的内边距、外边距以及边框会被应用且会把其他处于
inline状态的盒子推开。
块格式化上下文（Block Formatting Context，BFC）
- 一个Web页面渲染的概念，是用来管理文档流中块级盒子的一种机制
- 每个BFC都是一个独立的渲染区域，它内部的元素布局不会影响到外部元素，同时它还具有一些特殊的规则和行为，可以解决一些常见的布局问题
- 如清除内部浮动、排除外部浮动阻止被覆盖、实现多列布局等
BFC 特性
- 垂直方向的边距重叠会被消除，即外边距折叠
BFC的区域不会与浮动元素重叠
- 如果一个元素的
float属性值为left或right，那么它将会和相邻的元素在同一行并且尽可能靠左或靠右对齐，但它不会在BFC中覆盖其他元素
BFC可以包含浮动元素并使其高度自适应
- 如果一个BFC包含了浮动元素，那么BFC的高度将会包括这些浮动元素的高度
BFC内部的元素与外部隔离
- 这意味着BFC可以防止元素因为浮动、绝对定位等特殊定位方式而产生的布局问题
创建 BFC
浮动元素
float属性不为none
绝对定位元素
position属性值为absolute或fixed
更改显示类型或布局
- 块级元素
display属性值为flow-root
- 行内块级元素
display属性值为inline-block - 相当于
inline flow-root
- 表格相关
display属性值为table,table-row,table-row-group,table-header-group,table-footer-group,table-cell,inline-table,table-caption
- 弹性元素
display属性值为flex,inline-flex
- 网格元素
display属性值为grid,inline-grid
overflow属性值不为visible,clip的块级元素
contain属性值为layout,content,paint的元素
使用display: inline-block在内联和块之间提供了一个中间状态
- 设置
width和height属性会生效
padding,margin, 以及border会推开其他元素
- 但是，它不会跳转到新行，并避免重叠
流 flow 与布局 layout
正常文档流 Normal Flow
- 在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式
- 块级元素按照文档流从上到下依次排列，每个块级元素独占一行，而内联元素则从左到右排列
- 在此过程中，元素的大小由其内容和样式决定，如果内容超出了容器的大小，浏览器将自动换行
浮动 float 与定位 positioning
- 浮动会使元素脱离正常文档流，向左或向右移动，直到它的外边缘碰到包含块或另一个浮动元素的边缘，浮动元素后面的内容会围绕它流动
- 定位能够让我们把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置
- 定位 (positioning) 并不是一种用来给你做主要页面布局的方式，它更像是让你去管理和微调页面中的一个特殊项的位置
- float属性不为 none 和设置 position: absolute 或 position: fix 的元素都会脱离正常文档流
弹性布局 Flex
参考资料
一种用于按行或按列布局元素的一维布局方法
- 一次只能处理一个维度上的元素布局，一行或者一列
- 网格布局可以同时处理行和列上的布局
轴线 axis 与其起始线 cross-start 和终止线 cross-end
- flexbox 的特性是沿着主轴或者交叉轴对齐之中的元素
主轴（main axis）由 flex-direction 定义，交叉轴（cross axis）垂直于它
- 主轴的开始和结束分别称为 main-start 和 main-end
- 交叉轴的开始和结束分别称为 cross-start 和 cross-end
flex-direction 可选值
row
row-reverse
- column
- column-reverse
- 选择了
row或者row-reverse，主轴将沿着 inline 方向延伸；选择了column或者column-reverse，主轴将沿着 block 方向延伸
row 受弹性容器的全局属性 dir 影响，如果 dir="ltr"，则起始线在左边，终止线在右边，对应 reverse 值则相反；如果 dir="rtl"，则起始线在右边，终止线在左边
弹性容器和弹性项
- 弹性容器是一个具有 display: flex 或 display: inline-flex 属性的元素
弹性盒子的默认特性
弹性项在主轴上排列为一行
- 弹性容器
flex-direction属性的初始值是row
- 弹性项从主轴的起始线开始排列
- 弹性项不会在主轴方向拉伸（flex-grow: 0），但是可以缩小（flex-shrink: 1）
- 弹性项被拉伸来填充交叉轴大小
- 弹性容器
flex-basis属性为auto
- 弹性容器
flex-wrap属性为nowrap
控制弹性项在主轴上的伸缩
可用空间 free space
- flex-basis 定义了各 flex 项在主轴上的初始大小，而 flex 容器内未被 flex 项占用的空间就是正可用空间
- 如果 flex 项的自然尺寸之和比 flex 容器还大，那就会产生负的可用空间
速记属性 flex
- 将属性 flex-grow, flex-shrink, flex-basis 简写为一个属性
- 设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间
flex-basis 指定了 flex 项在主轴方向上的初始大小
- flex-basis 属性在任何空间分配发生之前初始化弹性元素的尺寸
- 如果没有给元素设定尺寸，
flex-basis的值采用元素内容的尺寸
flex-grow 和 flex-shrink 规定了 flex 项在 flex 容器中分配剩余空间时的相对比例
flex-grow 指定了 flex 项主尺寸的增长系数
- 只有在 flex 容器的可用空间大于0即可用空间为正时才会起作用
flex-shrink 指定了 flex 项主尺寸的收缩系数
- 只有在 flex 容器的可用空间小于0即可用空间为负时才会起作用
- 如果所有的兄弟项目都有相同的系数，那么所有的项目将剩余空间按相同比例分配，否则将根据不同的 flex-grow 或 flex-shrink 定义的比例进行分配
创建额外的 flex 容器以包装 wrap 无法容纳的 flex 项
- 通过设置 flex-wrap 属性为 wrap 或 wrap-reverse 来换行/列显示当前主轴无法容纳的 flex 项
- 新创建的每一行/列都是独立的容器，任何空间分布都将在对应行列上发生，而不影响其他行列
- 对于那些不是 wrap-reverse 的值，cross-start 方向等同于当前写作模式的 inline-start 或 block-start 方向（取决于哪个在交叉轴上），cross-end 方向与 cross-start 方向相反；cross-end 为确定的 cross-start 的另一端
- 当 flex-wrap 为 wrap-reverse 时，cross-start 和 cross-end 方向交换
弹性项在主轴和交叉轴上的对齐
- 对齐与 flow 相关，会受到书写模式 write-mode 和脚本方向 direction 的影响
交叉轴：通过 align-* 属性控制对齐
- 分别是 align-items, align-self, align-content
- align-items 属性控制单个容器，规定其中的项在对应轴上的对齐方式
- align-self 属性控制项在对应轴上的对齐方式，会覆盖容器的 align-items 属性指定
- align-content 属性同时控制多个容器，规定各个容器在对应轴上的对齐方式
主轴：通过 justify-content 属性控制对齐
- justify-items, justify-self 属性对 flex 容器无效
- justify-content 属性定义如何分配顺着 flex 容器主轴（或者 grid 行轴）的元素之间及其周围的空间
通用的属性值 stretch, center, flex-start, flex-end
- align-* 都可以用 baseline 对齐
- align-self 与 align-items 可选属性值基本一致，除了多一个默认值 auto
- align-content 和 justify-content 可用属性值还有
space-between,space-around,space-even
弹性项的排序
- 项目在容器中的顺序与 flow 相关，受到书写模式 write-mode 和脚本方向 direction 的影响
- 在不更改书写模式和脚本方向的情况下，可以使用 flex-direction 更改排序方向，如 row-reverse, column-reverse
- 会调转文本顺序
- 也可以使用 order 属性更改项目的逻辑顺序
网格布局 Grid
参考资料
- 一种二维布局系统，可以让开发人员在行和列上对齐元素
网格布局的特性
- 使用固定的轨道尺寸或百分比、可变长度
<flex>创建网格
- 使用行号、行名或者标定一个网格区域来精确定位元素
- 必要时自动创建额外的轨道（行或列）来包含元素
- 可以控制放置到网格区域中的物体对齐，以及整个网格如何对齐
- 网格单元格可以彼此重叠，通过 z-index 属性来控制重叠区域显示的优先级
网格容器、网格轨道、网格线与网格单元、网格区域
- 通过 display: grid 或 display: inline-grid 来创建网格容器，其直代子元素成为网格项
轴线与网格线 grid line
网格布局下有两条轴线，分别是行（inline）轴和块（block）轴
- 行（inline）和块（block）的概念来自于逻辑属性中的行向和块向
网格线是网格单元的分界线，分为水平和垂直两个方向
- 水平网格线和垂直网格线分别与行轴和块轴平行
在定义网格轨道时可以为网格线命名
- 在网格轨道尺寸 track-size 两侧定义对应网格线名称，用方括号包裹，一个方括号内可以放入多个网格线名称
- 网格线名称为
<custom-ident>类型 - 如
[sidebar-end main-start]
- 使用 repeat 函数定义多个模式重复的轨道时放入网格线名称会得到具有相同名称的网格线，可以通过网格线名称加序号进行区分
- 如
repeat(12, [col-start] 1fr) - 如
repeat(4, [col1-start] 1fr [col2-start] 3fr);
- 使用 grid-template-areas 创建网格区域时会隐式定义网格线，以对应区域名称命名并添加 -start, -end 后缀
- 如
[hd-end main-start]
网格线的序号顺序与流相关，受到书写模式 write-mode 和脚本方向 direction 的影响
- 编号从 1 开始递增
网格轨道 grid track
- 一个网格轨道就是网格中任意两条网格线之间的空间
通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的轨道
- 可以用 repeat 函数批量创建模式重复的轨道
定义轨道尺寸 track-size
- 函数 fit-content(), minmax()
- 关键字 auto, min-content, max-content
- 单位为
fr的弹性盒值<flex>
- 长度值<length>
- 百分比值<percentage>
通过 grid-auto-rows 和 grid-auto-columns 属性来控制隐式创建的轨道
- 这可能在显示定位到超出网格轨道定义范围的行，或者由自动放置算法创建额外的行时发生
通过 grid-auto-flow 属性控制自动布局算法
- row, column 指定自动布局算法按照通过逐行或逐列填充来排列元素
- dense 关键字可以启用稠密算法（dense），忽略则使用稀疏算法（sparse）
- 稠密算法：如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱
- 稀疏算法：在网格中布局元素时，布局算法只会「向前」移动，永远不会倒回去填补空白
网格单元 grid cell
- 网格单元是一个网格列和一个网格行的交叉点，它是定位网格项时可以参考的网格的最小单位
- 从概念上来讲，它和表格的一个单元格很像
- 一个网格项可以跨越多个网页单元
网格区域 grid area
- 网格区域是用于布置一个或多个网格项的逻辑空间
- 网格区域由一个或多个相邻的网格单元组成
- 它由四条网格线绑定，网格区域的每侧各有一条，并参与其相交的网格轨道的大小调整
- 可以用 grid-template-area 属性显式定义，也可以由周围的网格线隐式定义
网格间距 grid gap
- 两个网格轨道之间的间隙可以称之为沟槽 gutter
- 通过 gap 速记属性或者 row-gap 和 column-gap 属性可以控制间距的大小
嵌套网格与子网格 subgrid
嵌套网格是指一个网格项本身成为一个网格
- 您可以在该网格项内部放置网格项，从而创建嵌套网格
- 然而，这些网格独立于父网格并且彼此独立，这意味着它们不从父网格获取轨道大小。这使得很难将嵌套的网格项与主网格对齐
在 grid-template-columns 和 grid-template-rows 上设置值为 subgrid 创建子网格
- 子网格继承直代父网格的轨道大小与间距值
- 子网格的项目将参与任何与父网格共享的轨道的内在尺寸计算
- 可以使用 gap 属性修改子网格的轨道间距
grid-template-*: subgrid <line-name-list>?使用父网格的命名网格线- 如果指定了<line-name-list>，则应用值被截断以匹配显式轨道的应用数量
- 子网格线的序号独立于父网格，从 1 开始递增
- 子网格没有隐式网格轨道，不会自动创建额外的行列来容纳溢出的元素
- 如果 span 为 1 的子网格具有 grid-column: 2 / span 3 的网格项，则该项被强制塞入进入（并且被限制到）子网格中的第一个且唯一的轨道
- 子网格提供了通过嵌套元素向下传递网格参数以及将基于内容的尺寸信息传递回其父网格的能力
在网格布局中手动定位元素
参考资料
- 需要注意的是，元素之间是可以重叠的
使用线序号来定位元素
- 使用 grid-row-start, grid-row-end, grid-column-start, grid-column-end 属性指定行列网格线的起止序号
- 使用 gird-row, grid-column 速记属性指定行列网格线的起止序号
- 使用 gird-area 速记属性指定整个网格区域的起止网格线序号
- 可以使用负整数来反方向计数
可以使用命名网格线来替代序号
- 一个网格线可以被赋予多个命名
- 可以用 repeat() 函数快速创建模式重复的命名网格线
- 具有相同命名的网格线可以在后面添加整数值来指代第 n 个命名网格线
可以使用 span 来定义网格元素的跨度
- 跨度是指网格元素的开始边缘与结束边缘之间相隔的行或者列数
- 可以与正整数值或命名网格线结合使用，也可以三者一起结合使用
使用命名模板区域来创建命名网格区域并定位元素
- 使用
grid-template-areas来创建一个网格命名模板，再通过grid-areas利用对应命名区域定位元素
- 其中，每一行字符串会生成一行有相应字符串命名网格单元的网格轨道，每个命名网格单元代表一列，多个同名网格单元组成一个命名网格区域
- 命名为
.可以使对应网格单元留空 - 命名网格区域会隐式生成对应命名的网格线，分别以 -start, -end 为后缀
- 非矩形的网格区块是无效的
在网格布局中自动定位元素
如果没有为项目指定位置，则每个项目会按顺序摆放在每个网格单元中
- 默认的流向是按行排列项目
- 当前行不足以放下项目时，会放置到下一行；如果没有足够的行，会自动创建新的行
通过 grid-auto-rows 和 grid-auto-columns 属性来控制隐式创建的轨道
- 这可能在显示定位到超出网格轨道定义范围的行，或者由自动放置算法创建额外的行时发生
通过 grid-auto-flow 属性控制自动布局算法
- row, column 指定自动布局算法按照通过逐行或逐列填充来排列元素
- dense 关键字可以启用稠密算法（dense），忽略则使用稀疏算法（sparse）
- 稠密算法：如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱
- 稀疏算法：在网格中布局元素时，布局算法只会「向前」移动，永远不会倒回去填补空白
通过 order 属性调整元素的顺序
- 元素按照
order属性的值的增序进行布局，拥有相同order属性值的元素按照它们在源代码中出现的顺序进行布局
混合定位：指定部分元素的定位并让剩余元素自动定位
- 自动放置算法计算元素定位的步骤
- 生成匿名网格项
- 当有一些字符串或文本被包含在网格容器中，但却没有被其他元素包装，它们就会被创建为匿名网格项目
- 匿名网格项始终自动放置，因为它们的盒子不能指定任何网格放置属性
- 定位非自动定位的内容
- 根据修改后的文档顺序及布局算法，处理锁定到给定行的项目
- 如具有 grid-row-start, grid-row-end 属性的项目
- 布局算法包括稠密算法（dense）和稀疏算法（sparse），默认为 sparse
- 确定隐式网格中的列数
- 放置剩余的项目
在网格布局中对齐元素
- 对齐与 flow 相关，会受到书写模式 write-mode 和脚本方向 direction 的影响
块轴：通过 align-* 属性控制对齐
- 分别是 align-items, align-self, align-content
- align-items 属性控制单个轨道，规定其中的项在对应轴上的对齐方式
- align-self 属性控制项在对应轴上的对齐方式，会覆盖轨道的 align-items 属性指定
- align-content 属性同时控制多个轨道，规定各个轨道在对应轴上的对齐方式
行轴：通过 justify-* 属性控制对齐
- 分别是 justify-items, justify-self, justify-content
- justify-items 属性控制单个轨道，规定其中的项在对应轴上的对齐方式
- justify-self 属性控制项在对应轴上的对齐方式，会覆盖轨道的 align-items 属性指定
- justify-content 属性同时控制多个轨道，规定各个轨道在对应轴上的对齐方式、
区分 *-self, *-items, *-content
- *-self 控制具体某个轨道上的单个项
- *-items 同时控制单个轨道上的所有项
- *-content 同时控制多个轨道
多列布局 multi-columns
- 通过将一段文本分成两个或多个列，可以更好地利用页面的宽度，提高可读性和排版效果
- 多列布局在报纸、杂志等印刷品中广泛使用，也适用于网页排版
使用 column-count 属性或 column-width 属性创建多列布局
column-count属性指定你想要显示内容的列的数量
column-width属性用于给每列设置一个最佳宽度- 容器将具有尽可能多的列，而没有任何列的宽度小于列宽值，剩余空间分配到这些列上；如果容器的宽度小于指定值，则单列的宽度将小于声明的列宽
- 同时设置
column-count和column-width - 可以用速记属性
columns进行替代 column-count将作为最大列数，按column-width的值进行计算，直到达到column-count定义的列数，剩余可用空间再分配到这些列上
设置列框之间的样式
- 通过 column-gap 属性修改列之间的间隔
- 通过 column-rule 速记属性来设置列之间的分割线样式
- 将属性 column-rule-width, column-rule-style, column-rule-color 简写为一个属性
列框之间的内容分配
- 设置 column-span 属性来让内容跨越所有列
- 不能只跨越部分列
- 如果跨越元素位于另一个具有边距、填充和边框或背景颜色的元素内，则可能会出现框的顶部出现在扳手上方而其余部分显示在下方的情况
- 设置 column-fill 属性来让内容平均分配到各个列上，尽量让各列内容具有相同的高度
处理多列布局的溢出
内容溢出
- 当子项的大小大于列框时，就会发生溢出：内容溢出（并且是可见的）到下一列，而不是被列框裁切
- 如列中的图像宽度大于
column-width值或基于column-count声明的列数生成的列宽度
- 标准的解决办法是设置最大宽度（max-width: 100%）
多列溢出
- 在片段化的媒体上下文（比如打印）中，一旦碎片（例如页面）中充满了列，多出的列将移至新页面
- 在连续的媒体上下文（比如网页）中，列将沿横向溢出
- 在 web 上，这意味着水平滚动条的出现
处理多列布局的分段
- CSS 分段规范详细说明了内容如何在分段容器或分段器之间断开
- 在多列中，分段器是列框
通过 break-* 属性或 widows, orphans 属性来控制块级盒子的中断
- 使用 break-inside 属性控制在盒子内部的中断
- 使用 break-before, break-after 属性控制在盒子前后的中断
使用 widows, orphans 属性控制在行之间的中断
- 在排版中，widows 是单独出现在页面顶部的段落的最后一行，orphans 是单独出现在页面底部的段落的最后一行
- 如果块中的行数少于指定值的数量，则所有行都将保持在一起
CSS 属性与属性值
CSS 属性分类
颜色和背景 Color and Background
- 用于控制元素的颜色和背景
- 如color, background-color, opacity等属性
排版 Typography
- 用于控制文本的样式和排版
- 如font-size, font-family, line-height等属性
盒模型 Box Model
- 用于控制元素的尺寸和边框
- 如width, height, padding, border, margin等属性
位置与布局 Positioning and Layout
- 用于布局和定位元素的位置
- 如position, display, float等属性，
弹性盒子和网格 Flexbox and Grid
- 用于使用弹性盒子布局和网格布局
- 如display: flex, flex-direction, justify-content等属性
特效 Effects
- 用于为元素添加各种效果
- 如box-shadow, text-shadow, opacity等属性
过渡和动画 Transitions and Animations
- 用于为元素添加过渡和动画效果
- 如transition, animation等属性
杂项 Miscellaneous
- 包括各种杂项属性，如cursor, outline, visibility等属性
- 用于控制元素的外观和行为。
CSS 其他属性分类
逻辑属性
- 物理属性是指与设备的物理维度相关的属性，如top, right, bottom, left等
- 逻辑属性是基于内容流动方向或书写模式（从左到右、从右到左或垂直）的方向而定义的，如start和end等
- 逻辑属性提供了一种通过逻辑而非物理方向和维度映射来控制布局的能力
- 逻辑属性与逻辑值规范定义了从实体值到与之等价的逻辑值（即相对于流的值）的对应关系，如 left 和 right，或者 top 和 bottom 对应于 start 和 end
块向（block）与行向（inline）
- 行向是指在所用的书写模式中，一行文本延伸的方向
- 在从左到右横排的英文文档，或者从右到左横排的阿拉伯文文档中，行向为水平方向
- 传统日文文档的行向为从上到下，即行向为竖直方向
- 块向是指另一方向，即块（例如段落）依次显示的方向
- 传统日文文档的块向为从右到左，即块向为水平方向
横排书写
竖排书写
用于尺寸的逻辑属性
- 在指定元素的尺寸时，标示实体尺寸参照的是水平和竖直方向（如左和右）的实体尺度，而逻辑属性与逻辑值规范使你可以参照文本流向（行向与块向）标示尺寸
用于尺寸的逻辑属性与实体属性的对应关系
实体属性 | 逻辑属性 |
width | inline-size |
height | block-size |
min-width | min-inline-size |
min-height | min-block-size |
max-width | max-inline-size |
max-height | max-block-size |
用于盒模型的逻辑属性
特有的逻辑速记属性，没有对应实体属性
border-block
- border-block-color
- border-block-style
- border-block-width
border-inline
- border-inline-color
- border-inline-style
- border-inline-width
- margin-block
- margin-inline
- padding-block
- padding-inline
用于外边距、边框和内边距的逻辑属性与实体属性的对应关系
实体属性 | 逻辑属性 |
border-bottom | border-block-end |
border-bottom-color | border-block-end-color |
border-bottom-style | border-block-end-style |
border-bottom-width | border-block-end-width |
border-top | border-block-start |
border-top-color | border-block-start-color |
border-top-style | border-block-start-style |
border-top-width | border-block-start-width |
border-right | border-inline-end |
border-right-color | border-inline-end-color |
border-right-style | border-inline-end-style |
border-right-width | border-inline-end-width |
border-left | border-inline-start |
border-left-color | border-inline-start-color |
border-left-style | border-inline-start-style |
border-left-width | border-inline-start-width |
border-top-left-radius | border-start-start-radius |
border-bottom-left-radius | border-end-start-radius |
border-top-right-radius | border-start-end-radius |
border-bottom-right-radius | border-end-end-radius |
margin-bottom | margin-block-end |
margin-top | margin-block-start |
margin-right | margin-inline-end |
margin-left | margin-inline-start |
padding-bottom | padding-block-end |
padding-top | padding-block-start |
padding-right | padding-inline-end |
padding-left | padding-inline-start |
用于浮动和定位的逻辑属性
特有的逻辑速记属性，没有对应实体属性
- inset
- 同时设置四个方向的偏移值
- inset-inline
- 为行向尺度同时设置inset-inline-start, inset-inline-end偏移值
- inset-block
- 为块向尺度同时设置inset-block-start, inset-block-end偏移值
用于浮动和定位的逻辑属性或逻辑值与其实体的对应关系
实体属性或实体值 | 逻辑属性或逻辑值 |
float: left | float: inline-start |
float: right | float: inline-end |
clear: left | clear: inline-start |
clear: right | clear: inline-end |
left | inset-inline-start |
right | inset-inline-end |
top | inset-block-start |
bottom | inset-block-end |
text-align: left | text-align: start |
text-align: right | text-align: end |
速记属性 / 简写属性
一种简化编写样式表的方法，允许您在一行中设置多个属性值
- 对于所有速记属性，任何没有被指定的值都会被设定为它们的初始值
常见速记属性
- background：用于设置元素的背景属性，包括background-color、background-image、background-position、background-repeat等属性。
- font：用于设置文本的字体属性，包括font-style、font-variant、font-weight、font-size、line-height和font-family属性。
- margin和padding：用于设置元素的外边距和内边距属性。margin包括margin-top、margin-right、margin-bottom和margin-left属性，padding包括padding-top、padding-right、padding-bottom和padding-left属性。
- border：用于设置元素的边框属性，包括border-width、border-style和border-color属性。可以使用border-top、border-right、border-bottom和border-left属性单独设置边框的每个边。
- list-style：用于设置列表项的样式，包括list-style-type、list-style-position和list-style-image属性。
- transition：用于设置元素的过渡效果，包括transition-property、transition-duration、transition-timing-function和transition-delay属性。
CSS 属性值分类
初始值 initial value
- 当一个元素没有被设置样式时，该属性所拥有的默认值
- 可以使用 initial 关键词明确指定初始值
- 对于继承属性，初始值只能被用于没有指定值的根元素上
- 对于非继承属性，初始值可以被用于任意没有指定值的元素上
指定值 specified value
- 样式表中所指定的值
指定值的计算步骤
- 在当前文档的样式表中给这个属性赋的值，会被优先使用
- 如果在当前文档的样式表中没有给这个属性赋值，那么它会尝试从父元素那继承一个值
- 如果上面的两种途径都不可行，则把 CSS 规范中针对这个元素的这个属性的初始值作为指定值
计算值 computed value
- 应用所有 CSS 规则、继承和浏览器默认值后得出的最终值
计算值的计算步骤
- 继承初始值：如果属性是可继承的，则从父元素继承初始值，否则使用该属性的默认值作为初始值
- 应用样式规则：将所有应用于元素的样式规则按优先级排序，然后按照 CSS 层叠规则计算出最终值
- 计算相对值：对于那些相对值的属性，它们的计算值取决于父元素的计算值。对于百分比值，它们的计算值是相对于父元素的计算值计算得出的
- 计算自动值：如果属性被设置为
auto，则根据属性的定义计算出计算值
- 计算绝对值：对于那些绝对值的属性，它们的计算值是一个绝对值，不依赖于其他属性的计算值
应用值 used value
- 应用值是指浏览器在应用样式时所使用的值
- 应用值通常是计算值或解析值，但在某些情况下可能会使用指定值或初始值，因此应用值可能会和计算值不同
- background-position
- bottom, left, right, top
- height, width
- margin-bottom, margin-left, margin-right, margin-top,
- min-height, min-width
- padding-bottom, padding-left, padding-right, padding-top
- text-indent
对于依赖于布局的 CSS 属性，应用值可能会与计算值不一样
解析值 resolved value
- 在样式表中定义的值，已经经过了所有的计算和解析过程，并被确定为一个具体的数值或颜色
- getComputedStyle()返回的值
- 对于大多数属性，它是计算值 computed value
- 对于一些旧属性（包括宽度和高度），它是应用值 used value
实际值 actual value
- 在渲染页面时，浏览器根据当前环境和设备特性，对属性进行最终计算得出的值
- 实际值可能会受到用户设置、浏览器设置、屏幕分辨率等因素的影响
- 应用值（used value）被应用后的近似值
CSS 属性值的类型与单位
数值类型
- 数值与单位之间没有空格
<number>
<integer>
- 特殊的<number>类型，它表示一个整数，无论是正数还是负数
- <integer>数据类型由一个或多个十进制数字组成，包括 0 到 9，可以选择前面加一个 + 或 - 号
- 没有与整数关联的单位
<percentage>
<length>
- 用于表示距离尺寸
- 由一个 <number> 和一个长度单位构成
相对长度单位
字体比例
em
- 表示元素的 font-size 的计算值
rem
- 表示根元素的 font-size 的计算值
ch
- 代表元素所用字体 font 中 0 这一字形的宽度
ex
- 表示元素 font 的 x-height
- x-height 是字体中小写字母的基线和平均线之间的距离
视口比例
vh
- 视口的初始包含块（containing block）的高度的 1%
vw
- 视口的初始包含块的宽度的 1%
vmin
- 视口高度
vw和宽度vh两者之间的最小值
vmax
- 视口高度
vw和宽度vh两者之间的最大值
绝对长度单位
px
- 一像素（pixel）
- 一般来说，每英寸的像素的数量保持在 96 左右，
1px= 1/96 *1in
in
- 一英寸
- 1in = 2.54cm = 96px
pc
- 一十二点活字（pica）
- 1pc = 1/6 * 1in
pt
- 一磅（point）
- 1pt = 1/12 * 1pc = 1/72 * 1in
cm
- 一厘米
- 1cm = 96px / 2.54
mm
- 一毫米
<angle>
- 表示角的大小
可选单位为度（degrees）、百分度（gradians）、弧度（radians）或圈数（turns）
- 度 deg
- 一个完整的圆是
360deg
- 百分度 grad
- 一个完整的圆是
400grad
- 弧度 rad
1rad是 180/π 度- 一个完整的圆是 2π 弧度，约等于
6.2832rad
- 圈数 turn
<flex>
- 表示网格（grid）容器中的一段可变长度
<number>fr， 其中fr为单位
<ratio>
- 用于描述媒体查询中的宽高比，表示两个无单位值之间的比例
<length-percentage>
- 表示一个值，该值可以是<length>或<percentage>
<angle-percentage>
- 表示一个值，该值可以是<angle>或<percentage>
颜色
指定颜色的方法
颜色关键词
- 除了通常的 16 个 HTML 基本颜色，其他的不能被用于 HTML。HTML 将通过一个特定的计算程序转换这些未知的值，这将导致成为完全不同的颜色
- 这些关键字应只被用于 SVG 和 CSS
- 未知的关键字会让 CSS 属性无效。无效的属性将被忽略，该颜色将没有作用。这是一个和 HTML 相比不同的行为
transparent关键字表示一个完全透明的颜色
currentColor关键字代表原始的 color 属性的计算值
RGB值
- RGB是红色（Red）、绿色（Green）和蓝色（Blue）的缩写
- 每种颜色都由一个0到255之间的数字表示，其中0表示没有该颜色，255表示该颜色的最大强度
- 红色：
rgb(255, 0, 0) - 绿色：
rgb(0, 255, 0) - 蓝色：
rgb(0, 0, 255)
HEX值
- 使用十六进制数表示RGB值
- HEX值是由一个井号（#）和6个十六进制数字组成的字符串，其中前两个数字表示红色，中间两个数字表示绿色，最后两个数字表示蓝色
- 红色：
#ff0000 - 绿色：
#00ff00 - 蓝色：
#0000ff
HSL值
- HSL是色相（Hue）、饱和度（Saturation）和亮度（Lightness）的缩写
- 色相表示颜色的类型，取值范围为0到360；饱和度表示颜色的鲜艳程度，取值范围为0%到100%；亮度表示颜色的明亮程度，取值范围为0%到100%
- 红色：
hsl(0, 100%, 50%) - 绿色：
hsl(120, 100%, 50%) - 蓝色：
hsl(240, 100%, 50%)
RGBA值
- 添加了Alpha值，取值范围为0到1，用于指定颜色的透明度
HSLA值
- 添加了Alpha值，取值范围为0到1，用于指定颜色的透明度
<color>
- 表示一种标准 RGB 色彩空间（sRGB color space）的颜色
- 一个颜色可以包括一个alpha 通道透明度值，与背景色混合
可选值
- 颜色关键词
- red, blue, green 等
- RGB立体坐标系统
- #加十六进制, rgb()和 rbga()的函数表达式
- HSL圆柱坐标系统
- hsl()和 hsla()的函数表达式
<named-color>
图像
在 CSS 中有两种类型的图像
- 简单的静态图像，经常被一个在使用的 URL 引用
- 动态生成的图像，比如 DOM 树的部分元素样式渐变或者计算样式产生
确定图像的实际尺寸
- 根据 (1) 图像的原始尺寸；(2) 用 CSS 属性指定的宽和高；(3) 图像对象默认大小确定
实际尺寸计算方法
- 如果宽度和高度都被指定了，则使用这些值会作为图像对象实际尺寸；
- 如果指定了宽度和高度中的一个，恰好这个值匹配上了图像固有宽高比中的一个值，则另一个会使用固有宽高比来确定，否则就使用图像的原始大小来确定没定义的那个值；
- 如果宽度和高度都没有被指定，在不超过图像对象默认尺寸的前提下，将会根据图像的固有宽高比来计算图像对象的实际尺寸；如果图像没有固有宽高比，则会采用图像对象固有宽高比；如果图像对象也没有固有宽高比，则使用图像对象的默认大小
不同图像对象的默认大小
background-image
- DOM 元素的背景定位的范围尺寸
list-style-image
- 字符的 1em 尺寸
border-image
- DOM 元素的边框图像范围尺寸
cursor
- 浏览器定义的光标尺寸匹配在使用操作系统上常规的光标尺寸
用 CSS content属性，和 CSS 伪元素 ::after 和 ::before替换元素内容
- 一个 300px × 150px 矩形
<image>
- 描述一个 2D 图形
- 可选值
- <url>
- <gradient>
- 页面的一部分，定义在element()方法中
<gradient>
- <image>的子属性，表现两种或多种颜色的过渡转变
- 没有内在尺寸，其实际的大小取决于其填充元素的大小
- 由渐变函数定义
- 线形渐变 linear-gradient()
- 径向渐变 radial-gradient()
- repeating-linear-gradient()
- repeating-radial-gradient()
位置
<position>
- 表示用于设置相对于框的位置的 2D 空间中的坐标
<position>值表述的最终位置并不需要位于元素的盒子中
- 关键字列表
left | center | right | top | bottom
可选值
- 如果仅指定单个偏移量，它将指定 x 轴坐标，另外那个将设为
center关键字
- 关键字
- 单个关键字
- 双关键字
- 每个方向的关键字，顺序无关紧要
- 关键字后接值
- 值为关键字定义的边的偏移量
- <length-percentage> 值
字符串和标识符
<custom-ident>
- 用户自定义字符串标识符
语法同 CSS 属性名相似
- 区分大小写
- 禁止使用关键字
<custom-ident>不能用单引号或双引号包起来
- 第一个字符不能为数字，字符串开头不能是连字符 (
-) 后跟数字或连字符
可选字符
- A-Za-z0-9
- 连字符 (-) 和 下划线 (_)
- 转义字符 (\)
- Unicode 编码（格式：转义字符后跟 1 到 6 位十六进制数）
CSS 函数
var()
- 插入一个自定义属性（也称为CSS变量）的值
- 语法：
var( <custom-property-name> [, <declaration-value>]? )
参数值
<custom-property-name> 自定义属性名
- 被定义为以两个破折号开始的任何有效标识符，如
var(--foo)
<declaration-value> 声明值（回退值）
- 回退值被用来在自定义属性值无效的情况下保证函数有值
- 回退值可以包含任何字符，但是部分有特殊含义的字符除外，例如换行符、不匹配的右括号（如
)、]或}）、感叹号以及顶层分号（不被任何非var()的括号包裹的分号）
url()
- 指向一个资源
- 有两种语法
url( <string> <url-modifier>* ) | <url-token>src( <string> <url-modifier>* )
URL 可以使用单引号或双引号包含，也可以直接书写
- 由于历史原因，
url()函数可以在不使用引号的情况下编写URL，此时它会被特殊解析为<url-token> - URL-token 是指任何包含 URL 的属性值
- 因此只能接受字面量的URL，像
var(--foo)的变量形式是不被允许的
可以使用相对地址
- 相对地址是相对于 CSS 样式表的 URL，而不是网页的 URL
repeat()
- 表示轨道列表的重复片段，允许以更紧凑的形式写入大量模式重复的列或行
- 语法：
repeat( [ <integer [1,∞]> | auto-fill | auto-fit ] , <fixed-size> | <track-size> )
<auto-repeat> 自动重复轨道，使用 repeat 函数自动重复 <fixed-size>和线名称
repeat([ auto-fill | auto-fit ], [ <line-names>? <fixed-size> ]+ <line-names>?)
<fixed-repeat> 固定重复轨道，使用 repeat 函数重复指定次数的 <fixed-size>和线名称
repeat([ <positive-integer> ], [ <line-names>? <fixed-size> ]+ <line-names>?)
<fixed-size> 固定大小，可以用 minmax() 函数
<fixed-breadth> | minmax(<inflexible-breadth>, <fixed-breadth>) | minmax(<fixed-breadth>, <track-breadth>)
<track-repeat> 重复轨道，使用 repeat 函数重复指定次数的<track-size>和线名称
repeat([ <positive-integer> ], [ <line-names>? <track-size> ]+ <line-names>?)
<track-size> 轨道大小，可以用 minmax() 函数和 fit-content() 函数
<track-breadth> | minmax(<inflexible-breadth>, <track-breadth>) | fit-content(<length-percentage>)
具体参数值
auto-fill 和 auto-fit 用于指定重复的方式
auto-fill 尽可能多地重复轨道，以填充网格容器的大小，不会导致网格溢出其网格容器
- 如果网格容器在相关轴上具有明确的或最大的大小，则重复次数是最大可能的正整数，不会导致网格溢出其网格容器
- 如果任何重复次数会导致溢出，则重复次数为1
- 如果网格容器在相关轴上具有明确的最小大小，则重复次数是满足该最小要求的最小可能正整数
auto-fit 行为与 auto-fill 相同，但在放置网格项目后，任何空的重复轨道都会被折叠
- 空轨道是指没有流动的网格项放置在其中或跨越其上的轨道
- 如果它们都是空的，这可能导致所有轨道都被折叠
- 折叠的轨道被视为具有单个0px的固定轨道大小函数，并且其两侧的间距也会折叠
auto
- 如果该网格轨道为最大时，该属性等同于 <max-content>；为最小时，则等同于 <min-content>
- 网格轨道大小为 auto 时，才可以被属性 align-content 和 justify-content 拉伸
<track-breadth> 轨道宽度，可以是长度值、百分比值、弹性盒值、关键字
<length-percentage>
<flex>
- min-content
- max-content
- auto
<inflexible-breadth> 非弹性轨道宽度，可以是长度值、百分比值、关键字
<length-percentage>
- min-content
- max-content
- auto
<fixed-breadth> 固定轨道宽度，可以是长度值、百分比值
<length-percentage>
subgrid 创建子网格
- 采用其父网格的跨度部分
- 网格行/列的尺寸将从父网格的定义中取得
- 子网格的项目将参与任何与父网格共享的轨道的内在尺寸计算
subgrid <line-name-list>?允许本地命名与父网格共享的网格线- 指定的<line-names>将分配给子网格的显式网格的每行一条网格线，从线1开始
- 忽略多余的<line-names>
minmax()
- 定义了一个长宽范围的闭区间
语法：minmax(min, max)
- 包含两个参数：最小值
min和最大值max
- 每个参数分别是<length-percentage>, <flex>, max-content, min-content, auto 中的一种
- <flex> 值作为最大值时设置网格轨道的弹性系数；作为最小值时无效。
- 如果最大值小于最小值，则最大值被忽略并且 minmax(最小值, 最大值) 被看成最小值
参数值解释
auto作为最大值时，等价于 max-content；作为最小值时，等价于轨道中单元格最小长宽 (min-width/min-height) 的最大值
- <length-percentage>
- <flex>：单位为
fr的非负<number>，指定轨道弹性布局的系数值
max-content表示网格的轨道长度自适应内容最大的那个单元格
min-content表示网格的轨道长度自适应内容最小的那个单元格
counter()
- 返回表示指定计数器的当前值的字符串
- 通常和伪元素搭配使用，但是理论上可以在支持<string>值的任何地方使用
- 语法：
counter( <custom-ident>, <counter-style>? )
参数值
<custom-ident> 标识计数器的名称
- 区分大小写，并且与
counter-reset和counter-increment中的“名称”相同
<counter-style> 计数器样式名称或 symbols() 函数
<counter-style-name>|symbols()
<counter-style-name> 预定义的计数器样式
- 简单预定义计数器样式分为Numeric, Alphabetic, Symbolic, fixed这四大类
- 复杂预定义计数器样式包括
- 手写东亚计数器样式 Longhand East Asian Counter Styles
- 埃塞俄比亚数字计数器样式 Ethiopic Numeric Counter Style
通过 @counter-style 可以自定义计数器样式
@counter-style <counter-style-name> { <declaration-list> }
symbols() 自定义计数器样式
- 详见 symbols()
counters()
- 嵌套计数器，返回表示指定计数器的当前值的连接字符串
- 通常和伪元素搭配使用，但是理论上可以在支持<string>值的任何地方使用
- 语法：
counters( <custom-ident>, <string>, <counter-style>? )
参数值
<custom-ident>和<counter-style>参考 counter()
第二个参数<string>表示连接字符串
- 任意数量的文本字符
- 非拉丁字符必须使用其 Unicode 转义序列进行编码
symbols()
- 行内定义计数器样式
- 类似于 @counter-style 但是内联于样式且语法更短
- 语法：
symbols( <symbols-type>? [ <string> | <image> ]+ );
参数值
<symbols-type> 设置计数器样式类型
cyclic：系统按照定义顺序循环遍历给定值，并在到达末尾时返回开头
numeric：系统将给定值解释为连续单位的位值计数系统
alphabetic：系统将给定值解释为字母编号系统的数字，类似于位值计数系统，但没有0
symbolic：系统循环遍历值，在每个循环中打印它们额外一次（第一个循环打印一次，第二个循环打印两次，等等）
fixed：系统循环遍历给定值一次，然后回退到numeric
content()
- 在CSS中设置元素的内容
- 语法：
content( [ text | before | after | first-letter | marker ]? )
可选值
text：元素的字符串值
before：::before伪元素的字符串值
after：::after伪元素的字符串值
first-letter：元素的第一个字母，如::first-letter伪元素所定义
marker：::marker伪元素的字符串值
attr()
- 获取选择到的元素的某一 HTML 属性值，并用于其样式
- 也可以用于伪元素，属性值采用伪元素所依附的元素
- 语法：
attr( <q-name> <attr-type>? , <declaration-value>?)
参数值
<q-name>给出要引用的属性的名称
<attr-type> 属性值要解析成的类型
- 默认为 <string>
- 可选类型列表：string | url | ident | color | number | percentage | length | angle | time | frequency | flex | <dimension-unit>
<declaration-value>回退值，当属性丢失或未能解析为指定类型时
颜色 color
color：用于设置文本颜色
- background-color：用于设置元素的背景颜色
- border-color：用于设置边框的颜色
- box-shadow：用于设置阴影效果的颜色
- text-shadow：用于设置文本阴影效果的颜色
- opacity：用于设置元素的不透明度，其中包含颜色的透明度
- fill：用于设置 SVG 图形中填充的颜色
- stroke：用于设置 SVG 图形中描边的颜色
- caret-color：用于设置输入框中光标的颜色
- outline-color：用于设置轮廓线条的颜色
背景 background
background
- 简写属性，可以在一次声明中定义一个或多个属性：
background-clip,background-color,background-image,background-origin,background-position,background-repeat,background-size,background-attachment
- 可以设置多个背景层
- 使用逗号分隔每个背景层
- 在简写背景属性时需要遵循以下规则：
background-color只能在 background 的最后一个属性上定义，因为整个元素只有一种背景颜色background-size值只能包含在背景位置之后，用'/'字符分隔，例如：enter/80%
background-color：设置元素的背景颜色
background-image：设置元素的背景图片
- 渐变背景：<gradient>
- 图片背景：url( <string> <url-modifier>* ) 或 src( <string> <url-modifier>* )
background-size：设置背景图片的尺寸
- 可以使用绝对值、百分比或关键词来描述背景图片的大小
可选值
- <length-percentage>
关键字
cover
- 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
- 当容器和背景图大小不同时，背景图的 左/右 或者 上/下 部分会被裁剪
contain
- 缩放背景图片以完全装入背景区，可能背景区部分空白
- 当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）会显示由 background-color 设置的背景颜色
- auto
- 以背景图片的比例缩放背景图片
background-repeat：设置背景图片的重复方式
- 可选值：no-repeat, repeat-x, repeat-y, repeat
background-position：设置背景图片的位置
background-origin：设置背景图片的起始位置
- 可选值
- padding-box（从内边距框开始）
- border-box（从边框框开始）
- content-box（从内容框开始）
background-clip：设置背景图片的裁剪方式
- 可选值
- padding-box（裁剪到内边距框）
- border-box（裁剪到边框框）
- content-box（裁剪到内容框）
background-attachment：设置背景图片的固定方式
- 可选值
- fixed（固定不动）
- scroll（随滚动条滚动）
- local（随元素内部滚动）
控制文本的样式和排版 typography
字体 font
font
- 可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写，或将元素的字体设置为系统字体
指定为系统关键字
- 将对应元素的字体设置为值对应的系统字体
- 接受以下值：
caption： 用于标题控件（如按钮，下拉列表等）的系统字体icon： 用于标签图标的系统字体menu： 菜单中（如下拉菜单和菜单列表）使用的系统字体message-box： 用于对话框的系统字体small-caption： 用于小标题控件的系统字体status-bar： 用于窗口状态栏的系统字体
指定为属性缩写
- 必须有 font-style, font-family
- 可选 font-variant, font-weight, font-size, line-height
- •
font-style,font-variant和font-weight必须在font-size之前 - • 在 CSS 2.1 中
font-variant只可以是normal和small-caps - •
line-height必须跟在font-size后面，由 "/" 分隔，例如 "16px/3" - •
font-family必须最后指定
font-family: [ <family-name> | <generic-family> ]#
- 通过给定一个有先后顺序的，由字体名或者字体族名组成的列表（字体栈）来为选定的元素设置字体
- 浏览器会选择列表中第一个该计算机上有安装的字体，或者是通过 @font-face 指定的可以直接下载的字体
<family-name>
- 一个字体族的名字
- 字体族名可以包含空格，但包含空格时应该用引号
<generic-name>
- 通用字体族名是一种备选机制，用于在指定的字体不可用时给出较好的字体
- 在列表的末尾应该至少有一个通用字体族名
- 可选取值：serif, sans-serif, monospace, cursive, fantasy, system-ui, math, emoji, fangsong
- 子元素继承该属性，除了如表单的select, textarea, input元素等
- 可以设置为inherit：textarea {font-family: inherit;}
font-style: normal | italic | oblique<angle>?
- 指定了字体的倾斜程度
- 语法
- 可选值：normal, italic, oblique
- 可变字体（Variable font）可以精确控制 oblique 字体的倾斜程度
font-weight: normal | bold | lighter | bolder | <number>
- 指定了字体的粗细程度
可选值: normal, bold, lighter, bolder, <number>
- 一些字体只提供
normal和bold两种绝对值
normal正常粗细。与400等值
bold加粗。与700等值
- 相对值：
lighter比从父元素继承来的值更细；bolder比从父元素继承来的值更粗
- 权重值：
<number>，介于 1 和 1000 (包含) 之间的<number>类型值
如果指定的权重值不可用
- 指定值小于400，降序查找小于指定值的可用权重，如果找不到则升序查找大于指定值的可用权重
- 指定值在400到500之间，升序查找指定值与500之间的可用权重，如果找不到则降序查找小于指定值的可用权重，再升序查找大于500的可用权重
- 指定值大于500，升序查找大于指定值的可用权重，如果找不到则降序查找小于指定值的可用权重
font-size: <absolute-size> | <relative-size> | <length> | <percentage>
- 指定字体大小
- 可选值：
xx-small,x-small,small,medium,large,x-large,xx-largelarger,smaller- 长度正数<length>
- 父元素字体大小的正数<percentage>
单个关键字：绝对大小关键字或相对大小关键字
长度<length>或<percentage>
- 该属性的值会被用于计算 em 和 ex 长度单位，定义该值可能改变其他元素的大小
font-stretch: normal | [*-]?condensed | [*-]?expanded
- 用于控制文本的宽度，使用此属性来使文本变窄（condensed）或变宽（expanded）
可选值
- normal
semi-condensed,condensed,extra-condensed,ultra-condensed- 小于默认字体
semi-expanded,expanded,extra-expanded,ultra-expanded- 大于默认字体
@font-face：定义自定义字体
- 字体能从远程服务器或者用户本地安装的字体加载
@font-face 语法
font-family：所指定的字体名字将会被用于 font 或 font-family 属性
src：远程字体文件位置的 URL 或者用户计算机上的字体名称- 提供了 local() 函数，从用户本地查找指定的字体名称，并且找到了一个匹配项，本地字体就会被使用。否则，字体就会使用 url() 函数下载的资源
font-variant,font-stretch,font-weight,font-style：控制字体适用的样式范围- 默认值均为normal
unicode-range：指定字体支持的字符集范围
@font-face 示例
- 每个
@font-face只支持适用于一种对应样式的元素 - 如果只定义了斜体和粗体，仍需要额外定义斜粗体才能正确适用
- 如果某种 Web 字体没有粗体、斜体或粗斜体版本，而我们又对文本添加了这些样式，浏览器就会显示伪样式（浏览器实现的字体版本）
字体变形 font-variant
font-variant: normal | none | <font-variant-keyword-value>
- 速记属性
- 用于指定字体的变体形式，可以控制字母的大小写、数字的样式和其他元素的特殊变化
可选值：normal | none | <font-variant-keyword-value>
- normal
- 规定一个常规（normal）字型；每个非简写的属性的初始值都是 normal
- none
- 将font-variant-ligatures设定为 none ，将其他非简写属性的值设定为初始值normal
- 其余font-variant-属性对应的关键字值
font-variant-ligatures: normal | none | <font-variant-keyword-value>
- 控制着其所应用元素文本的连字与上下文形式
可选值
normal
- 默认值，表示在渲染时会使用常用的连字，连字的效果取决于字体，语言和脚本
none
- 不使用任何连字，包括常规的形式
<common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values>
<common-lig-values>: common-ligatures, no-common-ligatures
- 控制最常见的连字，例如
fi、ffi或th
- 在某些情况下，字母
f和i可能会组合成一个连字，以避免 f 的顶部与 i 的点重叠
<discretionary-lig-values>: discretionary-ligatures, no-discretionary-ligatures
- 控制特定的连字，特定于字体并由类型设计者定义
<historical-lig-values>: historical-ligatures, no-historical-ligatures
- 控制历史上使用的连字，如德语连字tz显示为ꜩ
<contextual-alt-values>: contextual, no-contextual
- 控制字母是否适应它们的上下文，也就是说，它们是否适应周围的字母
font-variant-caps: normal | <font-variant-keyword-value>
- 控制大写字母特殊字符的使用
- https://en.wikipedia.org/wiki/Small_caps
- 小型大写字母（small caps）指一种大小写字母混合的文本样式，大写字母的大小与小写字母相同
- 特小型大写字母（petite caps）与小型大写字母类似，其中大写字母被替换为更小的大写字母
可选值
normal- 关闭一切特殊字符变体的使用
small-caps- 允许小型大写字母的使用
all-small-caps- 将大小写字母全部转化为小型大写字母
petite-caps- 允许特小型大写字母的使用
all-petite-caps- 将大小写字母全部转化为特小型大写字母
unicase- 允许将大写字母转化为小型大写字母与普通小写字母的混用
titling-caps- 允许首字母大写
- 在标题序列中，如果均使用大写字母，可能会带来过于强烈的视觉效果。首字母大写即用来应对这种情况
font-variant-numeric: normal | <font-variant-keyword-value>
- 控制数字、分数和序号标记的替代字形的使用
可选值
normal
- 下列特性均不启用
ordinal
- 启用序数形式显示
slashed-zero
- 启用区分零显示，强制使用带有斜杠的 0
<numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values>
<numeric-figure-values>: lining-nums | oldstyle-nums
- 用于控制数字样式
- lining-nums 启用内衬数字显示
- oldstyle-nums 启用旧式数字显示
<numeric-spacing-values>: proportional-nums | tabular-nums
- 用于控制数字宽度
- proportional-nums 启用比例数字显示
- tabular-nums 启用表格数字显示
<numeric-fraction-values>: diagonal-fractions | stacked-fractions
- 用于控制分数字形
- diagonal-fractions 启用斜角分数显示
- stacked-fractions 启用标准分数显示
font-variant-alternates: normal | <font-variant-keyword-value>
- 控制备用字体的使用
可选值
- normal
- 禁用备用字体
historical-forms
- 启用历史类型 - 过去常见但今天不常见的字体
stylistic()
- 为个别字体启用字体样式替换
styleset()
- 对字符集启用字体样式替换
character-variant()
- 启用字符的特定样式替代
swash()
- 启用斜字体
ornaments()
- 启用装饰物
annotation()
- 支持注释，如带圆圈的数字或倒置的字符
font-variant-position: normal | sub | super
- 用于控制作为上标或下标定位的替代、较小的字形的使用
文本 text
text-transform: capitalize | uppercase | lowercase | none | full-width | full-size-kana
- 指定如何将元素的文本大写
可选关键字
- capitalize
- 强制每个单词的首字母转换为大写，其他的字符保留不变
- uppercase
- 强制所有字符被转换为大写
- lowercase
- 强制所有字符被转换为小写
- none
- 阻止所有字符的大小写被转换
- full-width
- 强制将字符（主要是表意文字和拉丁文字）写在一个正方形内，使它们能够在通常的东亚文字（如中文或日文）中对齐
- full-size-kana
- 通常用于 <ruby> 注释文本，该关键字将所有小假名字符转换为等效的全尺寸假名，以补偿在 ruby 中通常使用的小字体的可读性问题
text-shadow: none | [ <color>? && <length>{2,3} ]#
- 为文字添加阴影
- 支持多个阴影，阴影值之间用逗号隔开
阴影值的组成
- <offset-x> <offset-y>
- 必选，指定阴影相对文字的偏移量，均为 <length>值
- <color>
- 可选，阴影的颜色
- <blur-radius>
- 可选，模糊半径，<length>值
text-decoration
- 速记属性，作为 text-decoration-line, text-decoration-color, text-decoration-style 属性的简写
- 用于设置文本的修饰线外观（下划线、上划线、贯穿线/删除线 或 闪烁）
- 会延伸到子元素
text-decoration-line: none | underline | overline | line-through
- 设置元素中文本的修饰类型
- 可以设置为
none, 或者一个及多个用空格分隔的可选值
可选值
- none
- underline
- 在文本的下方有一条修饰线
- overline
- 在文本的上方有一条修饰线
- line-through
- 一条贯穿文本中间的修饰线
text-decoration-style: solid | double | dotted | dashed | wavy
- 用于设置元素中文本修饰线的样式
可选值
- solid：实线
- double：双实线
- dotted：点划线
- dashed：虚线
- wavy：波浪线
text-decoration-color: <color>
text-decoration-thickness: auto | from-font | <length-percentage>
- 用于设置元素中文本修饰线的笔触厚度
可选值
- auto
- 由浏览器为文本装饰线选择合适的厚度
- from-font
- 如果字体文件中包含了首选的厚度值，则使用字体文件的厚度值，否则与auto一致
- <length-percentage>
文本布局/排版 typography
quotes: auto | none | [ <string> <string> ]+
- 设置引号样式
可选值
nonecontent 属性的值open-quote和close-quote将不会展示引号
auto基于lang属性的语言设置适当的引号
[ <string> <string> ]+ 设置各层 open-quote 和 close-quote对应引号的样式
- 第一对设置第一层，第二对设置第二层，以此类推
white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces
- 处理元素中的空白，定义以下行为：
- 空白字符是否以及如何合并
- 行是否采用软换行
可选值
normal- 连续的空白符会被合并，换行符会被当作空白符来处理
nowrap- 连续的空白符会被合并。但文本内的换行无效
pre- 连续的空白符会被保留。在遇到换行符或者
<br>元素时才会换行
pre-wrap- 连续的空白符会被保留。在遇到换行符或者
<br>元素，或者需要为了填充「行框盒子」时才会换行
pre-line- 连续的空白符会被合并。在遇到换行符或者
<br>元素，或者需要为了填充「行框盒子」时会换行
break-spaces- 与
pre-wrap的行为相同，除了： - 任何保留的空白序列总是占用空间，包括在行尾
- 每个保留的空格字符后都存在换行机会，包括空格字符之间
- 这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）
white-space 关键字比较
ㅤ | 换行符 | 空格和制表符 | 文字换行 | 行尾空格 |
normal | 合并 | 合并 | 换行 | 删除 |
nowrap | 合并 | 合并 | 不换行 | 删除 |
pre | 保留 | 保留 | 不换行 | 保留 |
pre-wrap | 保留 | 保留 | 换行 | 挂起 |
pre-line | 保留 | 合并 | 换行 | 删除 |
break-spaces | 保留 | 保留 | 换行 | 换行 |
line-height: <number> | <length-percentage> | normal
- 用于设置多行元素的空间量，如多行文本的间距
- 对于块级元素，它指定元素行盒（line boxes）的最小高度
- 对于非替代的 inline 元素，它用于计算行盒（line box）的高度
- 可选值
- 一个无单位 <数字>
- 这个无单位数字<数字>乘以该元素的字体大小
- 大多数情况下，这是设置
line-height的推荐方法，不会在继承时产生不确定的结果 - 一个 <长度> 或 <百分比>
- <百分比> 与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小
- 关键词 normal
- 取决于用户端
letter-spacing: <length> | normal
word-spacing: <length-percentage> | normal
- 设置标签、单词之间的空格长度
<length>通过指定具体的额外间距来增加字体的单词间距
<percentage>通过指定受影响字符的宽度的百分比的方式来增加的间距
word-break: normal | break-all | keep-all
- 指示浏览器怎样在单词内断行
可选值
- normal
- 使用默认的断行规则
- 对于非 CJK 文本（CJK 指中文/日文/韩文），浏览器会在单词之间断行；而对于 CJK 文本，浏览器会在任意字符间断行
- break-all
- 对于非 CJK 文本，可在任意字符间断行
- keep-all
- 非 CJK 文本表现同
normal，CJK 文本不断行
overflow-wrap: normal | break-word
- 当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行
可选值
- normal
- 行只能在正常的单词断点处中断
- break-word
- 如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行
text-indent: <length-percentage>
- 定义一个块元素首行文本内容之前的缩进量
text-align: left | right | center | justify | match-parent
- 定义行内内容（例如文字）如何相对它的块父元素对齐
- 不控制块元素自己的对齐
可选值
- left
- right
- center
- justify
- match-parent
- 和inherit类似，区别在于start和end的值根据父元素的direction确定，并被替换为恰当的left或right
控制盒模型 box model
外边距 margin
margin: <length-percentage>{1,4}
- 速记属性
- 将属性 margin-bottom, margin-left, margin-right, margin-top 简写为一个属性
- 控制元素所有四条边的外边距区域
margin-[ top | bottom | left | right ]: <length-percentage [-∞,∞]>
外边距对应逻辑属性
margin-[ block | inline ]
margin-[ block | inline ]-[ start | end ]
边框 border
border
- 速记属性
- 将属性 border-width, border-style, border-color 简写为一个属性
- 用于设置各种单独的边界属性
border-color
border-style: <br-style>{1,4}
- 速记属性
- 设定元素四个边框的样式
可选值
none, hidden
- 不显示边框
- 如果没有设定背景图片，
border-width计算后的值将是0，即使先前已经指定过它的值
- 在单元格边框重叠情况下，
none值优先级最低，hidden值优先级最低 none值：如果存在其他的重叠边框，则会显示为那个边框hidden值：如果存在其他的重叠边框，边框不会显示
- 圆点虚线 dotted
- 圆点半径为
border-width计算值
- 方形虚线 dashed
- 实线 solid
- 双实线 double
- 宽度为
border-width
groove
- 显示为有雕刻效果的边框
ridge
- 显示为有浮雕效果的边框
inset
- 显示为有陷入效果的边框
- 当它指定到 border-collapse 为 collapsed 的单元格时，会显示为 groove 的样式
outset
- 显示为有突出效果的边框
- 当它指定到 border-collapse 为 collapsed 的单元格时，会显示为 ridge 的样式
border-width
border-[ top | bottom | left | right ]
- 速记属性
- 将属性 border-*-style, border-*-width, border-*-color 简写为一个属性
- 描述了元素的某个边框样式
border-radius
- 速记属性
- 将属性 border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius 简写为一个属性
- 设置元素的外边框圆角
语法
<length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?
- 定义圆形半径或椭圆的半长轴，半短轴
border-[ top | bottom ]-[ left | right ]-radius: <length-percentage>{1,2}
- 设置元素的某个角的弧形
- 可选值
<length-percentage [0,∞]>{1,2}- 定义圆形半径或椭圆的半长轴，半短轴
边框对应逻辑属性
- 取值与实体属性一样
border-[ block | inline ]
- 速记属性
- 将属性 border-*-width, border-*-style, border-*-color 简写为一个属性
- 元素的逻辑块向/行向的边框属性
border-[ block | inline ]-color
border-[ block | inline ]-style
border-[ block | inline ]-width
border-[ block | inline ]-[ start | end ]
- 速记属性
- 将属性 border-*-*-width, border-*-*-style, border-*-*-color 简写为一个属性
- 元素的逻辑块向/行向的首/尾边框属性
border-[ start | end ]-[ start | end ]-radius
内边距 padding
padding: <length-percentage>{1,4}
- 速记属性
- 将属性 padding-bottom, padding-left, padding-right, padding-top 简写为一个属性
- 控制元素所有四条边的内边距区域
padding-[ top | bottom | left | right ]: <length-percentage [0,∞]>
内边距对应逻辑属性
padding-[ block | inline ]
padding-[ block | inline ]-[ start | end ]
内容 content
width: auto | <length-percentage>
- 设置元素的宽度
- 如果 box-sizing 属性被设置为 border-box，就转而设置边框区域的宽度
- 可选值
- auto：浏览器将会为指定的元素计算并选择一个宽度
- length：使用绝对值定义宽度
- percentage：将高度定义为相对包含块宽度的百分比
heigth: auto | <length-percentage>
- 设置元素的高度
- 如果 box-sizing 属性被设置为 border-box，就转而设置边框区域的高度
- 可选值
- auto：浏览器将会为指定的元素计算并选择一个高度
- length：使用绝对值定义高度
- percentage：将高度定义为相对包含块高度的百分比
[ max | min ]-[ width | heigth ]: none | <length-percentage>
设置元素最大/小的宽/高度
- min-* 设置会覆盖 max-*，max-* 设置会覆盖对应 width 或 height
可选值
- none：未设置最大值
- 仅限 max
- length
- percentage
显示 display
display: [ <display-outside> || <display-inside> ] | <display-legacy>
- 设置元素的内部和外部的显示类型
- 外部类型设置元素参与流式布局；内部类型设置子元素的布局
可选值
<display-outside>：规定元素的外部显示类型
block：该元素生成一个块级元素盒，在正常的流中，该元素之前和之后产生换行
inline：该元素生成一个或多个内联元素盒，它们之前或者之后并不会产生换行。在正常的流中，如果有空间，下一个元素将会在同一行上
<display-inside>：规定元素的内部显示类型
flow-root：该元素生成一个块级元素盒，其会建立一个新的块级格式化上下文，定义格式化上下文的根元素
table：该元素的行为类似于 HTML 中的 <table> 元素。它定义了一个块级别的盒子
flex：该元素的行为类似块级元素并且根据弹性盒模型布局它的内容
grid：该元素的行为类似块级元素并且根据网格模型布局它的内容
<display-listitem>
list-item- 行为类似于一个列表元素
- 可以与
list-style-type和list-style-position一起使用 - 可以与 <display-outside> 关键字或者
flow-root关键字一起使用
<display-internal>：一些布局模型
- 一些布局模型，例如
table和ruby
- table-row-group
- 该元素的行为类似于 HTML 的
<tbody>元素
- table-column-group
- 该元素的行为类似于 HTML 的
<colgroup>元素
- table-header-group
- 该元素的行为类似于 HTML 的
<thead>元素
- table-footer-group
- 该元素的行为类似于 HTML 的
<tfoot>元素
- table-row
- 该元素的行为类似于 HTML 的
<tr>元素
- table-column
- 该元素的行为类似于 HTML
<col>元素
- table-cell
- 该元素的行为类似于 HTML 的
<td>元素
- table-caption
- 该元素的行为类似于 HTML 的
<caption>元素
<display-box>：定义一个元素到底是否产生 display 盒
contents
- 用于选择元素的所有子节点，包括其文本节点、元素节点、伪元素和其他子节点，然后将它们作为一个虚拟的匿名盒子来处理
- 这个匿名盒子不会影响文档流，也不会影响元素的样式
- 使容器消失，使子元素成为DOM中上一级元素的子元素
none
- 使元素不再显示，其对布局不会有影响，所有的后代元素也不会再显示
- 为了使元素占据一个它通常占据的空间，但实际上没有渲染任何东西，应该使用
visibility属性。
<display-legacy>：使用单关键字的预组合的语法
inline-table：等于inline table
- 行为类似于 HTML 的
<table>元素，但实际是一个内联盒，而不是一个块级盒子，内部是一个块级上下文
inline-block：等于inline flow-root
- 将元素显示为行内块级元素
- 与行内元素不同，可以设置宽度、高度、内外边距和边框，并且可以在一行内显示多个元素
inline-flex：等于inline flex
- 元素的行为类似于内联元素并且它的内容根据弹性盒模型布局
inline-grid：等于inline grid
- 元素的行为类似于内联元素并且它的内容根据网格盒模型布局
支持双值语法
- 更好地描述元素相对于页面其他块是块级还是行内
现有单值与双值的对应关系
单值 | 双值 |
block | block flow |
flow-root | block flow-root |
inline | inline flow |
inline-block | inline flow-root |
flex | block flex |
inline-flex | inline flex |
grid | block grid |
inline-grid | inline grid |
visibility: visible | hidden | collapse
- 显示或隐藏元素而不更改文档的布局
- 要隐藏并从文档布局中移除元素，请将 display 属性设置为 none
可选值
- visible：元素框可见
- hidden：元素框不可见（不绘制），无法获得焦点，但仍然影响常规的布局
- 将其子元素的 visibility 设置为 visible，则该子元素依然可见
collapse
- 对于不同的元素有不同的效果
- 用于 <table> 行、列、列组和行组，将隐藏表格的行或列，并且不占用任何空间（与将 display: none 用于表格的行/列上的效果相当）
- 但是，计算其他行和列的大小时，仍会像显示折叠行或列中的单元格一样进行计算
- 此值允许从表中快速删除行或列，而不强制重新计算整个表的宽度和高度
折叠的 flex 元素和 ruby 元素会被隐藏，它们本来将要占用的空间会被移除
- 折叠的弹性项目将从渲染中完全移除，但留下一个“支柱”，以保持弹性线的交叉轴尺寸稳定
- 因此，如果一个flex容器只有一条flex行，动态折叠或取消折叠项目可能会改变flex容器的主尺寸，但保证不会影响其交叉尺寸，也不会导致页面布局的其余部分“摆动”
- 对于其他元素，
collapse与hidden相同
overflow: visible | hidden | clip | scroll | auto
- 速记属性
- 将属性 overflow-x, overflow-y 简写为一个属性
- 设置了元素溢出时所需的行为
- 溢出是指元素的内容太大，而无法适应它的块级格式化上下文（BFC）
- overflow属性只能应用于块级元素
可选值
visible
- 内容不能被裁减并且可能渲染到边距（padding）盒的外部
hidden
- 如果需要，内容将被裁减以适应边距（padding）盒
- 仍然是一个滚动的容器
- 不提供滚动条，不支持允许用户交互的方式滚动（如拖拽或者滚轮）
- 支持以编程的方式滚动（如设置 scrollLeft 等属性的值或 scrollTo() 方法）
clip
- 如果需要，内容将被裁减以适应边距（padding）盒
clip关键字禁止所有滚动，包括以编程的方式滚动
scroll
- 如果需要，内容将被裁减以适应边距（padding）盒
- 总是显示滚动条，以防止滚动条在内容改变时出现或者消失
- 打印机可能会打印溢出的内容
auto
- 取决于user agent
- 如果内容适应边距（padding）盒，与
visible相同，但仍建立了新的BFC
- 如果内容溢出，则浏览器提供滚动条
overflow-[ x | y ]
overflow-[ block | inline ]
布局 layout 与位置 positioning
部分属性值说明
布局尺寸属性值 *-width 中的 *-content 详解
- min-content：使用相关轴中的最小内容大小
- max-content：使用相关轴中的最大内容大小
fit-content：设置包含块的内容区域的最大可能大小
- 将给定大小夹紧为可用大小
- 以min-content值和max-content为界，并根据当前元素的内容进行计算
min(maximum size, max(minimum size, argument))
布局对齐属性值 <baseline-position> 详解
参考资料
baseline等价于first baseline
baseline: 所有项向基线对齐
- 距离其基线和交叉轴起始 cross-start 边缘之间的距离最大的项目与该行的交叉轴起始 cross-start 边缘对齐
- 直观地说就是，字体最大的项目的边缘与 cross-start 的边框对齐
- 如果该项目在必要的轴上没有基线，则会从项的边框盒中生成基线
后备对齐 fallback alignment
- 某些对齐方式只能在特定情况下实现，或者在占用空间方面受到限制。在这些情况下，会采用后备对齐来完全消耗多余的空间
first baseline对应的后备对齐为safe self-start或safe start
last baseline对应的后备对齐为safe self-end或safe end
布局对齐属性值 <overflow-position> 详解
- 与对齐关键字一起使用
- safe：如果flex项溢出对齐容器，则会用
start对该flex项进行对齐
- unsafe：不管溢出与否，仍使用原本的关键字
布局对齐属性值 <self-position> 详解
参考资料
center居中对其- 如果元素对应方向的尺寸大于其容器，则两侧的溢出距离相同
flex-start向适当的轴起始对齐- align-* 为交叉轴或块级轴
- justify-* 为主轴或行内轴
flex-end向适当的轴结尾对齐
start,end：将对齐主体与对齐容器的起始/结尾边缘在适当的轴上对齐
self-start,self-end：将对齐主体与对齐容器的边缘在适当的轴上对齐，以使其与对齐主体的起始/结尾侧相对应
start, end, self-start, self-end 区别
start和end是相对于flow的，并且与书写模式和脚本方向（CSS全局属性direction或HTML全局属性dir）有关
self-start和self-end也是相对于flow的，但它们与对齐主体的书写模式和脚本方向有关
布局对齐属性值 <content-distribution> 详解
stretch拉伸来填满可用空间，平均分配
space-between在容器中平均分布，相邻两行间距相等。容器的适当轴起点边和终点边分别与第一行和最后一行的边对齐- align-* 为交叉轴或块级轴
- justify-* 为主轴或行内轴
space-around在容器中平均分布，相邻两行间距相等。容器的适当轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半
space-evenly所有行沿适当轴均匀分布在对齐容器内- 每对相邻项、适当轴起点边和第一项、终点边和最后一项之间的间距都是完全相同的
- 与
space-around区别在于始末的间距
writing-mode: horizontal-tb, vertical-rl, vertical-lr
- 定义了文本水平或垂直排布以及在块级元素中文本的行进方向
- 切换书写模式时，也在改变块和内联文本的方向
- 为整个文档设置该属性时，应在根元素上设置它
可选值
horizontal-tb：块流向从上至下。对应的文本方向是横向的。
vertical-rl：块流向从右向左。对应的文本方向是纵向的。
vertical-lr：块流向从左向右。对应的文本方向是纵向的。
z-index: auto | <integer>
- 设定了一个定位元素及其后代元素或 flex 项目的 z-order
- 当元素之间重叠的时候，z-index 较大的元素会覆盖较小的元素在上层进行显示
可选值
- auto：盒子不会创建一个新的本地堆叠上下文
- 在当前堆叠上下文中生成的盒子的堆叠层级和父级盒子相同
- <integer>：生成的盒子在当前堆叠上下文中的堆叠层级
- 此盒子也会创建一个堆叠层级为 0 的本地堆叠上下文，意味着后代元素的 z-indexes 不与此元素的外部元素的 z-indexes 进行对比
order: <integer>
- 规定了容器中的项目在布局时的逻辑顺序
- 适用于弹性布局和网格布局
- 元素按照
order属性的值的增序进行布局，拥有相同order属性值的元素按照它们在源代码中出现的顺序进行布局
可选值
<integer>可以是负数
vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <length-percentage>
- 指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式
- 只对行内元素、行内块元素和表格单元格元素生效
用于两种环境
- 使行内元素盒模型与其行内元素容器垂直对齐
- 垂直对齐表格单元内容
可选值
- 没有基线的元素，使用外边距的下边缘替代
相对父元素
- baseline：使元素的基线与父元素的基线对齐
- sub：使元素的基线与父元素的下标基线对齐
- super：使元素的基线与父元素的上标基线对齐
- text-top：使元素的顶部与父元素的字体顶部对齐
- text-bottom：使元素的底部与与父元素的字体底部对齐
- middle：使元素的中部与父元素的基线加上父元素 x-height 的一半对齐
- <length-percentage>：使元素的基线对齐到父元素的基线之上的给定长度或百分比
相对行
- top：使元素及其后代元素的顶部与整行的顶部对齐
- bottom：使元素及其后代元素的底部与整行的底部对齐
对于表格单元格
- baseline
- 使单元格的基线，与该行中所有以基线对齐的其他单元格的基线对齐
- top
- 使单元格内边距的上边缘与该行顶部对齐
- middle
- 使单元格内边距盒模型在该行内居中对齐
- bottom
- 使单元格内边距的下边缘与该行底部对齐
gap: <'row-gap'> <'column-gap'>?
row-gap: normal | <length-percentage>
- 设置网格行之间的间隙
可选值
- normal：表示间隔宽度
- 在多列布局时默认间隔为
1em，其他类型布局默认间隔为 0
<length-percentage>
column-gap: normal | <length-percentage>
- 设置网格列之间的间隙
可选值
- normal：表示间隔宽度
- 在多列布局时默认间隔为
1em，其他类型布局默认间隔为 0
<length-percentage>
浮动 float 与定位 positioning
position: static | relative | absolute | fixed | sticky
- 指定一个元素在文档中的定位方式
- 在HTML文档中，元素的定位是按照它们在文档中出现的顺序计算的。浏览器会从文档的顶部开始，依次计算每个元素的位置
定位类型
- 定位元素
- 其计算后位置属性为 relative, absolute, fixed 或 sticky 的一个元素
- 相对定位元素
- 其计算后位置属性为 relative 的一个元素
- 绝对定位元素
- 其计算后位置属性为 absolute, fixed 的一个元素
- 粘性定位元素
- 其计算后位置属性为 sticky 的一个元素
可选值
static
- 指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置
top,right,bottom,left属性无效
- 可以使用
z-index属性来控制static元素的层叠顺序
relative
- 保留元素在文档流中原有的位置，然后再根据
top,right,bottom,left属性来移动元素
- 相对定位不会改变元素的层叠顺序
absolute
- 元素会被移出正常文档流，并不为元素预留空间
- 绝对定位不会保留元素在文档流中原有的位置，因此可能会对其他元素的位置造成影响
- 根据
top,right,bottom,left属性来相对于最近的已定位祖先元素进行定位 - 如果没有已定位的祖先元素，则相对于
<html>元素进行定位
fixed
- 元素会被移出正常文档流，并不为元素预留空间
- 固定定位不会保留元素在文档流中原有的位置，因此可能会对其他元素的位置造成影响
- 根据
top,right,bottom,left属性来相对于视口进行定位 - 无论滚动条如何滚动，固定定位的元素始终保持在屏幕的相同位置
sticky
- 使元素在滚动时"粘"在页面的某个位置，直到到达特定的阈值时，然后它会固定在该位置不再滚动
- 类似于 relative 和 fixed 的结合
- 当元素在视口内，它表现为相对定位（即与正常的文档流相对位置）；当滚动到特定位置时，它将固定在页面上，表现为固定定位（即相对于视口进行定位）
float: none | left | right
- 使元素脱离正常文档流，向左或向右移动，直到它的外边缘碰到包含块或另一个浮动元素的边缘
- 浮动元素后面的内容会围绕它流动
float 意味着使用块（block）布局，它在某些情况下会修改 display 值的计算值
指定值 | 计算值 |
inline | block |
inline-block | block |
inline-table | table |
table-row | block |
table-row-group | block |
table-column | block |
table-column-group | block |
table-cell | block |
table-caption | block |
table-header-group | block |
table-footer-group | block |
inline-flex | flex |
inline-grid | grid |
可选值
- none
- left
- right
逻辑值
- inline-start
- inline-end
与 position: absolute 对比
- 都可以让元素脱离文档流并且可以设置宽高
- 对行内元素来说，定位为
float的元素就相对为行内块级元素，仍会占据位置；对块级元素来说，定位为float的元素是浮动的，会浮动在块级元素之上 float主要用于调整元素的文本流位置和布局，通常用于创建多列布局，或让图片环绕在文本周围
position: absolute的元素会覆盖文档流中的其他元素（无论行内元素和块级元素）-
position: absolute主要用于在页面上创建特定的覆盖效果，通常用于创建浮动层、提示框、悬浮菜单等效果
float属性和position: absolute属性可以在同一个元素上一起使用。但是，当这两个属性同时应用于同一个元素时，position: absolute属性会覆盖float属性
clear: none | left | right | both
- 指定一个元素是否必须移动 (清除浮动后) 到在它之前的浮动元素下面
可选值
- none
- left：元素被向下移动以清除左浮动
- right：元素被向下移动以清除右浮动
- both：元素被向下移动以清除左右浮动
逻辑值
- inline-start
- inline-end
内容中断 break
断点
- 每一个可能的断点（即元素的边界）分别由前一个元素的 break-after 属性、后一个元素的 break-before 属性以及当前元素的 break-inside 属性所定义
- 要确定是否必须进行断开，应用以下规则：
- 如果三个相关值中的任何一个是强制断开值（always、left、right、page、column 或 region），则它具有优先权
- 如果其中多个值都是这样的断开，则取流中最后出现的元素的一个（即，break-before 值优先于 break-after 值，而 break-after 值本身又优先于 break-inside 值）
- 如果三个相关值中的任何一个是避免断开值（avoid、avoid-page、avoid-region 或 avoid-column），则在该点不会应用此类断开
break-inside: auto | avoid | avoid-column | avoid-page | avoid-region
- 描述了在多列布局页面下的内容盒子如何中断
可选值
- auto：不施加其他中断约束
- avoid：避免盒子内出现任何中断（包括page, column, region）
- avoid-page：避免盒子内出现页中断
- avoid-column：避免盒子内出现列中断
- avoid-region：避免盒子内出现区域中断
break-before: auto | avoid | avoid-column | avoid-page | avoid-region | column | page | region | left | right
可选值
通用中断值
- auto：允许但不强制在盒子前面插入任何中断
- avoid：避免在盒子前面出现任何中断（包括page, column, region）
页级中断
- avoid-page：避免在盒子前面插入页中断
- page：强制在盒子前面插入页中断
- left：强制在盒子前面插入一到两次页中断，以使下一页变为左页为准
- right：强制在盒子前面插入一到两次页中断，以使下一页变为右页为准
列级中断
- avoid-column：避免在盒子前面插入列中断
- column：强制在盒子前面插入列中断
区域中断
- avoid-region：避免在盒子前面插入区域中断
- region：强制在盒子前面插入区域中断
break-after: auto | avoid | avoid-column | avoid-page | avoid-region | column | page | region | left | right
- 可选值
- 与 break-before 类似但换成在盒子后面，参考 break-before 可选值
widows: <integer>
- 设置块级容器中必须显示在page, region 或 column 顶部的最小行数
- 在排版中，widows 是单独出现在页面顶部的段落的最后一行
orphans: <integer>
- 设置块级容器中必须显示在page, region 或 column 底部的最小行数
- 在排版中，orphans 是单独出现在页面底部的段落的最后一行
弹性布局 flex layout
flex-flow: <'flex-direction'> || <'flex-wrap'>
- 速记属性
- 将属性 flex-wrap, flex-direction 简写为一个属性
flex-wrap: nowrap | wrap | wrap-reverse
- 指定 flex 元素单行显示还是多行显示
- 开启后，当主轴无法显示所有 flex 项时，创建一个新的 flex 容器以容纳更多的 flex 项
- 除了 wrap-reverse，交叉轴的起始线和终止线与 flex-direction 定义的一致
可选值
- nowrap： flex 项被堆放到一行，这可能导致 flex 容器溢出
- wrap： flex 项被打断到多个行中
- wrap-reverse： 同wrap，但交叉轴的方向相反
flex-direction: row | column | row-reverse | column-reverse
- 指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向
轴线 axis 与其起始线 cross-start 和终止线 cross-end
- flexbox 的特性是沿着主轴或者交叉轴对齐之中的元素
主轴（main axis）由 flex-direction 定义，交叉轴（cross axis）垂直于它
- 主轴的开始和结束分别称为 main-start 和 main-end
- 交叉轴的开始和结束分别称为 cross-start 和 cross-end
flex-direction 可选值
row
row-reverse
- column
- column-reverse
- 选择了
row或者row-reverse，主轴将沿着 inline 方向延伸；选择了column或者column-reverse，主轴将沿着 block 方向延伸
row 受弹性容器的全局属性 dir 影响，如果 dir="ltr"，则起始线在左边，终止线在右边，对应 reverse 值则相反；如果 dir="rtl"，则起始线在右边，终止线在左边
flex
- 速记属性
- 将属性 flex-grow, flex-shrink, flex-basis 简写为一个属性
- 设置了弹性项如何增大或缩小以适应其弹性容器中可用的空间
- 具体值的解释详见对应属性
三值语法
- 前两个是无单位<number>，第三个是有效的宽度<width>
- 三个值分别对应 flex-grow, flex-shrink, flex-basis
双值语法
- 第一个值为无单位<number>，对应 flex-grow
- 第二个值可以是：
- 无单位<number>对应 flex-shrink
- 有效的宽度<width>对应 flex-basis
单值语法
- 无单位<number>：相当于三值语法
<number> 1 0
- 有效宽度<width>：对应 flex-basis
关键字
- none：元素会根据自身宽高设置尺寸，但完全非弹性，相当于
0 0 auto
- initial：元素会根据自身宽高设置尺寸，会缩短但不会伸长，相当于
0 1 auto
- auto：元素会根据自身宽高设置尺寸，会缩短也会伸长，相当于
1 1 auto
flex-grow: <number [0,∞]>
- 指定了 flex 项主尺寸的增长系数
- 只有在弹性盒子的可用空间大于0时才会起作用
- 规定了 flex 项在 flex 容器中分配剩余空间时的相对比例
- 可用空间是 flex 容器的大小减去所有 flex 项的 flex-basis 大小加起来的大小
- 如果所有的兄弟项目都有相同的 flex-grow 系数，那么所有的项目将剩余空间按相同比例分配，否则将根据不同的 flex-grow 定义的比例进行分配
- 如果某个弹性项
flex-grow不为 0，其余弹性项flex-grow均为 0，则该项可以获得全部剩余空间
flex-shrink: <number [0,∞]>
- 指定了 flex 项主尺寸的收缩系数
- 只有在弹性盒子的可用空间小于0时才会起作用
- 类似于 flex-grow
flex-basis: auto | content | <width>
- 指定了 flex 项在主轴方向上的初始大小
- 当一个 flex 项同时被设置了除值为 auto 外的 flex-basis 属性和 width 或 height （flex-direction: colum）时 , flex-basis 具有更高的优先级
可选值
- content：根据弹性项的内容自动调整大小
有效的 <width>
auto
- 在
writing-mode为horizontal时使用width的值，为vertical时使用height的值
- 当
width或height的值也是auto时，将使用content值
- <length-percentage>
- min-content
- max-content
- fit-content
网格布局 grid layout
grid
- 速记属性
- 将属性 grid-template, grid-auto-flow, grid-auto-rows, grid-auto-rows 简写为一个属性
- 设置网格布局的网格模板区域，显式、隐式轨道大小及网格区域的流方向
可选值
<'grid-template'>- 显示定义行轨道，显示定义列轨道
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?- 显式定义行轨道，隐式定义列轨道及其放置方式
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>- 隐式定义行轨道及其放置方式，显式定义列轨道
grid-template
- 速记属性
- 将属性 grid-template-area, grid-template-rows, grid-template-columns 简写为一个属性
可选值
- none：恢复默认设置，行列隐式生成
<'grid-template-rows'> / <'grid-template-columns'>
- 指定grid-template-rows与grid-template-columns之值，并设grid-template-areas为none
[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
<string>为 grid-template-area
<track-size>为 grid-template-rows
<explicit-track-list>为 grid-template-columns
grid-template-area: none | <string>+
- 通过创建一个网格模板区域来指定每个网格区域的名称
可选值
- none：没有定义任何的网格区块
<string>+
- 每一个给定的字符串会生成一行
- 字符串中用空格分隔的每一个单元 (cell) 会生成一列
- 多个同名的，跨越相邻行或列的单元称为网格区块
- 命名为
.可以使对应网格单元留空
- 非矩形的网格区块是无效的
grid-template-rows: none | <track-list> | <auto-track-list> | subgrid <line-name-list>?
- 基于网格行的维度，去定义网格线的名称和网格轨道的尺寸大小
可选值
- none：不明确的网格
- 所有的行和其大小都将由 grid-auto-rows 属性隐式的指定
subgrid：表示继承父网格中相应轨道的大小
<line-names>可选的自定义标识符，用于指定该位置的线名称
<track-list>：轨道列表，其中每个值指定相应行的大小
[ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
<track-repeat> 重复轨道，使用 repeat 函数重复指定次数的<track-size>和线名称
repeat([ <positive-integer> ], [ <line-names>? <track-size> ]+ <line-names>?)
<track-size> 轨道大小，可以用 minmax() 函数和 fit-content() 函数
<track-breadth> | minmax(<inflexible-breadth>, <track-breadth>) | fit-content(<length-percentage>)
<auto-track-list>：自动轨道列表，其中包含一个或多个自动重复的轨道大小和线名称
[ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
<auto-repeat> 自动重复轨道，使用 repeat 函数自动重复 <fixed-size>和线名称
repeat([ auto-fill | auto-fit ], [ <line-names>? <fixed-size> ]+ <line-names>?)
<fixed-repeat> 固定重复轨道，使用 repeat 函数重复指定次数的 <fixed-size>和线名称
repeat([ <positive-integer> ], [ <line-names>? <fixed-size> ]+ <line-names>?)
<fixed-size> 固定大小，可以用 minmax() 函数
<fixed-breadth> | minmax(<inflexible-breadth>, <fixed-breadth>) | minmax(<fixed-breadth>, <track-breadth>)
具体参数值
auto-fill 和 auto-fit 用于指定重复的方式
auto-fill 尽可能多地重复轨道，以填充网格容器的大小，不会导致网格溢出其网格容器
- 如果网格容器在相关轴上具有明确的或最大的大小，则重复次数是最大可能的正整数，不会导致网格溢出其网格容器
- 如果任何重复次数会导致溢出，则重复次数为1
- 如果网格容器在相关轴上具有明确的最小大小，则重复次数是满足该最小要求的最小可能正整数
auto-fit 行为与 auto-fill 相同，但在放置网格项目后，任何空的重复轨道都会被折叠
- 空轨道是指没有流动的网格项放置在其中或跨越其上的轨道
- 如果它们都是空的，这可能导致所有轨道都被折叠
- 折叠的轨道被视为具有单个0px的固定轨道大小函数，并且其两侧的间距也会折叠
auto
- 如果该网格轨道为最大时，该属性等同于 <max-content>；为最小时，则等同于 <min-content>
- 网格轨道大小为 auto 时，才可以被属性 align-content 和 justify-content 拉伸
<track-breadth> 轨道宽度，可以是长度值、百分比值、弹性盒值、关键字
<length-percentage>
<flex>
- min-content
- max-content
- auto
<inflexible-breadth> 非弹性轨道宽度，可以是长度值、百分比值、关键字
<length-percentage>
- min-content
- max-content
- auto
<fixed-breadth> 固定轨道宽度，可以是长度值、百分比值
<length-percentage>
subgrid 创建子网格
- 采用其父网格的跨度部分
- 网格行/列的尺寸将从父网格的定义中取得
- 子网格的项目将参与任何与父网格共享的轨道的内在尺寸计算
subgrid <line-name-list>?允许本地命名与父网格共享的网格线- 指定的<line-names>将分配给子网格的显式网格的每行一条网格线，从线1开始
- 忽略多余的<line-names>
grid-template-columns: none | <track-list> | <auto-track-list> | subgrid <line-name-list>?
- 基于网格列的维度，去定义网格线的名称和网格轨道的尺寸大小
- 值参照 grid-template-rows
grid-auto-rows: <track-size>+
- 指定隐式创建的行轨道大小
- 这可能在显示定位到超出网格轨道定义范围的行，或者由自动放置算法创建额外的行时发生
<track-size>参数值参照 grid-template-rows
grid-auto-column: <track-size>+
- 指定隐式创建的列轨道大小
- 这可能在显示定位到超出网格轨道定义范围的列，或者由自动放置算法创建额外的列时发生
<track-size>参数值参照 grid-template-column
grid-auto-flow: [ row | column ] || dense
- 控制网格布局中未显式定位的网格项的放置方式
可选值
- row：默认值。通过逐行填充来排列元素，在必要时增加新行
- column：通过逐列填充来排列元素，在必要时增加新列
dense：指定自动布局算法使用一种“稠密”堆积算法
- 如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱
- 如果省略则使用一种「稀疏」算法：在网格中布局元素时，布局算法只会「向前」移动，永远不会倒回去填补空白
grid-area: <grid-line> [ / <grid-line> ]{0,3}
- 速记属性
- 将属性 grid-row-start, grid-row-end, grid-column-start, grid-column-end 简写为一个属性
- 在网格布局中指定网格项所属的网格区域
- 可以用于将网格项放置在预定义的网格区域中，或者直接指定网格项的位置
grid-row: <grid-line> [ / <grid-line> ]?
- 速记属性
- 将属性 grid-row-start, grid-row-end 简写为一个属性
- 指定网格项在网格行中的位置
grid-column: <grid-line> [ / <grid-line> ]?
- 速记属性
- 将属性 grid-column-start, grid-column-end 简写为一个属性
- 指定网格项在网格列中的位置
grid-row-start: auto | <custom-ident> | <integer> && <custom-ident>? | span && [ <integer> || <custom-ident> ]
- 指定网格项在网格行中的起始位置，从而指定其网格区域的块起始边缘
可选值
- auto：指示该属性对网格项的放置没有任何贡献
<custom-ident>： 网格项放置到首个名为 <custom-ident>-start 的命名网格线
- 如果没有则将其视为
1 && <custom-ident>
<integer> && <custom-ident>?： 网格项放置到第 <integer> 个网格网格线
- 网格项放置到第
<integer>个网格网格线 - 如果给定负整数，则从显式网格的结束边缘开始反向计数
- 如果给定一个
<custom-ident>的名称，则只有具有该名称的网格线被计数 - 如果没有足够具有该名称的网格线，则所有隐式网格线都被假定具有该名称，以便找到此位置
<integer>不能为 0
span && [ <integer> || <custom-ident> ]
- 网格项跨越
<integer>跨度，使得网格项的网格区域的起始边缘距离末端边缘<integer>行
- 如果给定一个
<custom-ident>的名称，则只有具有该名称的网格线被计数 - 如果没有足够具有该名称的网格线，则所有隐式网格线都被假定具有该名称，以便找到此位置
- 如果省略
<integer>则<integer>默认为 1；<integer>不能为 0
<custom-ident>的值不能是span
grid-row-end: <grid-line>
- 指定网格项在网格行中的终止位置，从而指定其网格区域的块结束边缘
- 可选值参考 grid-row-start
grid-column-start: <grid-line>
- 指定网格项在网格列中的起始位置，从而指定其网格区域的块起始边缘
- 可选值参考 grid-row-start
grid-column-end: <grid-line>
- 指定网格项在网格列中的终止位置，从而指定其网格区域的块结束边缘
- 可选值参考 grid-row-start
flex 交叉轴对齐或 grid 块轴对齐 align-*
align-items: stretch | normal | <baseline-position> | <overflow-position>? <self-position>
- 应用于flex容器的属性，用于沿着交叉轴对齐 flex 项
- 确定了容器中所有 flex 项的默认对齐方式
全局属性，flex 只支持部分可选值
- 只支持
flex-start|flex-end|center|baseline|stretch
可选值
- stretch：轴线占满整个交叉轴
normal：取决于处在什么布局模式中
- 大部分情况与 stretch 一致，其余情况与 start 一致
- 表现为 start：在绝对定位布局中的替代元素；在网格布局中具有长宽比或内在尺寸的盒子
- 不适用于块级盒子及表格
<baseline-position>: baseline | first baseline | last baseline
- 详见
<baseline-position>详解
<overflow-position>: safe | unsafe
- 详见
<overflow-position>详解
<self-position>: center | flex-start | flex-end | start | end | self-start | self-end
- 详见
<baseline-position>详解
align-self: auto | stretch | normal | <baseline-position> | <overflow-position>? <self-position>
- 对齐当前 grid 或 flex 行中的元素，并覆盖已有的
align-items的值
可选值
auto设置为父元素的 align-items 值
- 其余值参考 align-items 属性值的解释
align-content: normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position>
- 设置了浏览器如何沿着弹性盒子布局的交叉轴和网格布局的主轴在内容项之间和周围分配空间
- 对单行弹性盒子无效
可选值
<content-distribution>: strecth | space-between | space-around | space-evenly
- 详见
<content-distribution>详解
- 其余值参考 align-items 属性值的解释
flex 主轴对齐或 grid 行轴对齐 justify-*
justify-items: stretch | normal | <baseline-position> | <overflow-position>? <self-position> | legacy | left | right
- 为所有容器中的项目定义了默认的
justify-self，可以使这些项目以默认方式沿适当轴线对齐到每个容器
是否生效取决于当前布局模式
- 在块级布局中，会将其包含的项目在其行内轴上对齐；
- 网格布局中，会将其网格区域内的项目在其行内轴上对齐；
- 绝对定位元素中，会将其包含的项目在其行内轴上对齐，同时考虑 top、left、bottom、right 的值；
- 表格单元和弹性盒子布局中，该属性被忽略；
可选值
- stretch：轴线占满整个行轴
normal：取决于处在什么布局模式中
- 大部分情况与 stretch 一致，其余情况与 start 一致
- 表现为 start：在绝对定位布局中的替代元素；在网格布局中具有长宽比或内在尺寸的盒子
- 不适用于 flex 盒子布局及表格
<baseline-position>: baseline | first baseline | last baseline
- 详见
<baseline-position>详解
<overflow-position>: safe | unsafe
- 详见
<overflow-position>详解
<self-position>: center | flex-start | flex-end | start | end | self-start | self-end
- 详见
<baseline-position>详解
legacy: 将值继承给盒子的后代- 如果后代具有
justify-self: auto的值，则后代不考虑 legacy 关键字，只考虑与其相关联的左、右或中心值
left: 项目在对齐容器的左边缘，并彼此对齐。如果属性的轴不与行内轴平行，则此值的行为类似于start
right: 项目在对齐容器的右边缘，并彼此对齐。如果属性的轴不与行内轴平行，则此值的行为类似于end
justify-self: auto | stretch | normal | <baseline-position> | <overflow-position>? <self-position> | left | right
- 设置单个项在其布局容器适当轴中的对齐方式
- 可选值
auto设置为父元素的 justify-items 值- 其余值参考 justify-items 属性值的解释
justify-content: normal | <content-distribution> | <overflow-position>? <content-position> | left | right
- 定义如何顺着其布局容器适当轴分配项目之间及其周围的空间
- 可选值
- 详见
<content-distribution>详解 - 其余值参考 align-items 属性值的解释
<content-distribution>: strecth | space-between | space-around | space-evenly
多列布局 multi-column layout
columns: <'column-width'> || <'column-count'>
- 速记属性
- 将属性 column-count, column-width 简写为一个属性
column-count: auto | <integer [1,∞]>
- 描述多列布局中的列数
可选值
- auto: 由其他CSS属性值决定，如 column-width
<number>: 用来描述元素内容被划分的理想列数- 假如 column-width 也被设置为非零值，此参数仅表示所允许的最大列数
column-width: auto | <length> | max-content | min-content | fit-content
- 设置多列布局中的理想列宽
- 容器将具有尽可能多的列，而没有任何列的宽度小于列宽值
- 剩余的可用空间会填充到这些列上
- 如果容器的宽度小于指定值，则单列的宽度将小于声明的列宽
可选值
- auto：由其他CSS属性值决定，如 column-count
- <length>
- max-content
- min-content
- fit-content
column-rule
- 速记属性
- 将属性 column-rule-width, column-rule-style, column-rule-color 简写为一个属性
- 在多列布局中设定分割线的宽度、样式和颜色
column-rule-color
column-rule-style: <br-style>
- 速记属性
- 在多列布局中设定分割线的样式
可选值
none, hidden：不显示分割线
- 如果没有设定背景图片，
column-rule-width计算后的值将是0，即使先前已经指定过它的值
- 在分割线重叠情况下，
none值优先级最低，hidden值优先级最低 none值：如果存在其他的重叠分割线，则会显示为那个分割线hidden值：如果存在其他的重叠分割线，不会显示分割线
- 圆点虚线 dotted
- 圆点半径为
column-rule-width计算值
- 方形虚线 dashed
- 实线 solid
- 双实线 double
- 宽度为
column-rule-width
- groove：显示为有雕刻效果的分割线
- ridge：显示为有浮雕效果的分割线
- inset：显示为有陷入效果的分割线
- outset：显示为有突出效果的分割线
column-rule-width
column-span: none | all
- 被设置为
all时，可以让一个元素跨越所有的列
可选值
- none：元素不跨多个列
all：元素横跨所有列
- 元素出现之前，出现在元素之前的正常流中的内容在所有列之间自动平衡
- 该元素建立一个新的块格式上下文
column-fill: all | balance
- 控制如何将内容划分为列
balance意味着所有列中的内容都将具有相同的高度
可选值
- auto：表明列是顺序填充的
- balance：表示内容在列之间平均分配，各列尽量具有相同的高度
特效 effect
cursor
- 设置光标类型，在鼠标指针悬停在元素上时显示相应样式
内容生成
content: normal | none | [ <content-replacement> | <content-list> ] [ / [ <string> | <counter> ]+ ]?
结合伪元素 ::before 和 ::after 可以实现内容生成
::before在对应元素前生成内容，::after在对应元素后生成内容
- 生成的内容不会出现在DOM解析树中，无法用JavaScript影响对应内容
- 类似于
display: none，不会生成块级盒子
可选值
normal不生成任何内容
none生成空内容
[ <content-replacement> | <content-list> ] 指定要生成的内容
替代内容：<url> | <gradient>
- url 一般是指向图片的地址，用于设置图标等
内容列表：[ contents | <string> | <image> | <counter> | <quote> | <target> | <leader()> ]+
contents 设置元素的内容为其后代元素
如果在元素上设置
- 这是默认值，因为
content的初始值为normal，而normal在元素上计算为contents
无效示例，相当于 none
当元素content值为none时有效
如果在元素的其他伪元素上设置
- 检查它是否未在“前面”的伪元素上设置，按以下顺序，深度优先：
- 元素本身
::before::after
- 如果已经使用，则计算为空（类似于
none）。仅检查实际生成的伪元素
- 未设置则设置内容为其后代元素
<counter> 插入计数器
- 使用 counter() 或 counters() 函数插入计数器
<quote> 设置引号或者改变引号的层级
open-quote|close-quote被 quotes 属性中的值替代
no-open-quote|no-close-quote不插入内容但改变引号的深度
<target> 定义目标的计数器或文本
target-counter( [ <string> | <url> ], <custom-ident>, <counter-style>? )
target-counters( [ <string> | <url> ] , <custom-ident>, <string>, <counter-style>? )
target-text( [ <string> | <url> ], [ content | before | after | first-letter ]? )
- 第二个参数指定检索哪些内容
- 第一个参数用于指定目标元素
<leader()> 插入连接线
leader( dotted | solid | space | <string> )
dotted = "."
solid = "_"
space = " "
[ / [ <string> | <counter> ]+ ]? 在生成的内容中插入字符串或计数器值
- 允许您在生成的内容中插入字符串
<string>或计数器值<counter>
<counter>可以是 counter 函数或 counters 函数
counter( <counter-name>, <counter-style>? )
counters( <counter-name>, <string>, <counter-style>? )
杂项
list-style
- 速记属性
- 将属性 list-style-type, list-style-image, list-style-position 简写为一个属性
- 设置列表项标记的样式
list-style-type: none | <string> | <counter-style-name> | <symbols()>
- 设置列表元素的标记（比如圆点、符号、或者自定义计数器样式）
- list-style-type 属性可以应用在任何 display: list-item 的元素上
可选值
- none 不显示列表项的标记
<string>显示指定字符串为标记
<counter-style-name> 预定义的计数器样式
- 简单预定义计数器样式分为Numeric, Alphabetic, Symbolic, fixed这四大类
- 复杂预定义计数器样式包括
- 手写东亚计数器样式 Longhand East Asian Counter Styles
- 埃塞俄比亚数字计数器样式 Ethiopic Numeric Counter Style
<symbols()>详见CSS函数 symbols()
list-style-image: none | <url> | <gradient>
- 指定一个能用来作为列表元素标记的图片
- 可以用 background 属性并控制缩进、行高和内间距来实现类似效果
- 可选值
- none 说明没有图片被用作标记
- 如果这个值被设定，那么 list-style-type 中定义的值会被覆盖
list-style-position: inside | outside
counter-set: none | [ <counter-name> <integer>? ]+
- 将计数器设置为指定值
- 如果没有对应名称的计数器则创建计数器
可选值
none不设置计数器
<counter-name> 需要递增的计数器的名称
<custom-ident>类型值
<integer> 计数器初始值
- 如果没有给出，默认为 0
counter-increment: none | [ <counter-name> <integer>? ]+
- 给计数器增加对应值
可选值
none不得增加计数器
<counter-name> 需要递增的计数器的名称
<custom-ident>类型值
<integer> 计数器增加值
- 如果没有给出，默认为 1
counter-reset: none | [ <counter-name> <integer>? | <reversed-counter-name> <integer>? ]+
- 将计数器重置为指定值
可选值
none不执行计数器重置
<counter-name> 需要重置的计数器的名称
<custom-ident>类型值
<reversed-counter-name> 需要重置的计数器的名称
<custom-ident>类型值
<integer> 计数器重置值
- 如果没有给出，默认为 0
属性元素
图像、媒体和表单元素
替换元素
图像和视频被描述为替换元素。 这意味着CSS不能影响这些元素的内部布局-仅影响它们在页面上于其他元素中的位置。
- object-fit：替换元素可以以多种方式被调整到合乎盒子的大小
- fill、contain、cover、none、scale-down
form元素
总结
在一些浏览器中，表单元素默认不会继承字体样式，因此如果你想要确保你的表单填入区域使用body中或者一个父元素中定义的字体，你需要向你的CSS中加入这条规则
- 样式化文本输入元素：
<input type="text"><input type="email"><textarea>
为了保证统一，将所有元素的内外边距均设为0是个好主意，然后在单独进行样式化控制的时候将这些加回来
- 在
<textarea>上设置overflow: auto以避免IE在不需要滚动条的时候显示滚动条
样式化表格
- 使您的表格标记尽可能简单，并且保持灵活性，例如使用百分比，这样设计就更有响应性。
- 使用
table-layout: fixed创建更可控的表布局，可以通过在标题width中设置width来轻松设置列的宽度。
- 使用
border-collapse: collapse使表元素边框合并，生成一个更整洁、更易于控制的外观。
使用斑马线来让其他行更容易阅读。
:nth-child选择器用于选择特定的子元素
- 为所有的行添加了一个重复的噪点背景色块来提供纹理
- 给整个表格提供了一个纯的背景颜色，这样浏览器不支持
:nth-child选择器仍然有它们的正文行的背景
- 使用
text-align直线对齐您的<th>和<td>文本，使内容更整洁、更易于跟随。
样式化列表
列表默认值
列表间距
列表样式
- list-style-type ：设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。
- list-style-position ：设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。
- list-style-image ：允许您为项目符号使用自定义图片，而不是简单的方形或圆形。
可以缩写成list-style：
列表计数
- start
- reversed
- value
用于自定义列表计数和样式的高级工具
样式化链接
链接状态
这几个规则的顺序是有意义的，因为链接的样式是建立在另一个样式之上的，比如，第一个规则的样式也会在后面的规则中生效，一个链接被激活 (activated) 的时候，它也是处于悬停 (hover) 状态的
- Link (没有访问过的)
- Visited
- Focus
- Hover
- Active
默认样式
- 链接具有下划线
- 未访问过的 (Unvisited) 的链接是蓝色的。
- 访问过的 (Visited) 的链接是紫色的.
- 悬停 (Hover) 在一个链接的时候鼠标的光标会变成一个小手的图标。
- 选中 (Focus) 链接的时候，链接周围会有一个轮廓，你应该可以按 tab 来选中这个页面的链接 (在 Mac 上, 你可能需要使用Full Keyboard Access: All controls 选项，然后再按下 Ctrl + F7，这样就可以起作用)
- 激活 (Active) 链接的时候会变成红色 (当你点击链接时，请尝试按住鼠标按钮。)
包含图标
转为按钮
CSS 常见主题
响应式设计 responsive web design
自适应布局 adaptive layout
- 基于固定尺寸设计，通过针对不同设备设置不同的CSS样式，以适应不同设备屏幕的布局方式
- 与响应式设计不同，自适应布局并不是完全基于流式布局，而是通过断点来实现不同的布局效果
- 关键在于设置断点，也就是在不同屏幕尺寸的情况下，改变设计的布局和样式
- 通常情况下，断点会分为3-5个，以适应主流设备
响应式布局 responsive layout
- 一种用于网页设计的技术，它能够自动适应不同设备和屏幕尺寸，保证网页在各种设备上都能够呈现出最佳的用户体验
通过使用媒体查询和弹性布局来实现自适应性
- 媒体查询可以根据不同的设备特性（如屏幕宽度、分辨率等）来设置不同的样式，从而实现适应不同设备的布局
- 弹性布局是一种基于相对尺寸（如百分比数搭配最大值最小值、em/rem 相对单位、viewport 视口尺寸等）的布局，它可以根据屏幕尺寸自动调整元素大小和位置，从而实现响应式效果
实现响应式布局
- 现有的CSS布局如 Flex 布局和 Grid 布局
- 借助成熟的前端工具如 Bootstrap 中的组件来创建弹性布局
- 自行编写媒体查询及基于特定相对尺寸方案实现的弹性布局的CSS代码
调整元素大小
- 原始尺寸或固有尺寸
设置块级元素的具体尺寸
- width, height
- 百分比
- 使用百分比作为元素外边距（ margin ）或填充（ padding ）的单位时，值是以包含块的内联尺寸进行计算的，也就是元素的水平宽度。
设置块级元素的最大尺寸
- max-width, min-width, max-height, min-height
缩放元素的大小
- transform
视口单位
- vw, vh, vmin, vmax
调整盒模型
- box-sizing
- content-box, border-box
- padding, margin
CSS 实践
浏览器支持查询
前向兼容 ployfill
- CSS推出至今已经经历了很多版本，有些新功能在旧的浏览器上并不能正确显示
- polyfill是一段代码（通常是Web上的JavaScript），用于在本机不支持它的旧浏览器上提供现代功能
浏览器厂商前缀
- 一种特殊前缀，用于指示某个CSS属性或规则是特定浏览器供应商的实验性或非标准属性
- 通常用于在浏览器支持新的CSS功能之前测试和使用这些功能
常见前缀
webkit-：用于WebKit浏览器，如Safari和Chrome
moz-：用于Mozilla浏览器，如Firefox
ms-：用于Microsoft浏览器，如Internet Explorer和Edge
o-：用于Opera浏览器
基于 caniuse 自动添加厂商前缀
重置CSS默认样式
- 每个浏览器都有内置的默认样式表
- 整体上，不同浏览器提供的默认样式表是相似的，但也存在一定的差异
- 为此，开发人员在应用他们自己的 CSS 之前，常常需要抹平这些差异
- CSS 重置：重置为初始值
- CSS 标准化：调整不同浏览器的 CSS 表现使它们具有相似的外观
CSS Sprite
- 一种技术，它允许您将多个图像组合成一个大图像，然后使用CSS的background和background-position属性在网页上显示单个图像
- 可以减少HTTP请求的数量，从而提高网页加载速度
BEM：块级元素修饰符（Block Element Modifier）
- 可以帮助您在前端开发中创建可重用组件和代码共享
- BEM 建议尽可能避免使用 ID 和标签名称
BEM 定义
块 Block
- 其本身具有意义的独立实体
- 虽然块可以嵌套并相互作用，但在语义上它们保持相等。没有优先权或层次结构
- 没有DOM表示的整体实体（例如控制器或模型）也可以是块
header,container,menu,checkbox,input
元素 Element
- 一个块的一部分，它没有独立的意义，并且在语义上与它的块相连
menu item,list item,checkbox caption,header title
修饰符 Modifier
- 块或元素上的标志
- 使用它们来更改外观 appearance、行为 behavior 或者状态 state
disabled,highlighted,checked,fixed,size big,color yellow
BEM 命名
块 Block
- 块名可以由拉丁字母、数字和短划线
-组成 - 要形成一个CSS类，请为名称空间添加一个短前缀
.block
- 如果接受类名，则任何DOM节点都可以是块
- 仅使用类名选择器。不使用标签名称或ID。不依赖于页面上的其他块/元素
元素 Element
- 元素名称可以由拉丁字母、数字、短划线
-和下划线_组成 - CSS类的格式是块名加两个下划线加上元素名
.block__elem
- 块中的任何DOM节点都可以是一个元素
- 在给定的块中，所有元素在语义上都是相等的
样例
Good
Bad
修饰符 Modifier
- 修饰符名称可以由拉丁字母、数字、短划线
-和下划线_组成 - CSS类的格式是块或元素的名称加上两个短划线
.block--mod.block__elem--mod.block--color-black.block--color-red
- 修饰符是添加到块/元素DOM节点的额外类名
- 仅将修改器类添加到它们修改的块/元素，并保留原始类
样例
Good
Bad
使用修饰符类名作为选择器
.block--hidden { }
基于块级修改器更改元素
.block--mod .block__elem { }
更改元素
.block__elem--mod { }
BEM 优势
- 模块化
- 块样式从不依赖于页面上的其他元素，因此您永远不会遇到级联问题
- 您还可以将块从已完成的项目转移到新项目
- 可重复使用性
- 以不同的方式组合独立的块，并智能地重用它们，可以减少您必须维护的CSS代码量
- 有了一套样式指导原则，您可以构建一个块级元素库，使您的CSS超级有效
- 结构
- BEM方法为CSS代码提供了一个简单易懂的坚实结构
HTML 示例
CSS 示例
codepen 示例
OOCSS：面向对象的CSS（Object-Oriented CSS）
- OOCSS的基本理念是将你的CSS分解成可复用的对象，于是你可以在你的站点上任何需要的地方使用。OOCSS的标准示例是在The Media Object中所描述的排布。这一排布一方面让图片、视频或者其他元素保持固定尺寸，而另一方面也让其他内容可伸缩。这是我们在用于评论、列表等网站随处可见的排布。
创建简化测试用例
- 如果您的标记是动态生成的（例如通过 CMS），请生成显示该问题的静态版本。 诸如 CodePen 之类的代码共享站点可用于托管简化的测试用例，因为它们可以在线访问，并且您可以轻松地与同事共享它们。 您可以先在页面上执行“查看源代码”，然后将 HTML 复制到 CodePen 中，然后获取所有相关的 CSS 和 JavaScript 并将其包括在内。 之后，您可以检查问题是否仍然明显。
- 如果删除 JavaScript 不能解决问题，请不要包含 JavaScript。 如果删除 JavaScript 确实消除了问题，那么请尽可能多地删除与问题无关的 JavaScript，保留导致问题的原因。
- 删除所有不会导致此问题的 HTML。 删除布局中的组件甚至主要元素。 在保留问题可重现的情况下把代码量尽量减少。
- 删除掉任何不影响问题的 CSS。
CSS 参考文档及优秀案例
- 参考文档
- Author:白鸟3
- URL:https://blog.kun2peng.top/internet/css_intro
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
