CSS

速记

子元素 my-auto 只在父元素 flex, 父元素 grid 或父元素 relative 子元素 absolute top-[value] bottom-[value] 下有效

面试题

BFC

BFC, Block Formatting Context 块级格式上下文

元素开启 BFC 后, 该元素的子元素没有 margin 塌陷问题
元素开启 BFC 后, 该元素不会被其他浮动元素覆盖
元素开启 BFC 后, 即使该元素的子元素浮动, 该元素的高度也不会塌陷

开启 BFC 的元素

根元素 html
浮动元素, float 属性值不等于 none 的元素 float: left | right
absolute 绝对或 fixed 固定定位的元素 position: absolute | fixed
非 block 的块级容器: display 属性值为 display: inline-block | flex | inline-flex | grid | inline-grid | flow-root 的元素
overflow 属性值不等于 visible 的元素 overflow: hidden | auto | scroll
表格单元: display: table-cell | table-caption
多列容器

margin 塌陷

父元素没有 border/padding/inline 内容, 并且不是 BFC 时, 顶部子元素的 margin-top 会与父元素合并
父元素没有 border/padding/inline 内容, 并且不是 BFC 时, 底部子元素的 margin-bottom 会与父元素合并
相邻块级元素的垂直外边距会合并: 都为正则取较大值, 都为负则取较小值, 一正一负则相加

解决

父元素设置宽度 >0 的 padding
父元素设置宽度 >0 的 border
父元素成为 BFC, 例如设置 overflow: hidden 或 display: flow-root

BEM 架构

block__element—modifier

.namespace-block__element--modifier {
}

选择器

基本选择器

通配符选择器 *
元素选择器 h1
类选择器 .className
ID 选择器 #id

组合选择器

交集 (与) 选择器 .selector1.selector2
并集 (或) 选择器, 也称为分组选择器 .selector1, .selector2
后代选择器 .selector1 .selector2
子代选择器 .selector1 > .selector2
相邻兄弟选择器 .selector1 + .selector2
通用兄弟选择器 .selector1 ~ .selector2
属性选择器
- .selector[attr] 选择有 attr 属性的元素
- .selector[attr="val"] 选择有 attr 属性, 并且 attr=“val” 的元素, 例如 a[href="https://example.com"] 选择有 href 属性, 并且 href=“https://example.com” 的 a 元素
- .selector[attr^="val"] 选择有 attr 属性, 并且 attr 以 val 开头的元素, 例如 div[class^="bg-"] 选择存在 class 属性, 并且 class 以 bg- 开头的 div 元素
- .selector[attr$="val"] 选择有 attr 属性, 并且 attr 以 val 结尾的元素, 例如 div[class$="-green"] 选择存在 class 属性, 并且 class 以 -green 结尾的 div 元素
- .selector[attr*="val"] 选择有 attr 属性, 并且 attr 包含 val 的元素, 例如 div[class*="-"] 选择存在 class 属性, 并且 class 包含 - 的 div 元素
伪类选择器
- :hover 鼠标悬浮时选择元素
- :active 鼠标按下时选择元素
- :focus 获得焦点 (鼠标点击, 触摸, tab 键选中) 时选择元素
- :first-child 所有兄弟元素中的第一个, 例如 div > p:first-child 选择 div 的第一个子元素, 并且是 p 元素
- :last-child 所有兄弟元素中的最后一个, 例如 div > p:last-child 选择 div 的最后一个子元素, 并且是 p 元素
- :nth-child(n) 所有兄弟元素中的第 n 个, 例如 div > p:nth-child(2) 选择 div 的第 2 个子元素, 并且是 p 元素
- :first-of-type 所有同类型的兄弟元素中的第一个, 例如 div > p:first-of-type 选择 div 的所有 p 子元素中的第一个
- :last-of-type 所有同类型的兄弟元素中的最后一个, 例如 div > p:last-of-type 选择 div 的所有 p 子元素中的最后一个
- :nth-of-type(n) 所有同类型的兄弟元素中的第 n 个, 例如 div > p:nth-of-type(2) 选择 div 的所有 p 子元素中的第 2 个
- :nth-last-child(n) 所有兄弟元素中的倒数第 n 个, 例如 div > p:nth-last-child(2) 选择 div 的倒数第二个子元素, 并且是 p 元素
- :only-child 没有兄弟的元素, 例如 div > p:only-child 选择 div 唯一的 p 子元素
- :only-of-type 没有同类型兄弟的元素, 例如 div > p:only-of-type 选择 div 唯一的 p 子元素
- :root 根元素
- :empty 没有子节点, 并且没有文本内容的元素 (包括空白字符)
- :not(condition) 选择不满足 condition 的元素
  - 例如 div > p:not(.exclude) 选择 div 的所有 p 子元素, 但不包含有 .exclude 类名的 p 元素
  - 例如 div > p:not(:first-child) 选择 div 的所有 p 子元素, 但不包含第一个子元素的 p 元素
