CSS宝典

DoraBigHead
158 阅读28分钟

小哆啦闭关修炼已久，潜心攻读专业秘技，方才下山考研本欲大展宏图，怎奈山河虽壮志难酬，终是觉察考研无望。思来想去，不若弃考研之念，重拾敲代码之道，复盘前端奇术，以备闯荡职场江湖。 今日小哆啦提笔，将闭关期间整理的CSS宝典略作总结，与诸位共赏。此番分享，虽不敢言妙笔生花，但聊胜于空谈胡诌，且看能否在欢笑中助尔等拨开前端迷雾！

1、说一说你对盒模型的理解

盒模型是前端布局的基础概念，它描述了 HTML 元素的结构和占用的空间，包括内容区（Content）、内边距（Padding）、边框（Border）和外边距（Margin）。在标准盒模型中，width 和 height 仅指内容区的大小，而元素的总宽度和高度需要加上内边距、边框和外边距。而在 IE 盒模型中，width 和 height 包括内容、内边距和边框的总和，通过设置 box-sizing 属性可以切换盒模型模式。比表：

对比项标准盒模型 (content-box)IE 盒模型 (border-box)
定义width 和 height 只包含内容区的大小。width 和 height 包含内容区、内边距和边框的总和。
总宽度计算内容宽度 + 左右内边距 + 左右边框直接等于 width，内容宽度会减去内边距和边框的宽度。
总高度计算内容高度 + 上下内边距 + 上下边框直接等于 height，内容高度会减去内边距和边框的高度。
默认模式现代浏览器的默认盒模型模式。早期 IE 浏览器的默认盒模型模式。
设置方式使用 box-sizing: content-box;。使用 box-sizing: border-box;。
适用场景需要明确内容区域的大小，常用于文本和图片内容布局。更易于控制元素的总宽度和总高度，适合复杂布局场景。

2、css所有选择器及其优先级、使用场景，那些可以继承、如何运用@规则

CSS 选择器及优先级
选择器类型示例描述优先级使用场景
通配选择器*选中所有元素0,0,0,0全局样式重置，如清除默认边距。
元素选择器h1, p选中指定类型的 HTML 元素0,0,0,1为特定 HTML 标签设置默认样式。
类选择器.class选中具有指定类名的元素0,0,1,0为特定类型的组件或区域设置样式。
ID 选择器#id选中具有指定 ID 的元素0,1,0,0独立样式设置，如页面唯一模块的布局。
属性选择器[type="text"]选中具有指定属性的元素0,0,1,0表单控件样式、状态样式的设置。
伪类选择器:hover, :nth-child选中元素特定状态0,0,1,0动态交互样式，列表项的奇偶样式设置。
伪元素选择器::before, ::after为元素插入内容0,0,1,0设置修饰性内容，如装饰图标、背景效果。
组合选择器div p, div > p选中特定父子或兄弟关系的元素根据组成选择器的优先级计算结构化样式设置，如特定容器内的子元素样式。
群组选择器h1, h2, h3同时选中多个不同类型的元素根据每个选择器独立计算简化代码，为多个类型元素设置相同样式。

优先级规则

  • 行内样式：1000，如 style="color: red;"。
  • ID 选择器：0100。
  • 类、伪类、属性选择器：0010。
  • 元素、伪元素选择器：0001。
  • 通配选择器、继承样式优先级最低。

优先级冲突解决

  • 后定义的样式覆盖之前的。
  • 使用 !important 提升优先级（慎用）。
哪些样式可以继承

可继承的属性

  • 文本属性：color, font, letter-spacing, line-height, visibility。
  • 列表属性：list-style。

不可继承的属性（默认）

  • 盒模型相关：margin, padding, border, width, height。
  • 定位和显示：position, display, top, left。

如何强制继承 使用 inherit 明确指定子元素继承父元素属性：

css复制代码div {
  color: blue;
}
p {
  color: inherit; /* 子元素继承父元素的 color 属性 */
}
CSS @规则的运用

