CSS 学习套路
- 找它,利用选择器,把对应标签选出来;
- 摆它:利用布局样式(标准流、浮动、定位等),把盒子摆在需要的位置;
- 标准流可以从上向下摆放块级盒子,从左向右摆放行内盒子;
- 浮动可以从左向右摆放多个块级盒子,盒子之间没有缝隙并且顶端对齐;
- 定位可以让盒子:摆放在另一个盒子中的任意位置(子绝父相)或者固定在屏幕中的某个位置。
- 改它:利用外观样式(字体、文本、背景等),修改盒子内容的显示效果。
一. 三种引入 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 | 右浮动,元素从右向左依次排列 |
特点
- 脱离标准流(脱标);
- 一行显示并且顶端对齐(行内和行内块元素会按照文本对齐方式对齐);
- 具有行内块元素的特性(但是彼此之间没有间隙);
- 如果父盒子没有高度,同时所有子盒子都是浮动的,下方的盒子会钻上来,需要清除浮动。
浮动最早是用于图文混排的,浮动的盒子不会压住下方的文字内容。
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)
- 数值是整数(没有单位),默认是
auto
,数值越大,盒子越靠前; - 数值相同,按书写顺序显示,后书写的盒子显示在上方;
- 只有定位的盒子在可以使用
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 居中
-
文本水平居中:在父盒子中设置
tac
; -
块级元素水平居中:
margin: 0 auto
; -
绝对定位元素水平垂直居中:
pos:a+t0+r0+b0+l0+m:a
;pos:a+t50%+l50%+trf:t
/-50%, -50%
。
-
文本垂直居中:
-
单行文本垂直居中:
lh
等于父盒子高度; -
多行文本垂直居中:
- 父盒子:行高等于父盒子高度;
- 子盒子:
dib+lh1.2+va
/middle
。
原理:将多行文本转换成行内块元素,可以在父盒子中指定行高实现垂直居中。
-
5.2 行内块元素
- 元素之间的间隙:父盒子字体设置为
0
/ 子盒子单独设置字体; - 图片底侧空白缝隙:
vertical-align: top / middle / bottom
; - 图片或者表单(行内块元素)和文字垂直对齐:
vertical-align: top / middle / bottom
。
5.3 清除浮动
-
::after
伪元素法:.clearfix::after { content: " "; display: block; clear: both; visibility: hidden; height: 0; }
-
双伪元素法:
.clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; }
5.4 文字溢出显示省略号
-
单行文本溢出
/* 1. 强制在一行显示文本,默认 normal 会自动换行 */ white-space: nowrap; /*2 . 超出的部分隐藏 */ overflow: hidden; /* 3. 文字用省略号替代超出的部分 */ text-overflow: ellipsis;
-
多行文本溢出
/* 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 等边三角形
w0+h0+lh0+fz0
;bd
/100px solid transparent;
;- 需要哪个方向的三角形,就设置哪个方向的颜色。
5.7.2 直角三角形
w0+h0+lh0+fz0
;bdt
/200px solid transparent;
;bdr
/100px solid red;
。