字体

字体族

font-family: Microsoft YaHei, Heiti SC, sans-serif;font-family属性值可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找。

font-family属性最后设置一个字体族名，网页开发建议使用无衬线字体族（Sans-Serif）。

通用字体族：

• Serif衬线体
• Sans-Serif无衬线体
• Cursive手写体
• Fantasy夸张体
• Monospace等宽字体

使用Web Fonts： @font-face { font-family: 'CustomFont'; src: url(https://example.com/CustomFont.woff2) format('woff2'); }

font复合属性

复合属性连写的font格式：font:font-style font-weight font-size/line-height font-family;

必须按顺序书写，并且字号和字体值（后两个）必须书写，否则font属性不生效。

文本

行高

p { line-height: 1.6; }

空白符

white-space属性设置如何处理元素内的空白，默认空白会被浏览器忽略。

值为nowrap：文本不会换行，会在同一行上继续，直到遇到 标签为止。

值为pre：空白会被保留，其行为方式类似 HTML 中的

标签。

值为pre-wrap：保留空白符，正常换行。

值为pre-line：合并空白符，保留换行符。

复合选择器

后代选择器

选中某元素的所有后代（包含儿子、孙子、重孙子），选择器之间用空格隔开。 /* 选中div下的a元素 */ div a { color: #000; }

子代选择器

选中某元素的子代元素（最近的子级），选择器之间用>隔开。 div > a { color: #000; }

并集选择器

选中多组标签设置相同的样式，选择器之间用逗号,隔开。 div, a { color: #000; }

交集选择器

选中同时满足多个条件的元素，选择器之间连写，没有任何符号。 div.box { color: #000; }

兄弟选择器

/* 选中div后相邻的兄弟p元素 / div + p { color: green; } / 选中div后的所有兄弟p元素 */ div ~ p { color: green; }

属性选择器

/* 选中具有title属性的元素 / [title] { color: green; } / 选中title属性值为hello的元素 / [title="hello"] { color: green; } / 选中title属性值以a开头的元素 / [title^="a"] { color: green; } / 选中title属性值以a结尾的元素 / [title$="a"] { color: green; } / 选中title属性值包含a的元素 / [title="a"] { color: green; }

伪类选择器

伪类很像类，但不是类，是元素特殊状态的一种描述。伪类表示元素状态，选中元素的某个状态设置样式。

状态伪类

超链接一共有4个状态，给超链接设置状态时，需要按LVHA（LV哈）顺序书写。

• 访问前
• 访问后
• 鼠标悬停
• 点击时（激活）

结构伪类

根据元素的结构关系查找元素。

• E
  查找第一个E元素
• E
  查找最后一个E元素
• E
  (N) 查找第N个E元素（第一个元素N值为1）
• 所有同类型兄弟元素中的第一个
• 所有同类型兄弟元素中的最后一个
• (n) 所有同类型兄弟元素中的第n个

nth-child(公式)用法：

• 2n：偶数标签
• 2n+1：奇数标签（或2n-1）
• 5n：找到5的倍数的标签
• n+5：找到第5个以后的标签（-n+5为第5个以前的标签）

下面了解即可：

1. (n) 所有兄弟元素中的倒数第n个
2. (n) 所有同类型兄弟元素中的倒数第n个
3. 选择没有兄弟的元素（独生子女）
4. 选择没有同类型兄弟的元素
5. 根元素
6. 内容为空元素（空格也算内容）

否定伪类

(选择器) 排除满足括号中条件的元素。

UI伪类

1. 被选中的复选框或单选按钮
2. 可用的表单元素（没有 disabled 属性）
3. 不可用的表单元素（有disabled 属性）

目标伪类（了解）

选中锚点指向的元素。 div { background: gray; height: 300px; } div { background: green; }

去看第1个 去看第2个

语言伪类（了解）

()根据指定的语言选择元素（本质是看lang属性的值）。

伪元素选择器

作用：选中元素中的一些特殊位置。创建虚拟元素（伪元素），用来摆放装饰性的内容。

• E::before在E元素里面最前面添加一个伪元素
• E::after在E元素里面最后面添加一个伪元素
• ::first-letter选中元素中的第一个文字
• ::first-line选中元素中的第一行文字
• ::selection选中被鼠标选中的内容
• ::placeholder选中输入框的提示文字

必须设置content: "内容";属性，用来设置伪元素内容，如果没有内容，则内容留空即可。伪元素默认是行内显示模式，权重和标签选择器相同。

CSS三大特性

继承性

子级默认继承父级的文字控制属性。

层叠性

相同的属性会覆盖，即后面的属性覆盖全面的属性。不同的属性会叠加，即不同的属性都生效。

优先级

也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则。

规则：选择器优先级高的样式生效。

公式：通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

叠加计算

如果是复合选择器，则需要权重叠加计算。

公式：(行内样式，id选择器个数，类选择器个数，标签选择器个数)

规则：从左往右依次比较个数，同一级个数多的优先级高，如果个数相同，则向后比较。!important权重最高，继承权重最低。

显示模式

块级（block）：独占一行；宽高属性生效；默认宽度是父级的100%

行内（inline）：一行共存多个；宽高属性不生效；宽高由内容撑开

行内块（inline-block）：一行共存多个；宽高属性生效；宽高默认由内容撑开

盒子模型

盒子尺寸

盒子尺寸=内容尺寸+内边距尺寸+border尺寸。外边距margin不会影响盒子的大小，但会影响盒子的位置。

给盒子加border/padding会撑大盒子，解决方法有二：

• 手动做减法，减掉border/padding的尺寸
• 启动内减模式：box-sizing: border-box;

外边距问题

合并现象

垂直排列的兄弟元素，上下margin会合并，取两个margin中的较大值生效。

塌陷问题

父子级的标签，子级添加上外边距会产生塌陷问题，导致父级一起向下移动。

解决方法：

• 取消子级margin，父级设置padding（推荐）
• 父级设置overflow: hidden;
• 父级设置border-top

行内元素边距问题

行内元素添加margin和padding，无法改变元素垂直位置。

解决方法：给行内元素添加行高（line-height）来改变垂直位置。

圆角

正圆形状：给正方形盒子设置圆角属性值为 宽高的一半 / 50%。 div { width: 200px; height: 200px; background-color: red; border-radius: 100px; /* border-radius: 50%; */ }胶囊形状：给长方形盒子设置圆角属性值为 盒子高度的一半。

布局小技巧

1. 行内元素、行内块元素，可以被父元素当做文本处理。 即：可以像处理文本对齐一样去处理：行内、行内块在父元素中的对齐。例如：text-align、line-height、text-indent等。
2. 如何让子元素，在父亲中水平居中： 若子元素为块元素，给父元素加上：margin: 0 auto; 。 若子元素为行内元素、行内块元素，给父元素加上：text-align
   。
3. 如何让子元素，在父亲中垂直居中： 若子元素为块元素，给子元素加上：margin-top ，值为：(父元素content －子元素盒子总高) / 2。 若子元素为行内元素、行内块元素：让父元素的height = line-height ，每个子元素都加上：verticalalign: middle; 。 补充：若想绝对垂直居中，父元素 font-size 设置为0。

元素之间的空白问题

产生的原因：行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符。 解决方案：

1. 方案一：去掉换行和空格（不推荐）。
2. 方案二：给父元素设置 font-size: 0 ，再给需要显示文字的元素，单独设置字体大小（推 荐）。

行内块的幽灵空白问题

产生原因：行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。 解决方案： 方案一：给行内块设置vertical，值不为baseline即可，设置为 middel、bottom、top均可。 方案二：若父元素中只有一张图片，设置图片为 display: block。 方案三：给父元素设置 font-size: 0。如果该行内块内部还有文本，则需单独设置fontsize。

浮动（了解）

布局相关技术有：

• 常规流（文档流）：行级、块级、表格布局、FlexBox、Grid 布局
• 浮动
• 绝对定位

清除浮动推荐使用双伪元素法： /* before解决外边距塌陷问题 */ .clearfix::before, .clearfix::after { content: ''; display: table; }

/* after清除浮动 */ .clearfix::after { clear: both; }

Flex布局

给父元素设置display: flex;，子元素可以自动挤压或拉伸。

组成

Flex组成部分：

• 弹性容器（创建容器：display: flex;）
• 弹性盒子
• 主轴（默认在水平方向，对齐方式：justify-content）
• 侧轴/交叉轴（默认在垂直方向，对齐方式：align-items所有弹性盒子、align-self某个弹性盒子）

其他属性

• 修改主轴方向：flex-direction属性
• 弹性伸缩比：flex属性（控制弹性盒子主轴方向的尺寸，表示占用父级剩余尺寸的份数，属性值：整数数字）
• 弹性盒子换行：flex-wrap属性（属性值：wrap换行，nowrap不换行）
• 行对齐方式：align-content属性（对单行弹性盒子不生效）

定位

灵活改变盒子在网页中的位置，属性：position。设置盒子的位置用边偏移属性：left、right、top、bottom。

相对定位

改变位置的参照物是自己原来的位置，不脱标（占位），标签显示模式不变。 div { position: relative; top: 100px; left: 100px; }

绝对定位

• 脱标（不占位）
• 参照物：先找最近的已经定位的祖先元素，如果所有祖先元素都没有定位，则参照浏览器可视区改位置
• 显示模式会改变：宽高生效，具备了行内块的特点

工作中一般不单独使用相对或绝对定位，都是配合着使用：子级绝对定位，父级相对定位（子绝父相）。

定位居中

首先设置绝对定位，水平垂直边偏移为50%，最后transform: translate(-50%, -50%)。 div { position: absolute; left: 50%; top: 50%; /* 50% 就是自己宽高的一半 */ transform: translate(-50%, -50%); }

固定定位

元素的位置在网页滚动时不会改变。

• 脱标（不占位）
• 参照物：浏览器窗口
• 显示模式特点：宽高生效，具备了行内块的特点

z-index

即堆叠层级，默认按照标签书写顺序，后来者居上。

z-index默认是0，取值越大显示顺序越靠上。

总结

定位模式属性值是否脱标显示模式参照物相对定位relative否保持标签原有显示模式自己原来位置绝对定位absolute是行内块特点已经定位的祖先元素；浏览器可视区固定定位fixed是行内块特点浏览器窗口

实用代码

清除默认样式

• { margin: 0; padding: 0; }

版心

/* 版心 */ .wrapper { margin: 0 auto; width: 1200px; }

CSS精灵

即CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再精确定位出背景图片的位置。

优点：减少服务器被请求次数，减轻服务器压力，提高页面加载速度。

实现步骤：

• 创建盒子，盒子尺寸与小图尺寸相同
• 设置盒子背景图为精灵图
• 添加background-position属性，改变背景图位置 div { width: 100px; height: 100px; background-color: pink; background-image: url(./123.jpg); background-position: -50px -50px; }

字体图标

展示的是图标，本质是字体。作用是在网页中添加简单的、颜色单一的小图标。

字体图标下载：https://www.iconfont.cn/

垂直对齐方式

属性名：vertical-align，默认是基线对齐（baseline），其他属性值：top（颈部对齐）、middle（居中对齐）、bottom（顶部对齐）。

浏览器把行内块、行内标签当做文字处理，默认按基线对齐。

过渡transition

可以为一个元素在不同状态之间切换的时候添加过渡效果。 img { width: 100px; height: 100px; transition: all 1s; }

img

{ width: 200px; height: 200px; }

移动

平面转换transform

平面转换又叫2D转换，改变盒子在平面内的形态（平移translate()、旋转rotate()、缩放scale()、倾斜skew()），一般与过渡配合使用，为元素添加动态效果。

线性渐变

属性：background-image: linear-gradient();background-image: linear-gradient( 渐变方向（to 方位名词 或 角度度数）, 颜色1 终点位置, 颜色2 终点位置, ...... );如果不指定方向，默认从上到下渐变：

• to right：从左侧开始的线性渐变
• to bottom right：从左上角到右下角的线性渐变
• 45deg：45°的线性渐变

/* 蓝色渐变到红色 / linear-gradient(blue, red); / 蓝色占80%渐变到红色 / linear-gradient(blue 80%, red); / 多个终止色 / linear-gradient(blue, red, yellow, green, orange); / 透明色 */ linear-gradient(transparent, rgba(0, 0, 0, 0.5));

径向渐变

属性：background-image: radial-gradient();background-image: radial-gradient( 半径 at 圆心位置（半径可以是2条，则为椭圆）, 颜色1 终点位置, 颜色2 终点位置, ...... );

空间转换

视距perspective

指定了观察者与Z=0平面的距离，为元素添加透视效果（近大远小、近实远虚）。

perspective属性要添加给直接父级，取值范围800-1200（经验值）。

.father { perspective: 1000px; } .son { width: 100px; height: 100px; margin: 100px auto; background-color: rebeccapurple; transition: all 0.5s; } .son

{ transform: translateZ(-300px); }

旋转

左手法则：根据旋转方向确定取值正负。左手握住旋转轴，拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向。

• rotateX(60deg)
• rotateY(60deg)
• rotateZ(60deg)

立体呈现

作用是设置元素的子元素是位于3D空间还是平面中，属性名：transform-style，属性值：preserve-3d（子级处于3D空间），flat（子级处于平面中）。

动画

动画animation是加强版的过渡。实现步骤：

1. 定义动画
2. 使用动画

animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态。 .box { width: 100px; height: 100px; background-color: pink; /* 使用动画 / animation: change 1s; } / 定义动画：宽度从100变化到800 / @keyframes change { from { width: 100px; } to { width: 800px; } } / 定义动画 另一种写法 */ @keyframes change2 { 0% { width: 100px; height: 100px; } 20% { width: 300px; height: 200px; } 100% { width: 800px; height: 300px; } }

屏幕分辨率

• 物理分辨率：即硬件分辨率，出厂设置好的
• 逻辑分辨率：缩放调节的分辨率，由软件/驱动设置（写代码参考逻辑分辨率）

长度单位

1. px：像素
2. em：相对于当前元素或其父元素font-size的倍数
3. rem：相对于根元素font-size的倍数，html标签就是根，1rem = 1HTML字号大小
4. %：相对父元素计算

目前rem布局方案中，将网页等分成10份，HTML标签的字号为视口宽度的1/10。

vw与vh

是相对单位，相对视口的尺寸（viewport width，viewport height）计算结果。

1vw = 1/100视口宽度，1vh = 1/100视口高度。

媒体查询

手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？

媒体查询能够检测视口的宽度，然后编写差异化的CSS样式。当某个条件成立，执行对应的CSS样式。

@media (width: 500px) { body { background-color: red; } }

完整写法（了解）

@media 媒体类型 and (媒体特性) { CSS代码 }

媒体类型用来区分设备类型：

• 屏幕 - screen - 带屏幕的设备
• 打印预览 - print - 打印原来模式
• 阅读器 - speech - 屏幕阅读模式
• 不区分类型 - all - 默认值，包括以上3种情形

媒体特性用来描述媒体类型的具体特征：

• 视口宽高 - width、height
• 视口最大/最小宽高 - max-width、max-height、min-width、min-height
• 屏幕方向 - orientation（portrait竖屏、landscape横屏）

逻辑操作符：and、only、not。

CSS 资源：

• MDN：https://developer.mozilla.org/zh-CN/
• W3C CSS 规范：https://www.w3.org/Style/CSS/