- :checked 选择被选中的 radio 单选 <input type="radio" checked> 或 checkbox 复选 <input type="checkbox" checked>
- :enabled 选择可用的表单元素 (没有 disabled)
- :disabled 选择禁用的表单元素 (有 disabled)
伪元素选择器
- ::first-letter 选择元素中的第一个字母
- ::first-line 选择元素中的第一行
- ::selection 选择被选中的内容
- ::placeholder 选择输入框的 placeholder
- ::before 在元素前创建一个伪元素, 必须使用 content 属性指定内容, 例如 div:before { content: "Hello CSS" } 在 div 元素前创建一个子元素, 内容为 “Hello CSS”
- ::after 在元素后创建一个伪元素, 必须使用 content 属性指定内容, 例如 div:after { content: "Hello CSS" } 在 div 元素后创建一个子元素, 内容为 “Hello CSS”

关于 n

0: 不选择任何子元素
n: 选择所有子元素
2n, even: 选择序号为偶数的子元素
2n+1, odd: 选择序号为奇数的子元素
-n+3: 选择前 3 个子元素
a*n+b: 选择序号为 a*0+b, a*1+b, a*2+b, ... 的子元素

选择器的优先级

!important > 内联样式 > ID 选择器 > 类/伪类/属性选择器 > 元素/伪元素选择器 > * 通配符选择器 > 继承的样式

计算权重 (a, b, c, d)

a: 内联样式
b: ID 选择器的数量
c: 类, 伪类, 属性选择器的数量
d: 元素, 伪元素选择器的数量

例

ul > li, 权重 (0, 0, 0, 2)
div ul > li p a span, 权重 (0, 0, 0, 6)
#id .className, 权重 (0, 1, 1, 0)
#id .className a, 权重 (0, 1, 1, 1)
#id .className a:hover, 权重 (0, 1, 2, 1)

CSS 三大特性

层叠性: 如果有样式冲突, 则根据选择器优先级, 层叠 (覆盖) 样式
继承性: 元素继承父元素或祖先元素的某些样式
优先级: !important > 内联样式 > ID 选择器 > 类/属性/伪类选择器 > 元素/伪元素选择器; 同权重时后声明覆盖

颜色

* {
  /* rgb, rgba (alpha channel): 红, 绿, 蓝, alpha 透明度 */
  color: rgb(255, 0, 0);
  color: rgba(255, 0, 0, 0.5);
  /* hex */
  color: #0000ff;
  color: #0000ff80;
  /* hsl, hsla: 色相, 饱和度, 亮度, alpha 透明度 */
  color: hsl(0, 100%, 50%);
  color: hsla(0, 100%, 50%, 0.5);
}

字体

font-size 字体大小
font-family 字体族
font-style 字体样式: normal 正常, italic 斜体, oblique 倾斜体
font-weight 字体粗细: lighter 更细, normal 正常, bold 粗, bolder 更粗, 100-900
font 复合属性
@font-face web 字体, 浏览器自动下载
字体图标
- 字体图标比图片更清晰
- 灵活: 方便调整大小, 颜色, 样式
- 兼容性好

