大家好，我是讯享网，很高兴认识大家。



思维导图链接（高清**）

图中1, 2, 3, 4 表示优先级
讯享网

注意事项：

• !important 声明的样式的优先级最高；
• 如果优先级相同，则最后出现的样式生效；
• 继承得到的样式的优先级最低；
• 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，它们的权值都为 0 ；
• 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

可继承：

font-family font-weight font-size

color text-align line-height

如 visibility

由于属性太多，这里只列举常见的可继承的属性

block： 会独占一行，可以设置 width、height、margin 和 padding 属性；

inline： 元素不会独占一行，设置 width、height 属性无效。但可以设置水平方向的 margin 和 padding 属性，不能设置垂直方向的 padding 和 margin；

inline-block： 将对象设置为 inline 对象，但对象的内容作为 block 对象呈现，之后的内联对象会被排列在同一行内。

display: none: 渲染树不会渲染对象
visibility: hidden: 元素在页面中仍占据空间，但是不会响应绑定的监听事件。
opacity: 0: 元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
position: absolute: 通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
z-index: 负值:来使其他元素遮盖住该元素，以此来实现隐藏。
clip/clip-path: 元素仍在页面中占据位置，但是不会响应绑定的监听事件。
transform: scale(0,0): 将元素缩放为 0，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

两者都是外部引用 CSS 的方式，它们的区别如下：

是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务； 只能加载 CSS。
引用 CSS 时，在页面载入时同时加载； 需要页面网页完全载入以后加载。
是 XHTML 标签，无兼容问题； 是在 CSS2.1 提出的，低版本的浏览器不支持。
支持使用 Javascript 控制 DOM 去改变样式； 不支持。

是，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于 flash 的补间动画，设置一个开始关键帧，一个结束关键帧。

是，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于 flash 的补间动画，但是它可以设置多个关键帧（用@keyframe 定义）完成动画。

这两个属性都是让元素隐藏，不可见。两者区别如下：

1. 在渲染树中

• 不渲染元素
• 渲染元素，只是不可见

2. 是否是继承属性

• 是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；
• 是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示；

3. 重排与重绘

• 修改此属性，会导致整个文档重排
• 修改此属性，只会导致当前元素重绘

伪元素： 在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：

讯享网

伪类： 将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：

讯享网

CSS3 中的盒模型有以下两种：、

是由四个部分组成的，分别是 、、 和 。

和 的区别在于设置 和 时，所对应的范围不同：
标准盒模型的 width 和 height 属性的范围只包含了 ，
IE 盒模型的 width 和 height 属性的范围包含了 。

可以通过修改元素的 box-sizing 属性来改变元素的盒模型：
box-sizing: 表示标准盒模型（默认值）
box-sizing: 表示 IE 盒模型（怪异盒模型）

浏览器会把 inline 内联元素间的空白字符（空格、换行、Tab 等）渲染成一个空格。为了美观，通常是一个放在一行，这导致换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。

解决办法：

• 为设置 float:left。不足：有些容器是不能设置浮动，如左右切换的焦点图等。
• 将所有写在同一行。不足：代码不美观。
• 将内的字符尺寸直接设为 0，即 font-size:0。不足：中的其他字符尺寸也被设为 0，需要额外重新设定其他字符尺寸，且在 Safari 浏览器依然会出现空白间隔。
• 消除的字符间隔 letter-spacing:-8px，不足：这也设置了内的字符间隔，因此需要将内的字符间隔设为默认 letter-spacing:normal。

1. 新增各种 选择器
2. 圆角
3. 旋转
4. 阴影
5. 其他

1. 动图
2. 有损色彩丰富，适合存储照片, 文件较大。
3. 无损，体积小，支持透明度
4. 放大不失真，适合 logo icon
5. 无损, 不压缩, 文件较大。
6. 谷歌新出的图片格式, 体积比 更小, 兼容性不好。

（精灵图），将一个页面涉及到的所有图片都包含到一张大图中去，然后利用 CSS 的 background-image，background-repeat，background-position 属性的组合进行背景定位。

优点：

• 利用 CSS Sprites 能很好地网页的 请求，从而大大提高了页面的性能，这是 最大的优点；
• CSS Sprites 能图片的，把 3 张图片合并成 1 张图片的字节总是小于这 3 张图片的字节总和。

缺点：

• 在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易出现背景断裂；
• CSS Sprites 在开发的时候相对来说有点麻烦，需要借助photoshop或其他工具来对每个背景单元测量其准确的位置。
• 维护方面：CSS Sprites 在的时候比较，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，

