CSS 速查笔记

CSS 学习套路

  1. 找它，利用选择器，把对应标签选出来；
  2. 摆它：利用布局样式（标准流、浮动、定位等），把盒子摆在需要的位置；
    1. 标准流可以从上向下摆放块级盒子，从左向右摆放行内盒子；
    2. 浮动可以从左向右摆放多个块级盒子，盒子之间没有缝隙并且顶端对齐；
    3. 定位可以让盒子：摆放在另一个盒子中的任意位置（子绝父相）或者固定在屏幕中的某个位置。
  3. 改它：利用外观样式（字体、文本、背景等），修改盒子内容的显示效果。

一. 三种引入 CSS 的方式

样式表 优点 缺点 使用频率 控制范围 注意点
行内 书写方便，权重高 结构样式混合 低 控制一个标签 不需要 style 标签
内部 部分结构和样式分离 没有彻底分离 较多，授课和练习使用 控制一个页面 样式定义在 style 标签中
外部 完全结构和样式分离 需要 link 引入 多 可以被多处复用 样式定义在标签的 style 属性中

二. 选择器（找它）

2.1 基础选择器

基础选择器 作用 特点 使用频率
☆ 标签选择器 选中相同标签 统一设置相同标签的样式，没有差异化 较多
☆ 类选择器(.) 按需选择标签 根据需求选择 非常多
id 选择器(#) 选中唯一标签 仅针对唯一标签 通常与 JavaScript 联用
通配符选择器(*) 选中所有标签 选择的太多，有部分不需要 有特定的应用场景

2.2 复合选择器

选择器 作用 频率 用法示例
☆ 后代 找后代 较高 使用空格分隔 .nav a
子代 找亲儿子 较少 使用 > 分隔 .nav>a
兄弟 找后面所有弟弟 极少 使用 ~ 分隔 li ~ li
临近兄弟 找后面第一个弟弟 极少 使用 + 分隔 li + li
☆ 并集 找大伙 较多 使用 , 分隔 .nav, .header
交集 多选一 极少 标签.类名

2.3 伪类选择器

关键词：状态。

选择器 作用 频率 用法示例
☆ 鼠标伪类 鼠标悬停 较多 选择器:hover
☆ 链接伪类 链接状态 较多 a:hover LVHAo
☆ 结构伪类 元素位置 较多 E:first-child
E:last-child
E:nth-child(n)
E:nth-last-child(n)
focus 表单状态 较少 input:focus
属性伪类选择器 选择带有某些属性的 少 E[att符号=’’] ^开头 $结尾 *包含

  • 结构伪类选择器

    选择符 描述
    E:first-child 匹配父元素中的第一个子元素 E
    E:last-child 匹配父元素中的最后一个子元素 E
    E:nth-child(n) ☆ 从前向后匹配父元素中的一个或特定多个子元素 E
    E:nth-last-child(n) ☆ 从后向前匹配父元素中的一个或特定多个子元素 E
    E:first-of-type 匹配类型 E 的第一个
    E:last-of-type 匹配类型 E 的最后一个
    E:nth-of-type(n) 匹配类型 E 的第 n 个

  • 结构伪类常用公式

    公式 取值
    2n 偶数
    2n + 1 奇数
    5n ☆ 5、10、15…
    n + 5 从第 5 个开始（包含第 5 个）一直到最后
    -n + 5 ☆ 前 5 个（包含第 5 个）
    -n+5 后5个 用 E:nth-last-child(n)

  • 链接伪类选择器（LVHAo）

    链接伪类选择器 说明
    a:link 选择所有未被访问的链接
    a:visited 选择所有已经被访问的链接
    a:hover 选择鼠标指针位于其上的链接
    a:active 选择激活链接（鼠标按下未抬起的链接）

2.4 伪元素选择器

关键词：内容。

选择器 作用 频率
::before 在标签刚开始之后插入行内元素 较多
::after 在标签要结束之前插入行内元素 较多

提示：伪元素选择器必须要指定 content 属性。

2.5 属性选择器

选择符 描述
E[att] 选择具有 att 属性的 E 元素
E[att="val"] ☆ 选择具有 att 属性且值等于 val 的 E 元素
E[att^="val"] 选择具有 att 属性且值以 val 开头的 E 元素
E[att$="val"] 选择具有 att 属性且值以 val 结尾的 E 元素
E[att*="val"] 选择具有 att 属性且值包含 val 的 E 元素

^ 以 xxx 开头 / $ 以 xxx 结束 / * 包含。

2.6 选择器的权重

选择器 权重
继承或 * 0,0,0,0
标签选择器 / 伪元素 0,0,0,1
类选择器 / 属性选择器 / 伪类选择器 0,0,1,0
id 选择器 0,1,0,0
行内样式 1,0,0,0
!important ∞

开发技巧：向上找层叠，向下找继承，巧用后代多用类，权重无需记。

三. 显示模式

3.1 标准流

3.1.1 显示模式

元素模式 排列方式 指定宽高 包含
块级元素（block） 一行一个，独占一行 可以 任何标签
行内元素 （inline） 1. 一行多个，内容撑开
2. 遇到边界会折行
3. 彼此之间可能有缝隙		 不可以 文本或其他行内元素
行内块元素 （inline-block） 1. 一行多个，内容撑开
2. 遇到边界会折行
3. 彼此之间可能有缝隙		 可以 任何标签
显示模式转换
  • display: block 转换为块元素，并显示隐藏的元素；
  • display: none 隐藏元素，不保留原有位置 从单词就知道 none 就是没了 ；
  • display: inline-block 转换为行内块元素。
  • Visibility: visible 元素可见性 可见的
  • Visibility：hidden 元素隐藏 不可见的 保留位置 从单词就知道 只是隐藏了而已 还要保留位置

提示：display 转换显示模式的代码要写在第一行。

3.1.2 盒子模型

属性 速记 盒子大小 说明
border bd / bdt / bdr / bdb / bdl 影响 solid 实线 / dashed 虚线 / dotted 点线
padding p / pt / pr / pb / pl 影响 上右下左，缺哪个对称补
margin m / mt / mr / mb / ml 不影响 上右下左，缺哪个对称补

3.1.3 盒子大小（box-sizing）

  • content-box：盒子大小 = 宽高 + padding + border（传统盒子模型）；
  • border-box：宽高 = padding + border + 内容区域大小（CSS3 盒子模型）。

3.1.4 溢出处理（ov）

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）的处理方式，包括：

属性值 描述
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll 不管超出内容否，总是显示滚动条（macOS 下和 auto 等效）
auto 超出自动显示滚动条，不超出不显示滚动条

3.1.5 显示和隐藏

属性值 描述
display: none; 隐藏元素，不保留原有位置
display：block; 转换成块级元素，同时显示元素
visibility: hidden; 隐藏元素，保留原有位置
visibility: visible; 元素可见

3.2 浮动（float）

作用：让多个块级元素（不改变显示方式）水平排成一行。

属性值 速记符 效果
left fl 左浮动，元素从左向右依次排列
right fl:r 右浮动，元素从右向左依次排列

特点

  1. 脱离标准流（脱标）；
  2. 一行显示并且顶端对齐（行内和行内块元素会按照文本对齐方式对齐）；
  3. 具有行内块元素的特性（但是彼此之间没有间隙）；
  4. 如果父盒子没有高度，同时所有子盒子都是浮动的，下方的盒子会钻上来，需要清除浮动。

浮动最早是用于图文混排的，浮动的盒子不会压住下方的文字内容。

3.3 定位（子绝父相）

3.3.1 定位模式(pos)

值 语义 脱标 移动位置 常用 场景 占不占
位置
static 静态定位 否 不移动 几乎不用 不定位 占
relative ☆ 相对定位 否 相对自身 常用 子绝父相 占
absolute ☆ 绝对定位 是 带定位的父级 常用 子绝父相 不占
fixed ☆ 固定定位 是 浏览器可视区 常用 浏览器可视区 不占
sticky 粘性定位 否 浏览器可视区 不常用 浏览器可视区 占

提示：子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

3.3.2 边偏移

边偏移属性 示例 描述
top(t) top: 80px 顶端偏移量，定义元素相对于其参照元素上边线的距离。
bottom(b) bottom: 80px 底部偏移量，定义元素相对于其参照元素下边线的距离。
left(l) left: 80px 左侧偏移量，定义元素相对于其参照元素左边线的距离。
right(r) right: 80px 右侧偏移量，定义元素相对于其参照元素右边线的距离

标准流或浮动与这四个属性搭配使用无效。

3.3.3 叠放顺序（z-index）

  1. 数值是整数（没有单位），默认是 auto，数值越大，盒子越靠前；
  2. 数值相同，按书写顺序显示，后书写的盒子显示在上方；
  3. 只有定位的盒子在可以使用 z-index 属性。

四. 样式（改它）

4.1 字体样式

属性 速记 含义 注意事项
font-family ff 字体 工作中按照团队约定即可
font-size fz 字号 单位通常是 px（像素），字号一定要有单位
font-weight fw 字重 700 加粗 / 400 普通，数字字重不带单位
font-style fs / fsn 字体样式 italic 斜体 / normal 正常，把 em 改成不倾斜
font f 连写 font-size/line-height font-family，工作中按照团队约定即可

4.2 文本样式

属性 速记 含义 注意事项
color c 颜色 #f60 / rgba(0~255, 0~255, 0~255, 0~1)
text-align tac 水平对齐 center / left / right
text-decoration td / tdu 文本修饰 text-decoration: none; / text-decoration: underline;
text-indent ti 首行缩进 text-indent: 2em;
line-height lh 行高 行高等于盒子高度会垂直居中 / lh1 去除上下间距，易于卡片布局

4.3 背景样式

属性 速记 作用 值
background-color bgc 颜色 颜色 / #f60 / rgba(0~255, 0~255, 0~255, 0~1) / transparent
background-image bgi 图像 url(图片路径)
background-repeat bgr 平铺 repeat / no-repeat / repeat-x / repeat-y
background-position bgp 位置 x, y / left right center top bottom center
background-size bgs 尺寸 x, y / contain 图片完整 / cover 铺满盒子
background-attachment bga 附着方式 scroll / fixed

复合写法推荐顺序：background: color image repeat position/size。

4.4 边框和阴影

属性 速记 作用 值
border-radius bdrs 圆角边框 圆形：border-radius: 50%;
圆角矩形：border-radius: 高度的一半;
单独设置：左上角开始，顺时针方向设置
box-shadow bxsh 盒子阴影 X 偏移 Y 偏移 阴影模糊半径 颜色
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
transform: translate(0, -1px);
text-shadow 文字阴影 X 偏移 Y 偏移 阴影模糊半径 颜色
text-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);