@font-face {
  font-family: "Maple Mono";
  src: url("./src/assets/MapleMono.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

文本

color 文本颜色
letter-spacing 字母间距: 默认 0, 正值增大间距, 负值减小间距
word-spacing 单词间距: 默认 0, 正值增大间距, 负值减小间距
text-decoration-line 文本装饰线的位置: none, underline, overline, line-through
text-decoration-style 文本装饰线的样式: solid, double, dotted, dashed, wavy
text-decoration-color 文本装饰线的颜色
text-decoration 复合属性: 默认 text-decoration: none
text-indent 文本首字母缩进: 属性值是长度单位
text-align 文本水平对齐: left 左对齐 (默认), center 居中对齐, right 右对齐
line-height 行高
vertical-align 文本垂直对齐: baseline 基线对齐 (默认), top 顶部对齐, middle 中间对齐, bottom 底部对齐
text-shadow 文本阴影: 默认 text-shadow: none
- text-shadow: offset-h offset-v blur color
- offset-h 水平偏移
- offset-v 垂直偏移
- blur 模糊半径
- color 阴影颜色
text-overflow 文本溢出: clip 裁剪溢出部分; ellipsis 省略溢出部分, 将溢出部分替换为 …;
white-space 文本换行

text-overflow 生效的前提是: 块级元素显式设置 overflow 为 hidden, scroll, auto (非 visible), white-space 为 nowrap

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

white-space 文本换行	代码中的换行符	连续的空白符	遇到元素边界时
normal	视为空白符	合并	换行
nowrap	视为空白符	合并	不换行
pre	保留	不合并	不换行
pre-wrap, break-spaces	保留	不合并	换行
pre-line	保留	合并	换行

列表

list-style-type 列表符号: none, square, disc, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha
list-style-position 列表符号的位置: inside 在 li 内部, outside 在 li 外部
list-style-image 列表符号的图片: url(列表符号图片地址)
list-style 复合属性

表格

表格属性

table-layout 列宽度: auto, fixed
border-spacing 表格项间距
border-collapse 表格项边框合并: collapse 合并, separate 不合并
empty-cells 隐藏没有内容的表格项: show 显示 (默认), hide 隐藏
caption-side 表格标题的位置: top 表格顶部, bottom 表格底部

表格边框属性

border-width 边框宽度
border-color 边框颜色
border-style 边框样式: none, solid, dashed, dotted, double
border 复合属性

背景

background-color 背景颜色: 默认 transparent
background-image 背景图片: url(背景图片地址)
background-repeat 背景图片的重复方式: repeat 重复 (默认); repeat-x 水平方向重复; repeat-y 垂直方向重复; no-repeat 不重复
background-position 背景图片的位置; 或以元素左上角为坐标原点, 背景图片左上角的 x, y 坐标
background-origin 背景图片的坐标原点
- padding-box 从 padding 左上角开始显示背景图片 (默认)
- border-box 从 border 左上角开始显示背景图片
- content-box 从 content 左上角开始显示背景图片
background-clip 背景图片的裁剪方式
- border-box: border, padding, content 有背景图片
- padding-box: border 没有背景图片, padding, content 有背景图片
- content-box: border, padding 没有背景图片, content 有背景图片
- text: 文本背景
background-size 背景图片的大小
- background-size: 40rem 30rem, background-size: 100% 100%
- auto 背景图片的实际大小 (默认)
- contain 背景图片等比例缩放, 元素的部分区域可能没有背景
- cover 背景图片等比例缩放, 背景图片可能显示不完整
background 复合属性, 多个背景图片, 使用逗号分隔

.selector {
  /* 背景颜色 url 是否重复 位置 / 大小 坐标原点 裁剪方式 */
  background: green url("./assets/bg.png") no-repeat 1rem 1rem / 40rem 30rem
    border-box content-box;
}

鼠标

长度单位

px 像素
em 相对元素 font-size 的倍数
rem 相对根元素 (html) font-size 的倍数
% 相对包含块 font-size 的倍数
vw: viewport width, 1vw = 视口宽度的 1%
vh: viewport height, 1vh = 视口高度的 1%
vmax: vmax = Math.max(vw, vh)
vmin: vmin = Math.min(vw, vh)

块级元素, 行内元素, 行内块元素

块级元素 (block)

块级盒子独占一行
宽度撑满父元素
高度由内容撑开
可以使用 CSS 设置宽高

行内元素 (inline)

行内盒子不独占一行, 溢出时换行
宽度由内容撑开
高度由内容撑开
不能使用 CSS 设置宽高

行内块元素 (inline-block)

行内块盒子不独占一行, 溢出时换行
宽度由内容撑开
高度由内容撑开
可以使用 CSS 设置宽高

行内, 行内块元素, 可以视为文本, 即可以设置文本属性

块级元素

html, body
h1…h6, hr, p, div
ul, ol, li, dl, dt, dd
table, tbody, thead, tfoot, tr, caption
form, option, article, footer, header, nav, section

行内元素

br, em, strong
a, label

行内块元素

img
td, th
input, textarea, select, button
iframe

修改元素的显示模式

值	描述
display: none	元素被隐藏
display: block	元素以块级元素显示
display: inline	元素以内联元素显示
display: inline-block	元素以行内块元素显示

内边距 padding

padding-left
padding-right
padding-top
padding-bottom
复合属性 padding

padding: 10px; /* 上下左右 10px */
padding: 10px 20px; /* 上下 10px, 左右 20px */
padding: 10px 20px 30px; /* 上 10px, 左右 20px, 下 10px */
padding: 10px 20px 30px 40px; /* 上 10px, 右 20px, 下 30px, 左 40px */

外边距 margin

子元素的 margin 参考父元素的 content

margin-left
margin-right
margin-top
margin-bottom
复合属性 margin

边框

border-style 边框样式: none, solid, dashed, dotted, double
border-width 边框宽度
border-color 边框颜色
border-radius 边框圆角: 一个值是圆的半径, 两个值是椭圆的 x 半径, y 半径
border-[left, right, top, bottom]-[style, width, color]
border-[top-left, top-right, bottom-left, bottom-right]-radius
border 复合属性

外轮廓

外轮廓不参与盒子大小的计算

outline-width 外轮廓宽度
outline-color 外轮廓颜色
outline-style 外轮廓样式: none, dotted, dashed, solid, double
outline 复合属性
outline-offset 外轮廓和边框的距离

盒子模型

盒子宽度 = content 宽度 + 2*padding + 2*border

默认盒子宽度 = 父元素 content 宽度 - 2*margin

margin 外边距
border 边框
padding 内边距: padding-top, padding-right, padding-bottom, padding-left, padding
content 内容: width, max-width, min-width, height, max-height, min-height

溢出

overflow, overflow-x, overflow-y
overflow: visible 显示溢出内容
overflow: hidden 隐藏溢出内容
overflow: scroll 始终显示滚动条
overflow: auto 内容不溢出时不显示滚动条, 内容溢出时显示滚动条

隐藏元素

隐藏方式	是否有宽高	是否响应事件	回流/重绘
`display: none`	否, 宽高 = 0, DOM 未卸载	否	回流
`visibility: hidden`	是	否	重绘
`opacity: 0`	是	是	重绘

样式继承

只继承与盒子模型无关的属性

继承的属性: 字体属性, 文本属性, color
不继承的属性: 宽高, 内外边距, 边框, 背景, 溢出处理

浮动

浮动的目标: 文本环绕图片

设置浮动时, 兄弟元素要么全部都浮动, 要么全部都不浮动

float: left 左浮动
float: right 右浮动
float: none 不浮动 (默认)

元素浮动后

成为 BFC, 没有 margin 塌陷问题
脱离文档流
不独占一行
宽高由内容撑开, 也可以设置宽高

元素浮动后对父元素的影响

浮动元素不能撑开父元素的高度, 父元素高度塌陷
父元素的宽度仍然限制浮动元素的宽度

清除浮动

clear: left 清除前面所有左浮动兄弟元素产生的影响
clear: right 清除前面所有右浮动兄弟元素产生的影响
clear: both 清除前面所有浮动兄弟元素产生的影响

父元素成为 BFC, 设置 overflow: hidden 或 display: flow-root
所有浮动元素后面, 添加一个空的块级元素, 并设置 clear: both
父元素使用 ::after 创建空的伪元素并清除浮动

<style>
  /* 父元素使用 `::after` 创建空的伪元素 */
  .parent::after {
    content: "";
    display: block;
    clear: both;
  }
</style>

<body>
  <div class="parent">
    <div class="float-1"></div>
    <div class="float-2"></div>
    <!-- 父元素创建的伪元素 -->
  </div>
</body>

定位

相对定位, 绝对定位, 固定定位

定位元素

absolute 绝对或 fixed 固定定位的元素, 会脱离文档流, 成为定位元素, BFC

包含块

对于未脱离文档流的元素, 包含块是父元素
对于脱离文档流的元素, 包含块是最近的有定位属性的祖先元素; 如果不存在, 则是视口

相对定位 position: relative, 参考本元素的原位置, 不会脱离文档流
绝对定位 position: absolute, 参考本元素的包含块, (最近的有定位属性的祖先元素; 如果不存在, 则是视口), 会脱离文档流, 成为定位元素, BFC
固定定位 position: fixed, 参考视口, 会脱离文档流, 成为定位元素, BFC

定位元素在包含块的中间

.container {
  width: 30rem;
  height: 30rem;
  position: relative;

  .element {
    width: 10rem;
    height: 10rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.container {
  width: 30rem;
  height: 30rem;
  position: relative;

  .element {
    width: 10rem;
    height: 10rem;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -5rem; /* 10rem / 2 */
    margin-top: -5rem; /* 10rem / 2 */
  }
}

.container {
  width: 30rem;
  height: 30rem;
  position: relative;

  .element {
    width: 10rem;
    height: 10rem;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
}

显示层级

定位元素的显示层级比普通元素高
z-index 属性值越大, 显示层级越高

怪异盒模型

box-sizing: content-box: width 和 height 设置盒子内容区的大小
box-sizing: border-box: width 和 height 设置盒子总大小 (怪异盒模型)

盒子阴影

多个盒子阴影, 使用逗号分隔

.selector {
  /* 2 个值: x偏移 y偏移 */
  box-shadow: 10px 10px;
  /* 3 个值: x偏移 y偏移 阴影颜色 */
  box-shadow: 10px 10px green;
  /* 3 个值: x偏移 y偏移 阴影模糊半径 */
  box-shadow: 10px 10px 10px;
  /* 4 个值: x偏移 y偏移 阴影模糊半径 阴影颜色 */
  box-shadow: 10px 10px 10px green;
  /* 5 个值: x偏移 y偏移 阴影模糊半径 阴影扩散半径 阴影颜色 */
  box-shadow: 10px 10px 10px 10px green;
  /* 6 个值: x偏移 y偏移 阴影模糊半径 阴影扩散半径 阴影颜色 内部阴影 */
  box-shadow: 10px 10px 10px 10px green inset;
}

渐变背景

background-image: linear-gradient() 线性渐变
background-image: repeating-linear-gradient() 重复线性渐变: 在没有渐变的区域, 重复线性渐变
background-image: radial-gradient() 径向渐变
background-image: repeating-radial-gradient() 重复径向渐变: 在没有渐变的区域, 重复径向渐变

.selector {
  width: 30rem;
  height: 20rem;
  /* 渐变线的方向: 默认 to bottom (180deg) */
  background-image: linear-gradient(red, green, blue);

  /* to top (0deg), 增加角度值, 渐变线顺时针旋转 */
  background-image: linear-gradient(to top, red, green, blue);
  background-image: linear-gradient(180deg, red, green, blue);

  /* 设置渐变的位置 */
  /**
   * 0 ~ 5rem        pure red
   * 5rem ~ 10rem    red -> green
   * 10rem ~ 15rem   green -> blue
   * 15rem ~ 20rem   pure blue
   */
  background-image: linear-gradient(red 5rem, green 10rem, blue 15rem);

  /* 渐变中心的位置: 默认 at center (at 50% 50%) */
  background-image: radial-gradient(red, green, blue);

  /* 渐变形状: circle 圆, ellipse 椭圆 */
  background-image: radial-gradient(circle, red, green, blue);

  /* at left top (at 0 0) */
  background-image: radial-gradient(at left top, red, green, blue);
  background-image: radial-gradient(at 50% 50%, red, green, blue);

  /* 设置渐变圆的半径 */
  background-image: radial-gradient(10rem, red, green, blue);
  /* 设置渐变椭圆的 x 半径, y 半径 */
  background-image: radial-gradient(20rem 10rem, red, green, blue);

  /* 设置渐变的位置 */
  background-image: radial-gradient(red 5rem, green 10rem, blue 15rem);
}

transform 变换

2D 位移

二维坐标系

* ---- x 水平
|
|
y 垂直

transform: translateX(3rem) 设置水平方向位移, 指定长度值或参考本元素宽度的百分比值
transform: translateY(4rem) 设置垂直方向位移, 指定长度值或参考本元素高度的百分比值
transform: translate(3rem) 1 个值: 水平方向位移
transform: translate(3rem, 4rem) 2 个值: 水平, 垂直方向位移; 等价于 transform: translateX(3rem) translateY(4rem)

对比相对定位和 transform: translate 2D 位移

元素都不会脱离文档流
相对定位的百分比值参考父元素; transform: translate 2D 位移的百分比值参考本元素

2D 缩放

transform: scaleX(1) 设置水平方向的缩放比例: 1 不缩放, >1 放大, <1 缩小
transform: scaleY(1) 设置垂直方向的缩放比例: 1 不缩放, >1 放大, <1 缩小
transform: scale(1), transform: scale(1, 1)

2D 旋转

transform: rotateZ(30deg), transform: rotate(30deg) 设置旋转角度, 正值顺时针, 负值逆时针

.selector {
  transform: translate(-50%, -50%) rotate(45deg);
}

变换原点

元素变换时, 变换原点默认是元素的中心, 修改变换原点对平移无影响, 对旋转和缩放有影响

transform-origin: 50% 50% 百分比值参考本元素 (默认)
transform-origin: left top 变换原点是元素的左上角
transform-origin: 3rem 3rem 变换原点距离元素的左上角 3rem, 3rem

过渡

过渡: 使得元素从一种样式, 平滑的过渡到另一种样式

为元素自身设置过渡, 而不是 &:hover

transition-property 过渡的属性
- transition-property: none 不过渡任何属性
- transition-property: all 过渡所有属性
- transition-property: width, height 过渡指定的属性
transition-delay 开始过渡的延迟时间
transition-duration 过渡的持续时间
transition-timing-function
- transition-timing-function: ease 平滑过渡 (默认)
- transition-timing-function: linear 线性过渡, 匀速
- transition-timing-function: ease-in 先慢后快
- transition-timing-function: ease-out 先快后慢
- transition-timing-function: ease-in-out 慢 => 快 => 慢
- transition-timing-function: step-start 开始时瞬间过渡
- transition-timing-function: step-end 结束时瞬间过渡
transition 复合属性 transition: 1s linear all

动画

@keyframes rotate {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(180deg);
  }
}

@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }
  50% {
    transform: rotateZ(30deg);
  }
  100% {
    transform: rotateZ(180deg);
  }
}

animation-name 动画名
animation-duration 动画的持续时间
animation-delay 动画的延迟时间
animation-timing-function: 与 transition-timing-function 相同
animation-iteration-count 动画的播放次数
animation-direction 动画的播放方向
- animation-direction: normal 正放
- animation-direction: reverse 倒放
- animation-direction: alternate 正放, 倒放, 正放, …
- animation-direction: alternate-reverse 倒放, 正放, 倒放, …
animation-fill-mode
- animation-fill-mode: backwards 动画播放前, 画面停在第一个关键帧
- animation-fill-mode: forwards 动画播放后, 画面停在最后一个关键帧
animation-play-state 动画的播放状态
- animation-play-state: paused 暂停
- animation-play-state: running 播放中
animation 复合属性

过渡和动画的区别

过渡需要触发条件, 例如 &:hover; 动画不需要触发条件, 可以自动播放
过渡仅有开始和结束两个状态; 动画可以有多个关键帧
过渡仅执行 1 次; 动画可以循环多次或无限循环

多列容器

column-count 列数
column-width 列宽
columns 复合属性: columns: <column-count> <column-width>
column-gap 列间隔
column-rule-style 列分隔线样式: none, solid, dashed, dotted, double
column-rule-width 列分隔线宽度
column-rule-color 列分隔线颜色
column-rule 复合属性: column-rule: solid 1rem green
column-span 跨列: column-span: all 跨越所有列, column-span: none 不跨列

`@media` 媒体查询

超小屏幕 0 ~ 768px
中等屏幕 768px ~ 992px
大屏幕 992px ~ 1200px
超大屏幕 1200px ~ ∞

写法 1
写法 2

/* 超小屏幕 */
@media screen and (max-width: 768px) {
}
/* 中等屏幕 */
@media screen and (min-width: 768px) and (max-width: 992px) {
}
/* 大屏幕 */
@media screen and (min-width: 992px) and (max-width: 1200px) {
}
/* 超大屏幕 */
@media screen and (min-width: 1200px) {
}

<!-- 超小屏幕 -->
<link rel="stylesheet" media="screen and (max-width: 768px)" href="#" />
<!-- 中等屏幕 -->
<link
  rel="stylesheet"
  media="screen and (min-width: 768px) and (max-width: 992px)"
  href="#"
/>
<!-- 大屏幕 -->
<link
  rel="stylesheet"
  media="screen and (min-width: 992px) and (max-width: 1200px)"
  href="#"
/>
<!-- 超大屏幕 -->
<link rel="stylesheet" media="screen and (min-width: 1200px)" href="#" />

flex 弹性布局

display: flex 开启弹性布局, flex 容器是块级元素
display: inline-flex 开启弹性布局, flex 容器是行内块元素

主轴和侧轴

主轴: 主轴默认水平, 默认方向从左到右
侧轴: 侧轴默认垂直, 默认方向从上到下
主轴与侧轴垂直, flex 项目沿主轴排列

flex-direction

flex-direction	主轴方向	侧轴方向
`flex-direction: row`	从左到右 (默认)	从上到下 (默认)
`flex-direction: row-reverse`	从右到左	从上到下
`flex-direction: column`	从上到下	从左到右
`flex-direction: column-reverse`	从下到上	从左到右

flex-wrap

flex-wrap: nowrap 不换行 (默认)
flex-wrap: wrap 遇到 flex 容器边界时, 侧轴方向换行
flex-wrap: wrap-reverse 遇到 flex 容器边界时, 侧轴反方向换行

flex-flow 复合属性

flex-flow: <flex-direction> <flex-wrap>

justify-content 主轴对齐

justify-content	主轴对齐
`justify-content: flex-start`	主轴起点对齐 (默认)
`justify-content: flex-end`	主轴终点对齐
`justify-content: center`	主轴中点对齐
`justify-content: space-between`	主轴均匀分布, 两边距离等于 0
`justify-content: space-around`	主轴均匀分布, 两边距离等于中间距离的一半
`justify-content: space-evenly`	主轴均匀分布, 两边距离等于中间距离

align-items 单行侧轴对齐

align-items	单行侧轴对齐
`align-items: flex-start`	侧轴起点对齐
`align-items: flex-end`	侧轴终点对齐
`align-items: center`	侧轴中点对齐
`align-items: baseline`	侧轴文本基线对齐
`align-items: stretch`	如果 flex 项目未指定高度, 则单行拉伸以填充整个侧轴 (默认)

align-content 多行侧轴对齐

align-content	多行侧轴对齐
`align-content: flex-start`	侧轴起点对齐
`align-content: flex-end`	侧轴终点对齐
`align-content: center`	侧轴中点对齐
`align-content: space-between`	侧轴均匀分布, 两边距离等于 0
`align-content: space-around`	侧轴均匀分布, 两边距离等于中间距离的一半
`align-content: space-evenly`	侧轴均匀分布, 两边距离等于中间距离
`align-content: stretch`	如果 flex 项目未指定高度, 则多行拉伸以填充整个侧轴 (默认)

flex-basis

flex-basis: flex 项目在主轴方向的初始大小

默认 flex-basis: auto, 即默认 flex 项目在主轴方向的初始大小等于 flex 项目的宽或高
当 flex-basis 不是 auto 时
- flex 项目的宽高失效
- flex 项目的宽高是 flex-basis 的值, 而不是 width/height

flex-grow 拉伸

flex-grow: 主轴上有剩余时, flex 项目的拉伸比例

默认 flex-grow: 0, 即默认 flex 项目不拉伸
如果 3 个 flex 项目的 flex-grow 值都为 1, 则分别拉伸剩余的 1/3, 1/3, 1/3
如果 3 个 flex 项目的 flex-grow 值为 1, 2, 3, 则分别拉伸剩余的 1/6, 2/6, 3/6

flex-shrink 压缩

flex-shrink: 主轴上有溢出时, flex 项目的压缩比例

例: 3 个 flex 项目宽度分别为 20rem, 30rem, 40rem, 容器 50rem; 则溢出 40rem

默认 flex-shrink: 1, 即默认 3 个 flex 项目的 flex-shrink 值都为 1, 分别压缩溢出 40rem 的
- 20 / (20 + 30 + 40) = 2/9
- 30 / (20 + 30 + 40) = 3/9
- 40 / (20 + 30 + 40) = 4/9
如果 3 个 flex 项目的 flex-shrink 值为 1, 2, 3, 则分别压缩溢出 40rem 的
- (20*1) / (20*1 + 30*2 + 40*3) = 1/10
- (30*2) / (20*1 + 30*2 + 40*3) = 3/10
- (40*3) / (20*1 + 30*2 + 40*3) = 6/10

flex 复合属性

flex: <flex-grow> <flex-shrink> <flex-basis>

简写	复合属性	描述
	`flex: 0 1 auto`	不能拉伸, 可以压缩, 主轴方向的初始大小等于 flex 项目的宽或高 (默认)
`flex: 1` 或 `flex: 0%`	`flex: 1 1 0`, `flex: 1 1 0%`	可以拉伸, 可以压缩, 主轴方向的初始大小为 0%
`flex: 3rem`	`flex: 1 1 3rem`	可以拉伸, 可以压缩, 主轴方向的初始大小为 3rem
`flex: auto`	`flex: 1 1 auto`	可以拉伸, 可以压缩, 主轴方向的初始大小等于 flex 项目的宽或高
`flex: none`	`flex: 0 0 auto`	不能拉伸, 不能压缩, 主轴方向的初始大小等于 flex 项目的宽或高

align-self

align-self 单独指定某个 flex 项目的侧轴对齐
align-self: auto | flex-start | flex-end | center | baseline | stretch
默认 align-self: auto, 表示继承 flex 容器的 align-items 值

order

order: flex 项目在主轴上的排列顺序, 值越小越靠前, 默认 order: 0

grid 网格布局

display: grid | inline-grid 开启网格布局, grid 容器是块级元素/行内块元素, grid 项目即网格内容
grid-template-rows 行高
grid-template-columns 列宽
grid-auto-rows 自动创建的隐式网格的行高
grid-auto-columns 自动创建的隐式网格的列宽
row-gap 行间隔
column-gap 列间隔
gap 复合属性: gap: <row-gap> <column-gap>
grid-template-areas 定义区域, 一个区域由一个或多个网格组成
grid-template 复合属性: grid-template: <grid-template-rows> / <grid-template-columns>
grid-auto-flow 布局算法
- grid-auto-flow: row 先行后列
- grid-auto-flow: column 先列后行
- grid-auto-flow: row dense 尽可能填满
grid 复合属性: grid: <grid-template-rows> <grid-template-columns> <grid-template-areas> <grid-auto-rows> <grid-auto-columns> <grid-auto-flow>
justify-items 网格内容的水平位置
- justify-items: start 网格左对齐
- justify-items: end 网格右对齐
- justify-items: center 网格水平居中
- justify-items: stretch 拉伸以填充网格宽度 (默认)
align-items: 网格内容的垂直位置
- align-items: start 网格上对齐
- align-items: end 网格下对齐
- align-items: center 网格垂直居中
- align-items: stretch 拉伸以填充网格高度 (默认)
place-items 复合属性: place-items: <align-items> <justify-items>
justify-self 单独指定某个网格内容的水平位置
align-self 单独指定某个网格内容的垂直位置
place-self 复合属性: place-self: <align-self> <justify-self>
justify-content 整体内容的水平位置
- justify-content: start grid 容器左对齐
- justify-content: end grid 容器右对齐
- justify-content: center grid 容器水平居中
- justify-content: stretch 如果 grid 项目未指定宽度, 则拉伸以填充 grid 容器
- justify-content: space-between 列均匀分布, 两边距离等于 0
- justify-content: space-around 列均匀分布, 两边距离等于中间距离的一半
- justify-content: space-evenly 列均匀分布, 两边距离等于中间距离
align-content 整体内容的垂直位置
- align-content: start grid 容器上对齐
- align-content: end grid 容器下对齐
- align-content: center grid 容器垂直居中
- align-content: stretch 如果 grid 项目未指定高度, 则拉伸以填充 grid 容器
- align-content: space-between 行均匀分布, 两边距离等于 0
- align-content: space-around 行均匀分布, 两边距离等于中间距离的一半
- align-content: space-evenly 行均匀分布, 两边距离等于中间距离
place-content 复合属性: place-content: <align-content> <justify-content>
grid-row-start 上边框的水平网格线
grid-row-end 下边框的水平网格线
grid-column-start 左边框的垂直网格线
grid-column-end 右边框的垂直网格线
grid-row 复合属性: grid-row: <grid-row-start> <grid-row-end>
grid-column 复合属性: grid-column: <grid-column-start> <grid-column-end>
grid-area: grid 项目放置的区域, 复合属性 grid-area: <grid-row-start> <grid-column-start> <grid-row-end> <grid-column-end>

Sass

嵌套 (CSS Nesting)
父选择器 & (CSS Nesting)
变量 $
插值 #

$name: bg-color;
$attr: background;

.parent.#{$name} {
  #{$attr}-color: lightgreen;
}

混入 `@mixin`

SCSS
CSS

@mixin block-container($display) {
  display: ($display);
}

@mixin clear-float($display, $clear) {
  @include block-container($display);

  &::after {
    content: "";
    clear: $clear;
  }
}

.container {
  @include clear-float(block, both);
}

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

CSS

速记

面试题

BFC