CSS 的 @规则 是一组用于条件控制、引入外部资源或定义关键区域的声明。

@规则示例作用使用场景
@import@import "style.css";引入外部 CSS 文件分离样式文件，模块化管理。
@media@media (max-width: 768px) {...}响应式设计，按条件加载样式移动端与桌面端样式分离。
@keyframes@keyframes slide { ... }定义动画关键帧定制动画效果。
@font-face@font-face { ... }定义自定义字体使用外部字体文件。
@supports@supports (display: grid) {...}检测浏览器是否支持某些样式特性渐进增强策略，根据浏览器支持情况加载新特性样式。
@page@page { margin: 1cm; }设置打印页面样式打印优化。
@namespace@namespace svg "http://www.w3.org/...";定义命名空间区分不同 XML 命名空间样式。

使用场景总结

  • 选择器选择场景：根据优先级和具体需求选择合适的选择器组合，避免过度嵌套提升性能。
  • 继承场景：文本样式继承优化全局一致性；强制继承或覆盖实现细化定制。
  • @规则应用场景：响应式设计（@media）、动画效果（@keyframes）、跨平台字体支持（@font-face）。

3、CSS伪类和伪元素有哪些，它们的区别和实际应用

定义与区别
特性伪类 (:pseudo-class)伪元素 (::pseudo-element)
定义表示元素的某种特定状态，用于选择特定条件下的元素。表示元素的一部分内容，用于创建和样式化虚拟元素。
语法单冒号 : 开头（如 :hover）。双冒号 :: 开头（如 ::before）。
应用范围选择已有的元素。作用于元素的子内容或生成虚拟内容。
W3C 推荐用法单冒号也可用于伪元素（兼容性考虑），但推荐用双冒号。双冒号区分伪类和伪元素。
常用伪类及应用

伪类表示元素状态，通常用于用户交互、位置选择等场景。

伪类示例描述应用场景
:hovera:hover {}鼠标悬停在元素上时触发按钮交互、超链接悬停效果。
:focusinput:focus {}元素获得焦点时触发表单聚焦高亮。
:nth-child(n)li:nth-child(2n) {}选中第 n 个子元素（从 1 开始计数）列表项奇偶样式区分。
:first-childp:first-child {}选中父元素的第一个子元素特殊样式，如列表首项突出显示。
:last-childp:last-child {}选中父元素的最后一个子元素表单最后一项间距调整。
:not(selector)div:not(.active) {}选中不符合选择器条件的元素排除特定样式设置。
:disabledbutton:disabled {}选中不可用状态的元素禁用按钮灰化处理。
:checkedinput:checked {}选中复选框或单选框时触发表单控件状态高亮。
常用伪元素及应用

伪元素用于生成和操作虚拟内容，如装饰性内容和文本样式化。

伪元素示例描述应用场景
::beforediv::before {}在元素内容前插入内容添加装饰图标或修饰文本。
::afterdiv::after {}在元素内容后插入内容添加尾部修饰符号或清除浮动。
::first-linep::first-line {}选中元素第一行文本文本段落首行样式调整，如首行缩进或高亮显示。
::first-letterp::first-letter {}选中元素首字母段落首字母放大、加粗、设为小型大写字母等排版设计。
::selection::selection {}选中用户高亮的文本内容设置用户文本选择时的背景色和文字颜色。
::markerli::marker {}定义列表项的标记样式（仅用于列表元素）自定义有序或无序列表的标记外观。
::placeholderinput::placeholder {}定义表单控件占位符文本样式表单提示文字设计。
实际应用场景

  • 伪类：

    • 表单交互：input:focus { border: 1px solid blue; } 用于高亮聚焦的输入框，提升用户体验。
    • 导航菜单：a:hover { color: red; } 鼠标悬停在菜单项时改变文字颜色，提供交互反馈。

  • 伪元素：

    • 装饰性内容：div::before { content: '🌟'; } 在元素前添加星标作为修饰。

    • 清除浮动

      ：

      .clearfix::after {
  content: '';
  display: block;
  clear: both;
}

      解决浮动布局问题，确保父元素高度自动适配子元素。

