前端复习笔记 —— CSS

原创已于 2025-12-19 15:03:54 修改 · 829 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #笔记 #css

于 2025-12-11 23:50:15 首次发布

1.水平垂直居中的方法

1. Flex布局设置

优点：代码简洁、兼容性好（IE11 + 支持）、无需知道子元素宽高，适配任意子元素类型（行内 / 块级、固定 / 自适应宽高）
给父盒子设置属性：

	.parent {
		display:flex; /*定义一个伸缩盒子*/
		justify-content:center;/*水平居中*/
		align-items:center/*垂直居中*/
	}

若是元素多行居中可以添加flex-wrap:wrap;再用align-content:center;替代align-items。
给子盒子设置属性，给容器设置display:flex;子项设置margin: auto;

2. 绝对定位设置

.parent {
  position: relative; /* 父容器相对定位 */
}
# 注意：transform 可能触发硬件加速，若子元素有模糊问题，可加transform: translateZ(0)优化。优点：无需知道子元素宽高，适配旧浏览器（IE9 + 支持 transform）。
.child1 {
  position: absolute;
  left: 50%;
  top: 50%;
  transfrom:translate(-50%, -50%);
}
# 优点：兼容性极佳（IE8+），适合子元素宽高固定的场景。
.child2 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto; /* 自动居中 */
}

3. Grid 网格布局（极简，适合单元素居中）

优点：代码最少，现代浏览器支持良好，适合单元素居中场景。

.parent {
  display: grid;
  place-items: center; /* 等同于 justify-items: center + align-items: center */
}

4. table-cell 布局（适配行内元素 / 多行文本）

父容器设为表格单元格，用text-align和vertical-align居中，子元素需设为inline-block。

.parent {
  display: table-cell;
  text-align: center; /* 水平居中 */
  vertical-align: middle; /* 垂直居中 */
}
.child {
  display: inline-block; /* 让块级子元素支持text-align居中 */
}

5. 行内元素居中（文字 / 图片等行内元素）

利用text-align和line-height，仅适用于行内元素或单行文本,常用于按钮文字、导航栏文字、单张图片等。

.parent {
	/* height:200px; */
  text-align: center; /* 水平居中 */
  line-height: 200px; /* 行高等于父容器高度，实现垂直居中 */
  font-size: 0; /* 消除行内元素默认间隙（可选） */
}
.child {
  display: inline-block;
  line-height: normal; /* 重置子元素行高，避免文字超出 */
  font-size: 16px; /* 恢复字体大小 */
}

6. calc 计算（需子元素宽高固定）

绝对定位 +calc计算位置，手动减去子元素宽高的一半。

.parent {
  position: relative;
}
.child {
  position: absolute;
  /* left = 50% - 子元素宽度/2，top同理 */
  left: calc(50% - 75px); /* 150px/2=75px */
  top: calc(50% - 50px);  /* 100px/2=50px */
}

7. 百分比 padding/margin（适配响应式）

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 25%;
  left: 25%;
  margin-top: 50px; /* 手动调整垂直居中 */
  margin-left: 75px; /* 手动调整水平居中 */
}

nth-child和nth-of-type的区别

:nth-child(n)选择器：匹配属于其父元素的第N个子元素，不论元素类型，n可以是数字、关键词或公式；
:nth-of-type(n)选择器比配属于父元素特定类型的第N个子元素的每个元素；