常用代码：

1
2
3
4
.box:hover {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
  transform: translate(0, -1px);
}

4.5 其他

属性及值 作用
list-style: none; 取消显示列表默认列表样式
cursor: pointer; 鼠标样式，提示用户可以点击
text 可以输入内容 / not-allowed 禁止 / move 移动
outline: none; 取消表单轮廓
resize: none; 防止拖拽文本域
vertical-align: top / middle / bottom 设置图片或者表单(行内块元素）和文字垂直对齐 / 图片底侧空白缝隙
transition: 要过渡的属性 动画时间 运动曲线 何时开始; 谁做过渡给谁加，常用 transition 0.3s
filter: blur(5px) 数值越大越模糊，数值为 0 最清晰（不做模糊处理）
filter: grayscale(100%) 可以让整个网站灰度显示，清明节常用
width: calc(100% - 80px); 让子盒子永远比父盒子的宽度小 80px (注意: 运算符前后必须有空格)

五. 布局技巧（方案）

5.1 居中

  1. 文本水平居中：在父盒子中设置 tac；

  2. 块级元素水平居中：margin: 0 auto；

  3. 绝对定位元素水平垂直居中：

    1. pos:a+t0+r0+b0+l0+m:a；
    2. pos:a+t50%+l50%+trf:t / -50%, -50%。

  4. 文本垂直居中：

    1. 单行文本垂直居中：lh 等于父盒子高度；

    2. 多行文本垂直居中：

      1. 父盒子：行高等于父盒子高度；
      2. 子盒子：dib+lh1.2+va / middle。

      原理：将多行文本转换成行内块元素，可以在父盒子中指定行高实现垂直居中。

5.2 行内块元素

  • 元素之间的间隙：父盒子字体设置为 0 / 子盒子单独设置字体；
  • 图片底侧空白缝隙：vertical-align: top / middle / bottom；
  • 图片或者表单(行内块元素）和文字垂直对齐：vertical-align: top / middle / bottom。

5.3 清除浮动

  1. ::after 伪元素法：

    1
    2
    3
    4
    5
    6
    7
    .clearfix::after {
      content: " ";
      display: block;
      clear: both;
      visibility: hidden;
      height: 0;
    }

  2. 双伪元素法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .clearfix::before,
    .clearfix::after {
      content: "";
      display: table;
    }

    .clearfix::after {
      clear: both;
    }

5.4 文字溢出显示省略号

  1. 单行文本溢出

    1
    2
    3
    4
    5
    6
    7
    8
    /* 1. 强制在一行显示文本，默认 normal 会自动换行 */
    white-space: nowrap;

    /*2 . 超出的部分隐藏 */
    overflow: hidden;

    /* 3. 文字用省略号替代超出的部分 */
    text-overflow: ellipsis;

  2. 多行文本溢出

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    /* 1. 超出的部分隐藏 */
    overflow: hidden;

    /* 2. 文字用省略号替代超出的部分 */
    text-overflow: ellipsis;

    /* 3. 弹性伸缩盒子模型显示 */
    display: -webkit-box;

    /* 4. 限制在一个块元素显示的文本的行数 */
    -webkit-line-clamp: 2;

    /* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-box-orient: vertical;

5.5 外边距合并（折叠）处理

  • 兄弟盒子只设置一个；
  • 父子盒子：
    • 在父盒子上设置 overflow: hidden;；
    • 给父盒子设置 padding-top。

5.6 细线边框

5.6.1 表格细线边框

  • border-collapse: collapse; (bdcl) 可以把相邻的边框合并到一起；
  • border-collapse 仅适用于表格。

5.6.2 块级元素细线边框

  • margin 值边框宽度(采用负值)或者使用结构伪类选择器E:nth-last-child(n)。
  • hover 处理：
    • 无定位：pos；
    • 有定位：z-index: 1。

5.7 CSS 三角形

原理：边框连接处是斜边连接的。

5.7.1 等边三角形

  1. w0+h0；
  2. bd / 100px solid transparent;；
  3. 需要哪个方向的三角形，就设置哪个方向的颜色。border-top-color: pink;

5.7.2 直角三角形

  1. w0+h0；
  2. bdt / 200px solid transparent;；
  3. bdr / 100px solid red;。