注意：

  • 伪类关注元素状态，通过条件控制元素样式，用于交互逻辑。
  • 伪元素作用于内容本身，生成虚拟元素或装饰性内容，用于增强页面设计效果。

4、CSS几种定位的规则、定位参照物、对文档流的影响，如何选择最好的定位方式，雪碧图实现原理

定位规则及参照物
定位方式规则及表现定位参照物对文档流的影响应用场景
Static (默认定位)元素按照正常文档流排列，top、left 等属性无效父元素（正常文档流顺序）不脱离文档流常规排版，不需要特殊样式时使用。
Relative (相对定位)元素相对其在文档流中的原始位置偏移，不影响其占用空间元素自身不脱离文档流微调元素位置，如轻微位移或视觉调整。
Absolute (绝对定位)元素完全脱离文档流，根据最近的已定位祖先元素定位；若无，则相对于 html 元素。最近的已定位父级元素或 html脱离文档流，影响其他元素的布局弹窗、浮动图层、动态布局等场景。
Fixed (固定定位)元素完全脱离文档流，相对于浏览器窗口固定位置，不随滚动条滚动。浏览器窗口脱离文档流，固定在视窗内头部导航、固定按钮或广告等场景。
Sticky (粘性定位)元素在滚动时表现为 relative 和 fixed 的混合；在特定滚动范围内相对父级元素移动最近的滚动容器不完全脱离文档流，部分影响其他布局表头随内容滚动（如表格列标题）。
对文档流的影响
  • Static 和 Relative： 元素仍占用文档流中的空间，其他元素会考虑其位置。
  • Absolute 和 Fixed： 元素脱离文档流，原位置不再占用空间，其他元素会填充其空隙。
  • Sticky： 在滚动范围内，部分脱离文档流，同时占用原空间。
如何选择最优定位方式

  1. 根据布局需求：

    • 常规布局：使用 static 或 relative。
    • 浮动元素：使用 absolute，定位在父级容器内。
    • 固定导航栏：使用 fixed，确保元素始终在视口内。
    • 滚动交互：使用 sticky，提供灵活的滚动效果。

  2. 避免不必要的复杂度：

    • 能用 relative 实现的，不用 absolute。
    • 能用 sticky 实现的，不用 fixed。

  3. 注意性能优化：

    • 对于频繁滚动的页面，sticky 更适合，避免频繁重绘。
雪碧图实现原理

雪碧图 (Sprite) 是一种优化网页加载速度的技术，将多个小图标合并为一张图片，通过 CSS 的背景定位来显示需要的部分。

实现步骤

  1. 图片合并： 将多个小图片合并成一张大图，减少 HTTP 请求次数。

  2. CSS 背景定位： 使用 background-image 设置雪碧图作为背景；通过 background-position 精确显示所需区域：

    .icon {
    width: 32px; height: 32px;
    background-image: url('sprite.png');
    background-repeat: no-repeat;
}
.icon-home {
    background-position: 0 0;
}
.icon-search {
    background-position: -32px 0;
}

  3. 使用场景：

    • 导航栏图标。
    • 按钮状态变化（普通、悬停、点击）。

  4. 优点：

    • 减少请求次数，提高加载速度。
    • 统一管理小图片，方便维护。

  5. 缺点：

    • 如果图片位置调整，需重新计算坐标。
    • 无法使用单个图标的响应式调整，需要配合 media queries 或其他方式处理。

注意

  • 定位规则的选择应考虑布局复杂性和性能需求。
  • 雪碧图通过减少 HTTP 请求优化加载性能，但需精确背景定位以确保内容显示正确。

5、写出尽可能多的水平垂直居中的方案并对比它们的优缺点