以 为例，当写 CSS 代码时，针对于单位 ，其宽度为 414px & 896px，也就是说当赋予一个 div 元素宽度为 414px，这个 div 就会填满手机的宽度；

而如果有一把尺子来实际测量这部手机的，实际为 1242*2688 物理像素；经过计算可知，1242/414=3，也就是说，在单边上，一个 = 3 个物理像素，就说这个屏幕的像素密度为 3，也就是常说的 3 倍屏。

对于图片来说，为了保证其不，1 个图片像素至少要对应一个物理像素，假如原始图片是 像素，那么在 3 倍屏上就要放一个 像素的图片才能保证 1 个物理像素至少对应一个图片像素，才能不失真。

当然，也可以针对所有屏幕，都只提供最高清图片。虽然屏幕用不到那么多图片像素，而且会因为下载多余的像素造成和，但从结果上说能保证图片在所有屏幕上都不会失真。

还可以使用 CSS 媒体查询来判断不同的像素密度，从而选择不同的图片:

加载性能：

• css , 减小文件体积。
• css 样式 margin-bottom:bottom； margin-left:left；比 margin:top 0 bottom 0；执行效率高。
• 减少使用 ，建议使用 ，因为 link 在页面加载时一起加载，import 是页面加载完成之后再加载。

选择器性能：