<div>
	<span>往同父级找第N个符合的元素</span>
	<div>:nth-child(2)选这个</div>
	<span>`:nth-of-type(2)是选这个</span>
</div>

浏览器的渲染

浏览器的渲染过程

浏览器的网络线程收到HTML文档后会产生一个渲染任务，并将其传递给渲染主线程的消息队列。在事件循环机制作用下，主线程提取消息队列中渲染任何，开启渲染流程。

渲染八大阶段分别是：HTML解析、样式计算、布局、分层、绘制、分块、光栅化、画;上个阶段的输出成为下个阶段的输入。

主线程（单线程）
1. 解析过程中遇到HTML元素会解析最终生成DOM树；
2. 解析过程中遇到style标签、link元素等css样式会解析生成CSSOM树；
  - CSS不会阻塞HTML解析
    下载和解析css的工作实在预解析线程中进行的，因此css不会阻塞HTML的解析。
  - JS会阻塞HTML解析
    主线程解析到script的位置，会停止解析HTML，转而等待JS文件下载好，因为JS代码的执行过程可能会修改当前的DOM树，因此暂停。
  - 此时，会得到DOM树和CSSOM树，浏览器的默认样式，内部样式，外部样式均会包含在CSSOM树中。
  - 染下一步是样式计算，主线程遍历得到DOM树，依次为树中每个节点计算出最终的样式称之为Computed Style。完成后会得到一棵带有样式的DOM树。
3. 布局完成后会得到布局树layout，布局阶段会依次遍历DOM树每个节点，计算每个节点的几何信息，如宽高，相对包含块的位置。
4. 下一步是分层Layer，主线程会使用一套相对复杂的策略对整个布局树种进行分层，将来某一层改变，仅会对该层进行后续处理，提升效率。如滚动条，堆叠上下文，transform，opacity等样式。
5. 接下来是绘制paint：主线程为每个层单独绘制指令集，用于描述这一层的内容该如何画出来，完成绘制后，主线程将每个图层的绘制信息提交给合成线程，剩余工作将由合成线程完成。

合成线程
1. 分块tilling：合成线程会对每个图层进行分块，将其划分为更多小区域，这是多线程同时进行的；
2. 分块完成后到光栅化阶段raster：合成线程会将信息块交给GPU进程，以极高的速度完成光栅化。GPU进程会开启多个线程完成光栅化，并且优化处理靠近视口区域的块。光栅化的结果就是一块一块的位图。
3. 最后阶段是draw：合成线程拿到每层，每个块位图后，生成一个个指引quad信息，指引会标识出每个位图应该画到屏幕的哪个位置，以及考虑旋转，缩放等变形。（变形发生在合成线程这也就是transform效率高的本质原因）；合成线程会把quad提交给GPU进程，由GPU进程产生系统调用，提交给GPU硬件，完成最终的屏幕成像。

什么是回流reflow？

回流的本质是重新计算layout树；是从layout开始往后的都需要重新执行，很耗性能。

进行会影响布局树的操作，需要重新计算layout树，为避免连续多次操作导致布局树反复计算，浏览器会合并这些操作，当js代码全部完成后再进行统一的计算，所以，改动属性造成的回流是异步完成的，所以也会导致不能及时获取最新的布局信息。
读取offsetWidth/getBoundingClientRect()等布局属性时，会强制立即回流，需避免频繁操作；
性能优化：优先用transform/opacity（仅合成）替代布局属性修改，批量操作 DOM 并减少布局属性读取。

什么是重绘repaint？

重绘的本质是重新根据分层信息计算绘制指令；是动layer开始往后的重新执行。

当改动可见样式后，需重新计算，会引发重绘。
由于布局信息也属于可见样式，所以reflow一定会引起repaint。

为什么transform的效率高？

transform的本质是最后的draw阶段触发的，既不会影响布局也不会影响绘制指令；

draw是合成线程的最后阶段所以几乎不会影响主线程，反之，渲染主线程如何忙碌也不会影响transform变化。

如何减少回流、重绘？

尽量属于css属性简写如border: 2px solid red;代替border-width，border-style，border-color；
批量修改元素样式比如用class；
尽量避免用table布局（table元素一旦触发回流会导致table里所以元素回流）；
需要创建多个DOM节点时，使用DocumentFragment创建；每创建一个页面就会发生回流，所以DocumentFragment批量创建；
尽量不要在For循环里获取元素的位置或大小属性，这也会引起回流。非要获取最好能利用缓存。

html使用的字符集是什么?有什么特点?

utf-8是由unicode演变而来的。
特点：通用性强，空间占用合理。
UTF-8是一种针对Unicode的可变长度字符编码。由于 Unicode 包含了世界上几乎所有的字符，因此 UTF-8 支持世界上几乎所有国家和地区的语言。

事件分级DOM0和DOM2的区别？

DOM0级事件：

特点：所有浏览器都支持；事件只能注册一次，后面的会覆盖旧的。
注册方式：
- 在html上添加<div onclick="alert('hello)"></div>其中this指向自身。
  *匿名函数 d.onclick=function(){},其中this指向自身。
- 普通函数onclick="ok()",相当于动态调用，没有时间参数e的传递。

DOM2级事件：

注册方式：
- 添加addEventListener(event,function,userCapture);

DOM0和DOM2级事件的区别：

dom0级事件会覆盖，dom2级不会覆盖会依次执行。
dom0和dom2可以共存，不会互相覆盖，但是dom0之间依然会覆盖。

addEventlistener的参数有哪些？

el.addEventlistener(type,listener,useCapture)

el:事件类型，比如标签，window，document对象等；
type：事件类型，click，mouseenter等；
listener：事件处理函数，事件发生时，就会触发该函数运行；
useCapture：布尔值，规定是否是捕获型，默认false(冒泡），为ture时捕获，为false时冒泡，可选，常忽略。
addEventlistener第三个参数可为{}对象；

//新增参数的三个属性，默认值都是 false。
el.addEventlistener(type, listener,{
	capture:false,		//===usecapture
	once: false,	//是否设置单次监听，if true，会在调用后自动销毁listener
	passive: false	//是否让 阻止默认行为(preventDefault())失效，if true意味着listener意味着 listener（事件处理函数）永远不会调用event.preventDefault()来阻止浏览器的默认行为（即使写了该代码，也无效）即 “监听器不会阻止默认行为”，无需等待，可立即执行滚动，大幅提升流畅度。。
}

true的触发顺序总是在false之前；
若多个均为true，则外层的触发先于内层；

HTML中DOCTYPE的作用

<!doctype html>是h5的声明。声明当前HTML版本，用来告知web浏览器该文档是用那种HTML或XHTML规范来解析页面，以便浏览器更加准确的理解页面内容。
对文档做了正确的声明，浏览器就会进入标准模式；浏览器会按照W3C标准来解析渲染页面，在所有浏览器下显示的样式效果就会保持一致。不写的话浏览器会以老旧的“怪异模式”去渲染页面，不同浏览器下显示样式可能不一样。

事件委托

事件代理就是把原本需要绑定在子元素的响应事件委托给父元素；

具体实现过程主要是:利用事件冒泡过程，并且利用事件对象event的target属性精准定位到触发事件的子元素对子元素进行操作。

e.target和e.currentTarget的区别?

e.currentTarget始终是监听事件者，即直接调用addEventlistener那个节点。
e.target是事件的真正发出者，即实际触发事件的节点，在click事件中就是被点击的节点。

如何获取用户的浏览器内核是什么

navigator.appCodeName在控制台直接打印有如 'Mozilla';

为什么inline-block布局的时候存在一个空格的间距?

这实际上是换行引起的问题，默认会显示一个空格，所以需要给父级设置font-size=0;

<u1>
	<li>这是一个/o</li>
	<li>这是另一个1i</li>
	<li>这是另另一个li</li>
</ul>

Flex布局学习

学习网站：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

flex布局可以设置item子元素的顺序吗?

可以使用 css 的 order 属性来控制 flex 容器中项目的顺序。
- 默认情况下，项目的 order 值为 0，可以为项目设置一个正数或负数的 order 值来改变它们的顺序。具有较小 order 值的项目会排在前面。
flex的子元素不可以浮动，会冲突，依旧保持flex状态。

定位属性

position有哪几个属性

position:static 静态定位(默认)；
position:relative 相对定位；
- 参考物:元素的初始位置
- 特点:不影响元素本身特性，元素不脱离文档流，相对于原位置进行偏移
position:absolute 绝对定位；
- 参考物:距离最近的使用了定位的父级，没有时找body；
- 特点:元素脱离文档流，块级元素由内容撑开宽高，清除子集浮动;
position:fixed 固定定位;
- 参考物:浏览器窗口；
- 特点:清除子集浮动，脱离文档流；
postion: sticky 粘性定位
- 参考物:根据用户的滚动位置进行定位;
- 特点:粘性元素根据滚动位置在相对(relative)和固定(fixed)之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止-然后将其“粘贴“在适当的位置(比如 position:fixed)。

浮动和绝对定位的区别

浮动元素清除浮动之后会撑开父元素。
绝对定位脱离了文档流，不会撑开父元素。

行内元素

行内元素是 CSS 盒模型中核心的元素类型之一，与块级元素（block）、行内块元素（inline-block）并列，核心特征是 “不独占一行、宽高由内容决定”

特性	行内元素（inline）	块级元素（block）
布局方式	不独占一行，多个行内元素并排显示，超出父容器宽度自动换行	独占一行，宽度默认撑满父容器
宽高设置	width/height 属性完全无效（宽高由内容/字体大小决定）	width/height 可自由设置
内外边距（margin/padding）	水平方向（left/right）生效；垂直方向（top/bottom）无效仅“视觉占位”，不影响其他元素布局（无法推开上下元素）	上下左右内外边距均完全生效
边框（border）	垂直方向边框会“溢出”，不影响布局；水平方向正常	边框完全生效，撑占布局空间
对齐方式	可通过 vertical-align 调整垂直对齐（默认基线对齐）	无 vertical-align 效果，可通过 margin/flex 居中
包含关系	不能包含块级元素（仅能包含行内元素/文本），否则浏览器会自动拆分	可包含行内/块级元素

外边距重叠如何解决？

外边距重叠：两个元素，上面的元素margin botton30px，下面的元素margin top 20px。
实际最终两个元素间距30px，而不是50px。这个就是外边距重叠。
怎么解决? 创建BFC即可。。

BFC

BFC(块格式化上下文)是 web页面的可视 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。简单来说， BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
创建 BFC 的常用方式有以下几种:

浮动元素(元素的float不是none，指定float为left或者right就可以创建 BFC)。
绝对定位元素(元素的position为absolute或fixed)。
display:inline-block,display:table-cell, display:flex，display:inline-flex。
overflow 指定除了visible的值如hidden，scroll。

浏览器的下载资源是并行的

最多支持6个

了解过webp吗

WebP 是一种现代的图片格式，用于在 web 上提供更好的有损和无损压缩图片。

使用 webp ，网站管理员和网页开发人员可以创建更小、更丰富的图片，使网页更快。Webp无损图像比PNG 图像小 26%。
有损 WebP压缩使用预测编码对图像进行编码，这种方法与VP8 视频编解码器用于压缩视频关键帧的方法相同。预测编码使用相邻块的像素值来预测块中的值，然后仅对差异进行编码。
无损 Webp 压缩使用已经看到的图像片段来精确重建新像素。如果没有找到有趣的匹配，它还可以使用本地调色板。

雪碧图

把小图片利用工具合成一张，使用的时候通过css的background控制位置进行展示，可以节省网络请求数量。

display:none和visible:hidden的区别?

visible:hidden占位；
display:none不占位；

css中的伪元素和伪类

伪元素和伪类都是 CSS中的选择器，它们都允许在不改变 HTML结构的情况下为特定元素或元素的一部分应用样式。
伪类和伪元素的主要区别在于它们选择的对象不同:伪类选择的是已经存在于文档树中的元素，而伪元素创建了一些新的元素。

css中的伪元素是什么?有什么作用?

伪元素可以用来添加一些选择器的特殊效果，例如向文本的首行或首字母设置待殊样式，或者在元素内容前后插入新内容。

::before:在元素内容前面插入内容。
::after:在元素内容后面插入内容。
::first-letter:选择文本的首字母。
::first-line:选择文本的首行。
::selection:选择用户选中的文本。

伪类

伪类用于根据元素的状态来选择元素，例如鼠标悬停状态(:hover)、选中状态(:checked)或是否被访问过(:visited )等。伪类通常用于为元素添加一些交互效果。

background-size有哪些属性？

background-size 属性用于指定背最图片的大小。它可以接受以下值:

auto:默认值。保持背景图片的原始尺寸。
length:可以使用长度单位(如px、em 等)来指定背景图片的宽度和高度。
percentage:可以使用百分比来指定背景图片的宽度和高度，相对于背景区域的大小。
cover :将背景图片缩放，使其完全覆盖背景区域，同时保持宽高比不变，如果背景图片和背景区域的宽高比不同，那么背景图片将被裁剪以适应背景区域。（图片会被裁剪，显示全）
contain:将背景图片缩放，使其完全适应背景区域，同时保持宽高比不变。如果背贯图片和背景区域的宽高比不同，那么背景区域将被留白。（图片将完全展示）

CSS如何实现一条0.5像素的线

浏览器最小只支持1像素，用scale缩小。

shadow Dom

Shadow DOM 允许将隐藏的DOM 树附加到常规的DOM 树中。它以 shadow root节点为起始根节点，在这个根节点的下方，可以是任意元素，和普通的 DOM 元素一样。这样，可以创建一个独立的 DOM 子树，它与主文档隔离开来，拥有自己的样式和脚本。

隔离性很强，但是不太好用，api比较反人类。

Shadow DOM 的一个重要用途是封装。它允许组件拥有自己的“影子”DOM 树，这个树不能被主文档意外访问,可以有本地样式规则等。可以创建一个组件，它的内部结构、样式和行为都被隐藏起来，与页面上其他部分隔离开来，避免冲突。

CSS动画性能优化

开启GPU加速是核心；
利用css3 translate进行元素移动
推荐使用requestAnimationFrame在js中这个API修改元素位置；
在CSS3中，可以使用transform属性的translatez函数或translate3d 函数来开启 GPU 加速。这些的数会创建一个新的图层，浏览器会使用 GPU来渲染这个图层，从而提高性能。

	//可以使用下面代码开启GPU加速
	.element{
		transform: translatez(e);
		// transform:translate3d(0，0，0);
	}

line-height: 120% 和 line-height: 1.2区别

line-height属性用于指定行高。当你使用百分比值(如 120%)时，行高是相对于该元素的字体大小计算的。如，元素的字体大小为14px，则line-height:120%等同于1ine-height:16.8px。
使用数值(如 1.2)时，行高是相对于该元素的字体大小计算的，但是这个数值会被继承。例如，如果父元素的字体大小为14px，则1ine-height:1.2等同于 1ine-height:16.8px。但是，如果子元素的字体大小为 18px，则它的行高将为21.6px(即18px*1.2)，而不是继承父元素的 16.8px。
总结：当你使用百分比值时，子元素会继承计算后的行高值;而当你使用数值时，子元素会继承这个数值，并根据自己的字体大小重新计算行高。