代码实现代码简洁性动态内容支持浏览器兼容性适用场景优缺点
Flexboxcss<br>.parent { display: flex; justify-content: center; align-items: center; height: 100%; }<br>.child { width: 100px; height: 100px; }高强高现代布局、动态内容居中优点: 简洁、现代，适应性强，代码量少，无需固定宽高。 缺点: 依赖现代浏览器支持，但现代浏览器已广泛支持。
Gridcss<br>.parent { display: grid; place-items: center; height: 100%; }<br>.child { width: 100px; height: 100px; }高强中高简单布局，适用于动态内容优点: 最简洁的实现，单行代码即可居中。 缺点: 老旧浏览器（如 IE）不支持 Grid 布局。
Position + Transformcss<br>.parent { position: relative; height: 100%; }<br>.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; }中强高动态内容的绝对定位居中优点: 精确居中，兼容性好。 缺点: 父容器需设置 position 和固定高度，代码略复杂。
Position + Margincss<br>.parent { position: relative; height: 100%; }<br>.child { position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; width: 100px; height: 100px; }中低弱高固定大小元素的居中优点: 适用于固定宽高的元素。 缺点: 不支持动态内容，需手动计算宽高的一半，且代码复杂度较高。
Tablecss<br>.parent { display: table; width: 100%; height: 100%; }<br>.child { display: table-cell; vertical-align: middle; text-align: center; }中中高老旧浏览器兼容布局，适用于文本居中优点: 浏览器兼容性好，不依赖固定高度。 缺点: 语义化较差，不适合现代布局需求。
Line-heightcss<br>.parent { height: 100px; line-height: 100px; text-align: center; }<br>.child { display: inline-block; }高弱高单行文本的水平垂直居中优点: 实现简单，代码量少。 缺点: 仅支持单行文本居中，不适用于多行文本或复杂布局。
Inline-blockcss<br>.parent { text-align: center; height: 100%; }<br>.parent:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }<br>.child { display: inline-block; vertical-align: middle; }中弱高图标、小型内容的居中优点: 适用于简单内容居中，兼容性强。 缺点: 代码较繁琐，不适用于复杂布局。
Float + Clearfixcss<br>.parent { position: relative; height: 100%; }<br>.child { float: left; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); }中低弱高老项目中的遗留居中方式优点: 浏览器兼容性好，适合老旧代码维护。 缺点: 实现方式不直观，代码冗余，已不推荐。

6、请说一下你对BFC盒子模型的理解。

BFC（块级格式化上下文） 是一个在CSS中定义的布局环境，它用于控制块级元素的布局行为。它的本质是创建一个独立的渲染区域，BFC内的布局行为不会影响到外部元素，外部的布局也不会干扰到BFC内的元素。

BFC的主要特点

  1. 独立的布局环境：BFC是一个独立的区域，它内部的元素的布局规则不会影响到外部的元素布局，也不会被外部的元素影响。
  2. 浮动元素：BFC能够处理浮动元素，使其不脱离文档流。浮动元素如果在BFC内，它会像其他元素一样参与布局，不会被外部元素所干扰。
  3. 外边距合并：在同一个BFC内，两个相邻的块级元素会发生外边距合并。只有在不同BFC之间，外边距才会分开。
  4. 清除浮动：BFC能有效地清除浮动。通过创建BFC，我们可以让浮动元素的父元素自适应高度，防止浮动元素脱离文档流造成的父元素高度塌陷问题。

如何创建BFC

BFC可以通过以下几种方式创建：

  • 浮动元素：任何带有 float 属性的元素，都会创建BFC。
  • 绝对定位元素：position: absolute 或 position: fixed 会创建BFC。
  • overflow 属性：如果元素的 overflow 属性设置为 hidden、auto 或 scroll，它也会创建BFC。
  • 块级元素：display: block 本身也会创建BFC。
  • 表格布局元素：display: table、display: inline-table 等也会创建BFC。