• 选择器, 减少层级, 最高不超过3层
• 尽量使用 , 避免使用html标签选择
• 少使用选择器, 后代选择器
• 避免对的属性定义
• 避免使用规则, 只对需要的元素进行处理`

渲染性能：

• 慎重使用高性能属性：、。
• 尽量减少页面、。
• 属性值为 0 时，不加。
• 属性值为浮动小数 0.，可以小数点之前的 0。
• 不使用 前缀，它会影响 css 的。

可维护性：

• 抽离 , 提高。
• 样式与内容, 提高。

预处理器， 如：，，用来预编译 sass或者less，增加了 css 代码的。层级，循环， 变量，循环等功能对UI组件与。

后处理器， 如： ，通常是在完成的样式表中根据 CSS 规范处理 CSS。最常做的是添加浏览器私有，解决跨浏览器的问题。

使用原因：

1. 结构清晰， 便于
2. 可以很方便的浏览器私有语法的差异
3. 完美的了 CSS 代码，可以应用到老项目中
4. 可以轻松实现

主要有以下三种情形:

• 有空格时会有间隙，可以解决；
• 正值时，可以让 使用解决；
• 使用 时，可通过设置 font-size:0、letter-spacing、word-spacing 解决；

单行文本溢出

讯享网

多行文本溢出

讯享网

简单来说， 可以针对不同的设置不同的样式，特别是需要设置设计的页面。

CSS 工程化是为了解决以下问题：
代码如何组织、如何拆分、模块结构怎样设计？
怎样写出更好的 CSS ？
如何处理我的 CSS，才能让它的结果最优？
容易变更, 容易接手

以下三个方向都是时下比较流行的、普适性非常好的 CSS 工程化实践：
Less、 Sass 等；
PostCSS
。

如何用 Webpack 实现对 CSS 的处理：
导入 CSS 模块，对 CSS 代码进行编译处理；
创建 style 标签，把 CSS 内容写入标签。

在实际使用中，。因为只有完成了编译过程，才可以对 css 代码进行插入；若提前插入了未编译的代码，那么 webpack 是无法理解这坨东西的，它会无情报错。

以图片显示为例：

• 是浏览器可视区的高度；
• || 是浏览器滚动的过的距离；
• 是元素顶部距离文档顶部的高度（包括滚动条的距离）；
• 内容达到显示区域的：;

通常 的使用是在有两个的标签，z-index 值越大就越是在上层。z-index 元素的 属性需要是 ， 或是 。

z-index 属性在下列情况下会失效：

• 父元素 position 为 时，子元素的 z-index 失效。解决：父元素 position 改为 absolute 或 static；
• 元素没有设置 position 属性为非 static 属性。解决：设置该元素的 position 属性为 relative，absolute 或是 fixed；
• 元素在设置 z-index 的同时还设置了 浮动。解决：去除 float，改为 ；

• translate 位移
• rotate 旋转
• scale 缩放
• skew 斜切

像素px 布局单位
百分比% ，相对于的，从而实现响应式的效果。
em 相对于父元素的文本的。如果父元素未设置 ，则相对于浏览器的字体尺寸(默认 16px)。
rem 相对于根元素 的倍数。作用：利用 rem 可以实现简单的布局，可以利用 html 元素中字体的大小与屏幕间的比值来设置 font-size 的值，以此实现当屏幕分辨率变化时让元素也随之变化。

vw： 相对于视窗的宽度，视窗宽度是 100vw；
vh： 相对于视窗的高度，视窗高度是 100vh；
vmin： vw 和 vh 中的较小值；
vmax： vw 和 vh 中的较大值；

和百分比的区别是: 相对于视窗, 相对于父元素

三者的区别：

• 是固定的像素，一旦设置了就无法因为适应页面大小而改变。
• 和 相对于 px 更具有灵活性，他们是长度单位，其长度不是固定的，更适用于响应式布局。
• em 是相对于其来设置字体大小，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而 rem 是相对于，这样就意味着，只需要在根元素确定一个参考值。

使用场景：

• 对于只需要适配移动设备，且分辨率对页面影响不大的，使用 即可 。
• 对于需要适配移动设备，使用 ，例如需要适配 iPhone 和 iPad 等分辨率差别比较挺大的设备。

移动端适配主要有维度：

适配不同像素密度，针对不同的，使用 CSS ，选择不同精度的图片，以保证图片不会；
适配不同屏幕大小，由于不同的屏幕有着不同的大小，所以如果直接使用 单位，会使得开发的页面在某一款手机上可以准确显示，但是在另一款手机上就会。为了适配不同屏幕的大小，应按照比例来还原设计稿的内容。

为了能让页面的尺寸自适应，可以使用 ，，， 等。

是指一个网站能够。

关于原理： 基本原理是通过媒体查询（@media）查询检测不同的设备屏幕尺寸做处理。

关于兼容： 页面头部必须有 声明的 。

浮动的定义： 非 IE 浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。

浮动的工作原理：

• 浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
• 浮动元素碰到包含它的边框或者其他浮动元素的边框停留 浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。

浮动元素引起的问题？

• 父元素的高度无法被撑开，影响与父元素同级的元素
• 与浮动元素同级的非浮动元素会跟随其后
• 若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构

使用 clear 属性清除浮动，其语法如下：

讯享网

如果单看字面意思，clear:left 是“清除左浮动”，clear:right 是“清除右浮动”，实际上，这种解释是有问题的，因为浮动一直还在，并没有清除。

官方对 clear 属性解释：“元素盒子的边不能和前面的浮动元素相邻”，对元素设置 clear 属性是为了避免浮动元素对该元素的影响，而不是清除掉浮动。

还需要注意 clear 属性指的是元素盒子的边不能和前面的浮动元素相邻，注意这里“前面的”3 个字，也就是 clear 属性对“后面的”浮动元素是不闻不问的。考虑到 float 属性要么是 left，要么是 right，不可能同时存在，同时由于 clear 属性对“后面的”浮动元素不闻不问，因此，当 clear:left 有效的时候，clear:right 必定无效，也就是此时 clear:left 等同于设置 clear:both；同样地，clear:right 如果有效也是等同于设置 clear:both。由此可见，clear:left 和 clear:right 这两个声明就没有任何使用的价值，至少在 CSS 世界中是如此，直接使用 clear:both 吧。

一般使用伪元素的方式清除浮动：

clear 属性只有块级元素才有效的，而::after 等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时需要设置 display 属性值的原因。

先来看两个相关的概念：

• Box: Box 是 CSS 布局的对象和基本单位，⼀个⻚⾯是由很多个 Box 组成的，这个 Box 就是我们所说的盒模型。
• Formatting context：块级上下⽂格式化，它是⻚⾯中的⼀块渲染区域，并且有⼀套渲染规则，它决定了其⼦元素将如何定位，以及和其他元素的关系和相互作⽤。

块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视化 CSS 渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

通俗来讲：BFC 是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。

创建 BFC 的条件：

• 根元素：body；
• 元素设置浮动：float 除 none 以外的值；
• 元素设置绝对定位：position (absolute、fixed)；
• display 值为：inline-block、table-cell、table-caption、flex 等；
• overflow 值为：hidden、auto、scroll；

BFC 的特点：

• 垂直方向上，自上而下排列，和文档流的排列方式一致。
• 在 BFC 中上下相邻的两个容器的 margin 会重叠
• 计算 BFC 的高度时，需要计算浮动元素的高度
• BFC 区域不会与浮动的容器发生重叠
• BFC 是独立的容器，容器内部元素不会影响外部元素
• 每个元素的左 margin 值和容器的左 border 相接触

BFC 的作用：

• 解决 margin 的重叠问题：由于 BFC 是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个 BFC，就解决了 margin 重叠的问题。
• 解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为 0。解决这个问题，只需要把父元素变成一个 BFC。常用的办法是给父元素设置overflow:hidden。
• 创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。

讯享网

左侧设置float:left，右侧设置overflow: hidden。这样右边就触发了 BFC，BFC 的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠，实现了自适应两栏布局。

问题描述：

两个块级元素的上外边距和下外边距可能会合并（折叠）为一个外边距，其大小会取其中外边距值大的那个，这种行为就是外边距折叠。需要注意的是，浮动的元素和绝对定位这种脱离文档流的元素的外边距不会折叠。重叠只会出现在垂直方向。

计算原则：

折叠合并后外边距的计算原则如下：

• 如果两者都是正数，取大者
• 如果是一正一负，取正值减去负值的绝对值
• 两个都是负值时，取绝对值大者

解决办法：

对于折叠的情况，主要有两种：和

1. 兄弟之间重叠

• 底部元素变为行内盒子：display: inline-block
• 底部元素设置浮动：float
• 底部元素的 position 的值为absolute/fixed

2. 父子之间重叠

• 父元素加入：overflow: hidden
• 父元素添加透明边框：border:1px solid transparent
• 子元素变为行内盒子：display: inline-block
• 子元素加入浮动属性或定位

层叠顺序，英文称作 stacking order，表示元素发生层叠时有着特定的垂直显示顺序。下面是盒模型的层叠规则：

对于上图，由上到下分别是：

1. 背景和边框：建立当前层叠上下文元素的背景和边框。
2. 负的 z-index：当前层叠上下文中，z-index 属性值为负的元素。
3. 块级盒：文档流内非行内级非定位后代元素。
4. 浮动盒：非定位浮动元素。
5. 行内盒：文档流内行内级非定位后代元素。
6. z-index:0：层叠级数为 0 的定位元素。
7. 正 z-index：z-index 属性值为正的定位元素。

::: tip 提示 当定位元素 z-index:auto，生成盒在当前层叠上下文中的层级为 0，不会建立新的层叠上下文，除非是根元素。 :::

前面三者的定位方式如下：

relative： 元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素。

fixed： 元素的定位是相对于 window （或者 iframe）边界的，和其他元素没有关系。但是它具有破坏性，会导致其他元素位置的变化。

absolute： 元素的定位相对于前两者要复杂许多。如果为 设置了 、，浏览器会根据什么去确定它的纵向和横向的偏移量呢？答案是浏览器会递归查找该元素的所有父元素，如果找到一个设置了的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位。如下两个图所示：

1. 首先判断 display 属性是否为 none，如果为 none，则 position 和 float 属性的值不影响元素最后的表现。
2. 然后判断 position 的值是否为 absolute 或者 fixed，如果是，则 float 属性失效，并且 display 的值应该被设置为 table 或者 block，具体转换需要看初始转换值。
3. 如果 position 的值不为 absolute 或者 fixed，则判断 float 属性的值是否为 none，如果不是，则 display 的值则按上面的规则转换。注意，如果 position 的值为 relative 并且 float 属性的值存在，则 relative 相对于浮动后的最终位置定位。
4. 如果 float 的值为 none，则判断元素是否为根元素，如果是根元素则 display 属性按照上面的规则转换，如果不是，则保持指定的 display 属性值不变。

总的来说，可以把它看作是一个类似优先级的机制， 和 优先级最高，有它存在的时候，浮动不起作用， 的值也需要调整；其次，元素的 特性的值不是 的时候或者它是根元素的时候，调整 的值；最后，非根元素，并且非浮动元素，并且非绝对定位的元素， 特性值同设置值。

共同点：

• 改变行内元素的呈现方式，将 display 置为
• 使元素普通文档流，不再占据文档物理空间
• 覆盖文档元素

不同点：

• 与 的根元素不同， 的根元素可以设置， 根元素是浏览器。
• 在有滚动条的页面中， 会跟着父元素进行移动， 固定在页面的具体位置。

英文字面意思是粘贴，所以可以把它称之为粘性定位。语法：position: sticky; 基于用户的来定位。

粘性定位的元素是依赖于用户的滚动，在 与 定位之间切换。它的行为就像 ; 而当页面滚动超出目标区域时，它的表现就像 ;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

传送门： 前端进阶高薪必看-CSS之手写篇

完结，撒花 ✿✿ヽ(°▽°)ノ✿

---

点赞 o(￣▽￣)ｄ 不迷路

收藏 ✋🏻 + 关注

谢谢老铁 ♪(･ω･)ﾉ