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>a
☆ 并集	找大伙	较多	使用 , 分隔 .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: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 个）

• 链接伪类选择器（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 隐藏元素，不保留原有位置；
• display: inline-block 转换为行内块元素。

提示：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®	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);

常用代码：

.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 伪元素法：

   .clearfix::after {
     content: " ";
     display: block;
     clear: both;
     visibility: hidden;
     height: 0;
   }
   

2. 双伪元素法：

   .clearfix::before,
   .clearfix::after {
     content: "";
     display: table;
   }
   
   .clearfix::after {
     clear: both;
   }
   

5.4 文字溢出显示省略号

1. 单行文本溢出

   /* 1. 强制在一行显示文本，默认 normal 会自动换行 */
   white-space: nowrap;
   
   /*2 . 超出的部分隐藏 */
   overflow: hidden;
   
   /* 3. 文字用省略号替代超出的部分 */
   text-overflow: ellipsis;
   

2. 多行文本溢出

   /* 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 值边框宽度。
• hover 处理：
  • 无定位：pos；
  • 有定位：z-index: 1。

5.7 CSS 三角形

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

5.7.1 等边三角形

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

5.7.2 直角三角形

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