BFC的实际应用

  1. 清除浮动：当一个父元素包含浮动子元素时，我们可以通过给父元素设置 overflow: hidden 来创建BFC，清除浮动，防止父元素高度塌陷。

    css复制代码.parent {
  overflow: hidden; /* 创建BFC */
}

  2. 避免外边距合并：为了防止相邻元素的外边距合并，我们可以通过给其中一个元素设置 overflow: hidden 或 float 来创建BFC。

    css复制代码.child {
  overflow: hidden; /* 创建BFC，避免外边距合并 */
}

  3. 控制浮动元素影响：通过BFC的特性，浮动元素的布局可以被其他元素独立控制，从而避免浮动元素与其他布局产生冲突。

7.CSS函数有哪些？

以下是CSS函数的分类及其详细信息，整理成表格：

分类函数名作用示例
颜色相关rgb() / rgba()用红、绿、蓝通道定义颜色，rgba()支持透明度。color: rgb(255, 0, 0);``background-color: rgba(255, 0, 0, 0.5);
hsl() / hsla()通过色调、饱和度和亮度来定义颜色，hsla()支持透明度。color: hsl(120, 100%, 50%);``background-color: hsla(120, 100%, 50%, 0.3);
尺寸与布局calc()进行动态计算，支持加、减、乘、除等运算。width: calc(100% - 20px);
min()返回给定值中的最小值。width: min(50%, 300px);
max()返回给定值中的最大值。height: max(100px, 10vh);
clamp()根据给定的最小值、最大值和计算值动态计算。font-size: clamp(16px, 5vw, 24px);
位置与变换rotate()旋转元素的角度。transform: rotate(45deg);
translate()平移元素，支持横向和纵向的移动。transform: translate(50px, 100px);
scale()缩放元素，支持横向和纵向的缩放。transform: scale(1.5);
skew()扭曲元素，支持横向和纵向的扭曲。transform: skew(30deg, 20deg);
字体与文本attr()获取元素的属性值，用于 content 属性。content: attr(href);
视觉效果box-shadow()为元素添加阴影效果。box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
text-shadow()为文本添加阴影效果。text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
动画与过渡transition()定义元素状态变化时的过渡效果。transition: all 0.3s ease-in-out;
animation()定义 CSS 动画。animation: fadeIn 2s ease-in-out infinite;
@keyframes定义动画的关键帧，控制动画在不同时间点的样式。@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
响应式设计@media根据不同的设备条件（如屏幕宽度）应用不同的样式。@media (max-width: 768px) { .container { display: flex; flex-direction: column; } }
变量与自定义var()引用 CSS 变量的值。color: var(--main-color);
图片与外部资源url()引用外部资源（如图片、字体文件等）。background-image: url('image.jpg');
其他@import引入外部 CSS 文件。@import url('style.css');
@supports检查浏览器是否支持某些 CSS 特性。@supports (display: grid) { .container { display: grid; } }
@font-face定义自定义字体。@font-face { font-family: 'MyFont'; src: url('myfont.woff'); }

8、PostCSS、Sass、Less的异同，以及使用配置。

PostCSS、Sass、Less的异同
功能PostCSSSassLess
语言特性PostCSS 本身是一个工具，不提供特定语法；通过插件实现功能。提供了强大的嵌套规则、变量、混合等功能。提供类似 Sass 的嵌套规则、变量、混合等功能。
变量定义依赖 postcss-simple-vars 插件实现变量。使用 $ 开头定义变量。使用 @ 开头定义变量。
计算能力通过插件（如 postcss-calc）实现动态计算。内置强大的运算功能，支持加减乘除等数学运算。支持基本的数学运算。
混合（Mixin）通过插件（如 postcss-mixins）实现。支持复杂的函数混合（@mixin 和 @include）。使用定义和调用方式类似函数（mixin 和 call）。
继承通过插件（如 postcss-extend）实现。支持样式继承（@extend）。支持通过 extend() 方法继承样式。
生态系统完全依赖插件扩展，功能非常灵活。内置功能完善，少依赖插件。功能有限，适合中小型项目。
兼容性需根据插件选择支持的浏览器版本。通常需要编译为 CSS 使用，兼容性强。同 Sass，需要编译为 CSS。
配置方式基于插件的灵活配置。使用 CLI 或编译工具，如 dart-sass。使用 CLI 或编译工具，如 lessc。
使用场景针对需要高度定制的项目或特定功能优化。大型项目，适合复杂的样式逻辑。中小型项目，适合快速开发。
性能依赖插件数量，复杂性较高可能影响编译速度。编译速度较快，尤其是 dart-sass。编译速度快，适合实时开发。
less和sass的详细功能对比
特性SassLess
嵌套规则支持 @at-root 提高灵活性支持基础嵌套
变量管理支持局部变量、全局变量变量全局污染
逻辑与循环强大的条件和循环支持支持，但功能有限
继承与占位符选择器支持占位符选择器，继承灵活通过 extend()，功能有限
模块化支持 @use 和命名空间仅支持简单的 @import
生态系统活跃且支持强大较少更新，依赖其他工具

9.CSS模块化方案有哪些，谈谈你对CSS模块化的理解？

CSS模块化方案

要实现一套完整的 CSS 模块化方案，可以从以下三个方面入手：命名规则、CSS Modules、CSS-in-JS。

1、命名规则

命名规则是最基础的 CSS 模块化方案，主要通过规范化的命名方式解决样式冲突问题。以下是常见的命名方案：

命名方案特点示例
BEMBlock-Element-Modifier，按照模块、元素和状态命名，结构清晰，层次分明。button__icon--active
OOCSS对象化 CSS，将样式划分为结构与皮肤两个部分，适合共享性高的项目。.card, .card--shadow
SMACSS分类 CSS 文件为 Base、Layout、Module、State 和 Theme 减少冲突。.nav, .nav--expanded
ITCSS从低到高分层（Settings全局配置 > Tools函数 > Generic全局样式 > Elements基础样式 > Components独立模块样式 > Utilities工具类样式）。u-hidden, c-button

优缺点

  • 优点：简单直观，无需额外工具支持。
  • 缺点：依赖人工遵守，复杂项目中可能仍会出现命名冲突。

2. CSS Modules

CSS Modules 是一种基于工具的样式隔离方案，避免全局样式冲突。以下是常见的实现方式：

工具/技术特点示例
CSS Modules默认作用域隔离，每个样式文件仅作用于当前组件，编译时自动生成唯一类名。styles.button
Scoped CSS (Vue)Vue 的单文件组件样式隔离方式，使用 scoped 属性实现组件级别样式。<style scoped>
Shadow DOM原生浏览器支持，通过 Shadow DOM 实现样式隔离。attachShadow()

优缺点

  • 优点：样式隔离，避免命名冲突，适合组件化开发。
  • 缺点：依赖构建工具，操作全局样式较复杂。

3、CSS-in-JS

是将样式与逻辑绑定，通过 JavaScript 管理样式的方案，以下是常见工具：

工具/库特点示例
Styled-Components使用模板字符串定义样式，支持动态样式和主题切换，适合 React 项目。styled.buttoncolor: red;``
Emotion性能优化更好，支持标签模板和对象样式写法，动态样式更灵活。csscolor: blue;``
Vue Scoped CSS + JS在 Vue 中通过内联样式动态绑定 CSS。:style="{ color: textColor }"
JSS类似 Emotion 的库，支持动态样式生成，但社区活跃度稍低。jss.createStyleSheet()

优缺点

  • 优点：支持动态样式、逻辑与样式高度绑定，适合复杂交互组件。
  • 缺点：运行时性能开销高，不适合简单项目。
理解

CSS 模块化是一种组织和管理 CSS 样式的开发方法，旨在解决传统 CSS 开发中常见的样式冲突、难以维护、低复用性等问题。模块化通过将样式拆分为独立、可复用的模块，使代码更清晰、更高效、更易于扩展。

核心问题

  1. 样式冲突：传统 CSS 是全局作用域，多个开发者协作时容易出现样式覆盖或冲突。
  2. 难以维护：样式文件规模扩大后，定位问题或理解依赖关系变得困难。
  3. 低复用性：没有复用机制，导致代码冗余。

CSS 模块化的核心目标

  1. 隔离作用域：避免不同模块之间的样式冲突。
  2. 高复用性：将常用样式抽象为组件，便于重复使用。
  3. 增强可维护性：清晰的结构和命名规则，使代码更易阅读和修改。

10、什么是CSS阻塞渲染？如何防止CSS阻塞渲染。

定义：

CSS 阻塞渲染是指当浏览器解析 HTML 文档时，遇到外部样式表 (<link> 标签) 会暂停渲染页面内容，直到 CSS 文件完全加载并解析完成。这种行为是浏览器为了确保页面渲染的视觉稳定性。

CSS 阻塞渲染的原因

  1. CSS 是构建渲染树的必要条件：

    • 渲染树需要 DOM 和 CSSOM。没有完整的 CSSOM，浏览器无法确定页面样式，因此会暂停渲染。

  2. 保护用户体验：

    • 如果渲染在样式加载完成之前进行，可能会导致 "FOUC"（Flash of Unstyled Content），即页面先以无样式的状态显示，再突然变成有样式的状态。这会显得突兀。

  3. 外部 CSS 文件依赖网络：

    • 外部样式表需要网络请求加载。如果网络延迟或文件体积过大，会导致加载时间延长。

  4. CSS 的层级依赖：

    • 如果 CSS 文件中有 @import 或多个文件互相依赖，浏览器需要按顺序加载并解析，进一步延长阻塞时间。

CSS 阻塞渲染的表现

当浏览器解析 HTML 文档时，遇到以下情况会发生 CSS 阻塞渲染：

  • 使用 <link rel="stylesheet"> 加载外部样式表。
  • CSS 文件中包含嵌套的 @import 指令。

CSS 阻塞渲染的影响

  1. 页面渲染时间增加，影响首屏加载速度。
  2. 用户可能会长时间看到空白页面或不完整内容。

优化 CSS 阻塞渲染的策略

  • 关键 CSS 优化： 将页面首屏需要的样式写为内联 CSS。

  • 延迟加载非关键样式： 使用动态加载或将非关键样式表标记为异步加载。

    <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all';">

  • 减少样式表数量： 合并和压缩 CSS 文件，减少网络请求。

  • 使用 preload 加载样式表： 提前声明关键样式，减少加载时间。

    <link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet';">

通过这些优化，可以有效减少 CSS 阻塞渲染对页面加载性能的影响。

11、CSS3中过渡与动画的差异。

特性过渡（Transitions）动画（Animations）
触发方式依赖状态变化（如 hover、focus 等）独立执行，不依赖状态
复杂程度简单的状态变化支持多关键帧，适合复杂动画
控制能力无法单独控制动画的播放可控制方向、次数、延迟等
循环支持不支持循环支持循环（iteration-count）
适用场景简单的交互效果（如按钮变色、缩放）复杂的动画（如旋转、位移、多段动画）

12、说一下你了解的响应式布局有哪些，他们有什么异同。

实现方式概念优点缺点性能自适应能力
流式布局使用百分比宽度，使布局随父容器大小自动调整。简单易用，快速实现响应式布局，浏览器兼容性好。适用性有限，复杂布局难以实现；缺乏精准控制。性能优，CSS 规则简单，浏览器解析负担小。依赖容器大小，能适应基础场景，但不适用于需要精准控制的复杂布局。
媒体查询使用 @media 定义不同屏幕尺寸条件下的 CSS 规则，从而调整布局和样式。灵活且强大，可精准优化不同设备上的显示效果。需要手动维护多个规则，复杂页面容易导致样式冲突；增加代码复杂度。性能较好，但过多条件可能增加样式解析时间。适配性强，能针对不同分辨率和设备灵活调整布局。
弹性盒子（Flexbox）一维布局模型，基于主轴和交叉轴动态分配元素位置和大小。代码简洁，布局灵活，子元素可自动适应父容器大小；现代浏览器优化完善，兼容性好。不支持二维布局，仅适用于单行或单列的场景。性能较优，布局算法高效，浏览器优化程度高。适用于一维布局，自适应性强，但二维布局需结合其他方式。
栅格系统将页面划分为固定数量的列，通过列宽控制布局。提供标准化布局结构，适用于大多数场景；易于团队协作和维护。依赖框架（如 Bootstrap），引入冗余代码；列数固定，灵活性不如 CSS Grid。性能中等，引入框架增加加载时间，部分冗余功能可能浪费资源。适合多列布局场景，但列数固定限制了灵活性，需结合媒体查询优化适应性。
CSS Grid二维网格布局，可同时控制行和列，适用于复杂布局场景。强大且灵活，适合复杂布局；支持精确控制布局区域和嵌套布局。学习曲线较高；低版本浏览器兼容性较差。性能较优，直接使用浏览器内置功能，无需额外框架。适配性强，支持复杂场景的自适应；能更精确地控制布局结构。

13、说一下你对flex布局的理解。

Flex 布局，即弹性盒子布局，是一种为了解决传统布局方式（如浮动、定位）在页面对齐和分配空间上的局限性而提出的布局模型。它特别适用于一维布局（横向或纵向）中的灵活排列和对齐。

1. 概念与核心原理

Flex 布局通过定义一个容器（flex container），让其子元素（flex items）按照主轴（main axis）和交叉轴（cross axis）来排列和分布。子元素的大小、对齐方式和位置会根据可用空间动态调整。

2. 主要特性

  • 一维布局：支持主轴和交叉轴上的灵活布局。
  • 子元素可调整大小：子元素可以按比例分配剩余空间，也可以根据内容大小自动调整。
  • 对齐方便：支持主轴和交叉轴上的各种对齐方式，简化了垂直和水平居中的实现。

3. 核心属性

  1. 父容器的属性（flex container）：

    • display: flex：定义为弹性容器。
    • flex-direction：主轴方向（如 row, column）。
    • justify-content：主轴对齐方式（如 flex-start, center, space-between）。
    • align-items：交叉轴对齐方式（如 stretch, center）。
    • flex-wrap：子元素是否换行（如 nowrap, wrap）。

  2. 子元素的属性（flex items）：

    • flex：定义子元素的增长、缩小、初始大小的比例（如 flex: 1 1 auto）。
    • align-self：单独设置某个子元素的交叉轴对齐方式。
    • order：改变子元素在布局中的排列顺序。

4. 优缺点

优点缺点
- 简单易用，代码简洁，能快速实现复杂的对齐和分布需求。- 不支持二维布局（行和列同时布局），复杂布局场景需要结合其他方案。
- 对不同屏幕尺寸具有良好的适应性，可动态调整子元素大小和位置。- 对旧版浏览器（如 IE10 以下）支持不佳。
- 减少对浮动（float）和绝对定位的依赖，提高布局的灵活性和可维护性。- 使用错误的 flex 值可能导致子元素意外变形或溢出容器。

5. 实际应用场景

  1. 导航栏：子元素按比例分配宽度，或居中对齐。
  2. 垂直和水平居中：父容器设置 display: flex; justify-content: center; align-items: center;。
  3. 网格布局：结合 flex-wrap 创建多行布局。
  4. 弹性卡片布局：子元素根据内容动态调整大小。
avatar
文章
阅读
粉丝