CSS盒模型，在不同浏览器的差异

查看答案

css 标准盒子模型

css盒子模型 又称为框模型（Box Model），包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin） 几个要素。如下图：

在标准盒子模型中，元素的宽度（width）和高度（height）只包含内容区域（content）的大小，不包含内边距（padding）、边框（border）和外边距（margin）。元素实际占用的宽度和高度需要加上内边距、边框和外边距。计算公式如下：

实际大小 = content + border + padding + margin

IE盒子模型

IE盒子模型 又称为IE盒模型（IE Box Model），包含了元素内容（content）、边框（border）、内边距（padding）、外边距（margin） 几个要素。如下图：

在IE盒子模型中，元素的宽度（width）和高度（height）包含了内容区域（content）、内边距（padding）和边框（border）的大小，但不包含外边距（margin）。元素实际占用的宽度和高度需要加上外边距。计算公式如下：

实际大小 = width + margin

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

详情

css选择器种类有哪些?

• 1. 元素选择器：选择指定元素的样式，例如：h1、p、div 等。
• 2. 类选择器：选择指定类名的元素的样式，例如：.classname。
• 3. ID选择器：选择指定ID的元素的样式，例如：#idname。
• 4. 属性选择器：选择指定属性的元素的样式，例如：[href]、[type="text"] 等。
• 5. 伪类选择器：选择指定状态的元素的样式，例如：:hover、:active 等。
• 6. 伪元素选择器：选择指定元素的特定部分的样式，例如：::before、::after 等。
• 7. 组合选择器：将多个选择器组合在一起，例如：div p、.classname#idname 等，可以根据关系分为 后代选择器(空格)、子选择器(<)、相邻兄弟选择器(+)、通用兄弟选择器(~)。
• 8. 通配符选择器：选择所有元素的样式，例如：*。
• 9. 多类选择器: 选择同时具有多个类名的元素。

.class1.class2 {
    background-color: lightgray;
}

10. 否定选择器: 选择不满足指定条件的元素。

/* 选择所有不是p元素的元素 */
:not(p) {
    margin: 0;
}

CSS选择器优先级

选择器优先级由高到低分别为：

!important > 内联样式 > ID选择器 > 类选择器 > 伪类选择器 > 属性选择器 > 元素选择器 > 伪元素选择器 > 通配符选择器（* 应少用）> 浏览器自定义；

当比较多个相同级别的CSS选择器优先级时，它们定义的位置将决定一切。下面从位置上将CSS优先级由高到低分为六级：

1、位于标签里的中所定义的CSS拥有最高级的优先权。

2、第二级的优先属性由位于 标签中的 @import 引入样式表所定义。

3、第三级的优先属性由标签所引入的样式表定义。

4、第四级的优先属性由标签所引入的样式表内的 @import 导入样式表定义。

5、第五级优先的样式有用户设定。

6、最低级的优先权由浏览器默认。

CSS哪些属性可以继承？

在CSS里，部分属性会自动从父元素传递给子元素，这就是属性的继承。下面是一些常见的可继承属性：

• 1. 字体属性：font-family、font-size、font-weight、font-style、font-variant、font-size-adjust、font-stretch、font-effect、font-emphasize、font-emphasize-position、font-emphasize-style、font-smooth。
• 2. 文本属性：text-indent、text-align、text-transform、letter-spacing、word-spacing、line-height、color、text-shadow、text-wrap。
• 3. 列表相关属性：list-style-type、list-style-image、list-style-position。
• 4. 表格相关属性：border-collapse、border-spacing、empty-cells、caption-side。
• 6. 元素可见性：visibility。
• 7. 光标属性：cursor。

需要注意的是，盒模型相关属性（像width、height、margin、padding、border）通常不会继承。若想强制某个属性继承，可以使用 inherit 关键字。

常用at规则及使用示例：

在CSS中，@ 规则（At-rules）是一种特殊的规则，用于实现一些特殊的功能，如导入外部样式表、定义媒体查询、创建动画等。以下是一些常用的 @ 规则 及其使用示例：

• 1. @import：用于导入其他样式表。

@import url("style.css");

• 2. @media：用于根据不同的媒体类型应用不同的样式。

@media screen and (min-width: 600px) {
    body {
        background-color: lightblue;
    }
}

• 3. @font-face：用于定义自定义字体。

@font-face {
    font-family: "MyFont";
    src: url("myfont.woff2") format("woff2"),
         url("myfont.woff") format("woff");
}

• 4. @keyframes：用于定义动画。

@keyframes myAnimation {
    0% {
        background-color: red;
    }
    100% {
        background-color: blue;
    }
}

• 5. @supports：用于检测浏览器是否支持某个特性。

@supports (display: grid) {
    .container {
        display: grid;
    }
}

• 6. @charset: 用于指定样式表的字符编码。

@charset "UTF-8";

• 7. @page: 用于设置打印时的页面样式。

@page {
    margin: 1cm;
}

• 8. namespace: 用于定义命名空间。

@namespace url(URL_ADDRESS@namespace url(http://www.w3.org/1999/xhtml);

• 10. document: 用于定义文档级样式。

@document url(URL_ADDRESS) {
    body {
        background-color: yellow;
    }
}

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

查看答案

常见伪类

• 链接伪类：:link（未访问的链接）、:visited（已访问的链接）。
• 用户行为伪类：:hover（鼠标悬停）、:active（元素被激活，如点击时）、:focus（元素获得焦点）。
• 结构伪类：:first-child（父元素的第一个子元素）、:last-child（父元素的最后一个子元素）、:nth-child(n)（父元素的第n个子元素）、:nth-last-child(n)（父元素的倒数第n个子元素）、:only-child（父元素唯一的子元素）。
• 目标伪类：:target（当前活动的目标元素）。
• 表单相关伪类：:enabled（可用的表单元素）、:disabled（禁用的表单元素）、:checked（选中的单选框或复选框）、:required（有 required 属性的表单元素）、:optional（没有 required 属性的表单元素）。

常见伪元素

• ::before：在元素内容之前插入内容。
• ::after：在元素内容之后插入内容。
• ::first-letter：选择元素的第一个字母。
• ::first-line：选择元素的第一行。
• ::selection：选择用户选中的文本。

区别

本质不同：

• 伪类用于选择处于特定状态的元素，比如元素的链接状态、用户交互状态、在文档树中的位置等。
• 伪元素用于创建文档树中不存在的虚拟元素，像在元素前后插入内容、选择元素的特定部分。

语法不同：

• 伪类使用单冒号 :，例如 :hover。
• 伪元素在CSS3中使用双冒号 ::，例如 ::before，不过为了兼容旧浏览器，单冒号写法也被支持。

优先级不同：

• 伪类的优先级和类选择器相同。
• 伪元素的优先级和元素选择器相同。

Position 的值有哪些，分别有哪些作用？

查看答案

position 属性有哪些值？

• 1. static：默认值，元素按照正常文档流布局。
• 2. relative：相对定位，相对于元素在文档流中的原始位置进行定位。
• 3. absolute：绝对定位，相对于最近的已定位祖先元素进行定位，如果没有已定位祖先元素，则相对于 <html> 元素。
• 4. fixed：固定定位，相对于浏览器窗口进行定位。
• 5. sticky：粘性定位，在滚动过程中根据设定的偏移量进行定位。

它们的作用分别是什么？

• 1. static：元素按照正常文档流布局。
• 2. relative：相对于元素在文档流中的原始位置进行定位，不会影响其他元素的布局。
• 3. absolute：相对于最近的已定位祖先元素进行定位，如果没有已定位祖先元素，则相对于 <html> 元素。
• 4. fixed：相对于浏览器窗口进行定位，不会随着滚动条滚动而移动。
• 5. sticky：在滚动过程中根据设定的偏移量进行定位，当元素到达设定的偏移量时，会固定在该位置。

雪碧图实现原理

雪碧图（Sprite）是一种将多个小图片合并成一张大图的技术，通过CSS的背景图片和定位来实现图片的显示。 实现原理如下：

1. 将多个小图片合并成一张大图，每个小图片的位置和大小都已经确定。
2. 在HTML中使用一个 <div> 元素作为容器，设置其背景图片为合并后的大图。
3. 通过CSS的 background-position 属性来定位每个小图片在大图中的位置。
4. 当需要显示某个小图片时，只需要将 <div> 元素的 background-position 属性设置为对应的位置即可。
5. 可以通过CSS的 background-size 属性来设置小图片的大小，以适应不同的显示需求。

水平垂直居中的方案, 优缺点？

查看答案

1. Flexbox（弹性盒模型）

实现方式：

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
}

• 优点：

• 简单直观，代码量少
• 不依赖子元素尺寸，适用于固定 / 动态尺寸元素
• 支持多个子元素同时居中
• 兼容性良好（IE10+）

• 缺点：

• 会改变子元素的默认布局（如子元素变为弹性项）
• 父元素高度需要显式设置或由内容撑开

2. Grid（网格布局）

实现方式：

.parent {
  display: grid;
  place-items: center; /* 同时设置水平和垂直居中 */
}

• 优点：

• 代码极简，一行实现居中
• 不依赖子元素尺寸，支持各种场景
• 可单独控制水平 / 垂直方向的对齐方式

• 缺点：

• 兼容性稍差（IE11 部分支持，需要前缀）
• 父元素高度需要显式设置

3. 绝对定位 + transform

实现方式：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

• 优点：

• 简单直观，代码量少
• 不影响父元素布局
• 适用于未知尺寸的子元素
• 兼容性较好（IE9+）

• 缺点：

• 子元素会脱离文档流，可能影响其他元素布局
• transform 可能触发 GPU 加速，在某些场景下有性能损耗

4. 绝对定位 + margin auto

实现方式：

.parent {
  position: relative;
  height: 300px; /* 必须指定高度 */
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 200px;  /* 必须指定宽度 */
  height: 100px; /* 必须指定高度 */
}

• 优点：

• 实现简单，兼容性好（IE8+）

• 缺点：

• 子元素必须指定固定宽高
• 父元素必须指定高度
• 子元素脱离文档流

5. Table-Cell 布局

实现方式：

.parent {
  display: table-cell;
  text-align: center; /* 水平居中 */
  vertical-align: middle; /* 垂直居中 */
  width: 300px;
  height: 300px;
}
.child {
  display: inline-block; /* 让块级元素水平居中生效 */
}

• 优点：

• 兼容性极佳（IE8+）
• 子元素尺寸可变

• 缺点：

• 父元素需要设置固定宽高
• 语义化稍差（将非表格元素用表格布局）

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

实现方式：

.parent {
  text-align: center; /* 水平居中 */
  line-height: 300px; /* 垂直居中（值等于父元素高度） */
  height: 300px;
}

• 优点： 适用于单行文本或行内元素 实现简单

• 缺点： 只适用于行内元素 多行文本会出现问题 垂直居中依赖固定行高

方案选择建议：

• 现代 Web 开发：优先使用 Flexbox 或 Grid，简洁且灵活
• 未知子元素尺寸：推荐 Flexbox 或 transform 方案
• 需要兼容旧浏览器：使用 absolute + margin auto 或 table-cell
• 行内元素 / 文本：直接使用 text-align + line-height

BFC 是什么？ 应用场景？

查看答案

BFC（Block Formatting Context，块级格式化上下文）是 CSS 中一种重要的渲染机制，用于规范块级元素的布局和相互作用。它可以理解为一个独立的渲染区域，内部元素的布局不会影响外部元素，反之亦然。

BFC布局规则：

1. 内部的Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算

哪些元素会生成 BFC：

1. 根元素
2. float 的值不为 none
3. overflow 的值不为 visible
4. display 的值为 inline-block、table-cell、table-caption
5. position的值为 absolute 或 fixed

BFC的作用及原理：

1. 自适应两栏布局
2. 清除内部浮动
3. 防止垂直 margin 重叠

CSS函数有哪些？

查看答案

CSS函数有哪些？

根据w3cplus中可以划分为以下几类：

• 属性函数：attr();
• 背景图片函数：linear-gradient()、radial-gradient()、conic-gradient()、repeating-linear-gradient()、repeating-radial-gradient()、repeating-conic-gradient()、image-set()、image()、url()、element();
• 颜色函数：rgb()、rgba()、hsl()、hsla()、hwb()、color-mod();
• 图形函数：circle()、ellipse()、inset()、polygon()、path();
• 滤镜函数：blur()、brightness()、contrast()、drop-shadow()、grayscale()、hue-rotate()、invert()、opacity()、saturate()、sepia()；
• 转换函数：matrix()、matrix3d()、perspective()、rotate()、scale()、scale3d()、scaleX()、scaleY()、scaleZ()、skew()、translate()；
• 数学函数：calc()、min()、max()、mixmax()、repeat()；
• 缓动函数：cubic-bezier()、steps()；
• 其他函数：counter()、counters()、toggle()、var()、 symbols()。

PostCSS、Sass、Less的异同，以及使用配置，至少掌握一种

查看答案

编译环境不一样，Sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到项目中；

• 变量符号不一样，Less是@，而Scss是$；
• 输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded；
• 处理条件语句，Sass支持条件语句，可以使用if{}else{},for{}循环等等。 LESS的条件语句使用有些另类，他不是我们常见的关键词if和else if之类，而其实现方式是利用关键词“when”；
• 引用外部文件，文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件，ess引用外部文件和css中的@import没什么差异；
• 工具库的不同，Sass有工具库Compass, 简单说，Sass和Compass的关系有点像Javascript和jQuery的关系,Compass在Sass的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用Less语法编写。

PostCSS介绍：

PostCSS 的主要功能只有两个：第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的 AST，第二个就是调用插件来处理 AST 并得到结果。因此，不能简单的把 PostCSS 归类成 CSS 预处理或后处理工具。PostCSS 所能执行的任务非常多，同时涵盖了传统意义上的预处理和后处理。

PostCSS使用

PostCSS 一般不单独使用，而是与已有的构建工具进行集成。PostCSS 与主流的构建工具，如 Webpack、Grunt 和 Gulp 都可以进行集成。完成集成之后，选择满足功能需求的 PostCSS 插件并进行配置。现在经常用到的是基于PostCSS的Autoprefixer插件，使用方式可以在官网的插件库进行查询。下面是官网地址：

CSS模块化方案有哪些？

查看答案

CSS Modules

原理：CSS Modules会将CSS类名编译成全局唯一的类名，从而避免样式冲突。在构建过程中，每个CSS文件都会生成一个映射对象，将原始类名映射到编译后的唯一类名。

Sass/Scss + BEM命名规范

原理：Sass/Scss是CSS预处理器，支持嵌套、变量、混合器等功能。BEM（Block Element Modifier）是一种命名规范，通过块（Block）、元素（Element）和修饰符（Modifier）的组合来命名类名，使类名具有明确的语义，减少样式冲突的可能性。

CSS in JS

原理：CSS in JS是将CSS代码直接嵌入到JavaScript文件中，通过JS动态生成CSS代码。在构建过程中，CSS代码会被编译成JavaScript对象，然后通过JS动态插入到DOM中。 css库： styled-components、emotion

CSS如何配置按需加载？

查看答案

• 使用require.js按需加载 CSS
• webpack配置 CSS 的按需加载

如何防止CSS阻塞渲染？

查看答案

CSS 阻塞渲染指的是浏览器在解析 HTML 构建 DOM 树时，遇到外部 CSS 文件会暂停解析，先去下载并解析 CSS 文件，构建 CSSOM 树，然后将 DOM 树和 CSSOM 树合并成渲染树后再进行渲染。以下是一些防止 CSS 阻塞渲染的方法：

1. 内联关键 CSS

将首屏渲染所需的关键 CSS 直接内联到 HTML 文件的 <style> 标签中。这样浏览器无需等待外部 CSS 文件下载，可直接使用内联的 CSS 进行渲染。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>防止 CSS 阻塞渲染</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      color: #333;
    }
    h1 {
      color: #007bff;
    }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

2. 使用媒体查询异步加载非关键 CSS

对于非首屏渲染所需的 CSS 文件，可以使用媒体查询和 media 属性，让浏览器在满足特定条件时才加载这些 CSS 文件，从而实现异步加载。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>防止 CSS 阻塞渲染</title>
  <!-- 首屏关键 CSS 内联 -->
  <style>
    body {
      font-family: Arial, sans-serif;
      color: #333;
    }
    h1 {
      color: #007bff;
    }
  </style>
  <!-- 非关键 CSS 异步加载 -->
  <link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

3. 预加载 CSS

使用 <link rel="preload"> 标签预加载 CSS 文件，让浏览器提前开始下载 CSS 文件，但不会阻塞渲染。当需要使用该 CSS 文件时，浏览器可以直接使用已下载好的文件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>防止 CSS 阻塞渲染</title>
  <!-- 预加载 CSS -->
  <link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

4. 优化 CSS 文件大小

通过压缩 CSS 文件、去除不必要的代码和注释等方式，减小 CSS 文件的大小，从而缩短 CSS 文件的下载时间，减少对渲染的阻塞。可以使用工具如 UglifyCSS、cssnano 等进行 CSS 文件的压缩。

5. 分割 CSS 文件

将 CSS 文件按照功能或页面模块进行分割，只在需要的页面加载相应的 CSS 文件，避免一次性加载大量不必要的 CSS 代码。

CSS3 的新特性有哪些？

查看答案

• 1、颜色: 新增 RGBA , HSLA 模式
• 2、文字阴影(text-shadow)
• 3、边框: 圆角(border-radius) 边框阴影 : box-shadow
• 4、盒子模型: box-sizing
• 5、背景: background-size background-origin background-clip
• 6、渐变: linear-gradient, radial-gradient
• 7、过渡 : transition 可实现动画
• 8、自定义动画 animate @keyfrom
• 9、媒体查询 多栏布局 @media screen and (width:800px) {…}
• 10、border-image
• 11、2D 转换; transform: translate(x,y) rotate(x,y) skew(x,y) scale(x,y)
• 12、3D 转换
• 13、字体图标 font-face
• 14、弹性布局 flex

简述 transform，transition，animation 的作用？

查看答案

1、transform：描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行 旋转

• rotate、扭曲 skew、缩放 scale 和移动 translate 以及矩阵变形 matrix。
• transition 和 animation 两者都能实现动画效果
• transform 常常配合 transition 和 animation 使用

2、transition 样式过渡，从一种效果逐渐改变为另一种效果

• transition 是一个合写属性
• Transition:transition-property transition-duration transition-timing-function
• transition-delay
• 从左到右分别是：css 属性、过渡效果花费时间、速度曲线、过渡开始的延迟时间
• transition 通常和 hover 等事件配合使用，需要由事件来触发过渡

3、animation 动画 由@keyframes 来描述每一帧的样式

区别：

• transform 仅描述元素的静态样式，常常配合 transition 和 animation 使用
• transition 通常和 hover 等事件配合使用，animation 是自发的，立即播放
• animation 可设置循环次数
• animation 可设置每一帧的样式和时间，transition 只能设置头尾
• transition 可与 js 配合使用，js 设定要变化的样式，transition 负责动画效果。

CSS浏览器兼容性写法

查看答案

1. 浏览器CSS样式初始化

2. 浏览器前缀

不同浏览器对一些新的 CSS 属性支持情况不同，需要添加浏览器前缀来确保兼容性。常见的浏览器前缀有：

-webkit-：用于 Safari、Chrome 等基于 WebKit 内核的浏览器。 -moz-：用于 Firefox 浏览器。 -ms-：用于 Internet Explorer 浏览器。 -o-：用于 Opera 浏览器。

3. 针对特定浏览器的CSS Hack

在某些情况下，需要针对特定浏览器编写不同的 CSS 代码。可以使用一些 CSS Hack 来实现。

/* 针对 Internet Explorer 6 的 Hack */
* html .element {
  color: red;
}

/* 针对 Internet Explorer 7 的 Hack */
*:first-child + html .element {
  color: blue;
}

/* 针对 Internet Explorer 8 的 Hack */
.ie8 .element {
  color: green;
}

4. 使用 Modernizr 检测浏览器特性

Modernizr 是一个 JavaScript 库，可以检测浏览器是否支持某些 CSS 特性。根据检测结果，可以为不支持的浏览器提供替代方案。

5. 自动化插件--使用 Autoprefixer

Autoprefixer 是一个 PostCSS 插件，可以自动为 CSS 添加浏览器前缀。在构建项目时，可以使用 Autoprefixer 来处理 CSS 文件，减少手动添加前缀的工作量。

如何实现双飞翼（圣杯）布局？

查看答案

双飞翼布局是一种常见的网页布局方式，它可以实现三栏布局，其中中间一栏的宽度自适应，两边一栏的宽度固定。双飞翼布局的实现方式有多种，其中一种是使用浮动和负边距。 具体实现步骤如下：

1. 首先，将整个布局分为三个部分：中间栏、左栏和右栏。
2. 中间栏的宽度自适应，使用 float: left 使其浮动在左侧。
3. 左栏和右栏的宽度固定，使用 float: left 使其浮动在中间栏的左侧。
4. 为中间栏和左栏设置 margin-left 和 margin-right，使其与左右栏的宽度相等。
5. 为中间栏设置 padding-left 和 padding-right，使其与左右栏的宽度相等。
6. 为左右栏设置 margin-left 和 margin-right，使其与中间栏的宽度相等。
7. 为左右栏设置 width，使其与中间栏的宽度相等。
8. 为左右栏设置 float: left，使其浮动在中间栏的左侧。
9. 为左右栏设置 position: relative，使其相对于中间栏进行定位。
10. 为左右栏设置 left 和 right，使其与中间栏的宽度相等。
11. 为左右栏设置 background-color，使其与中间栏的背景颜色不同。

CSS 单位中 px、em 和 rem 的区别？

查看答案

• px：像素，是一种绝对单位，在不同的设备上显示效果不同。
• em：相对于父元素的字体大小，当父元素的字体大小改变时，子元素的字体大小也会改变。
• rem：相对于根元素的字体大小，当根元素的字体大小改变时，子元素的字体大小也会改变。

rem 适配方法如何计算 HTML 跟字号及适配方案？

查看答案

通用方案

• 1、设置根 font-size：625%（或其它自定的值，但换算规则 1rem 不能小于 12px）
• 2、通过媒体查询分别设置每个屏幕的根 font-size
• 3、CSS 直接除以 2 再除以 100 即可换算为 rem

优：有一定适用性，换算也较为简单 劣：有兼容性的坑，对不同手机适配不是非常精准；需要设置多个媒体查询来适应不同手机，单某款手机尺寸不在设置范围之内，会导致无法适配

网易方案

• 1、拿到设计稿除以 100，得到宽度 rem 值
• 2、通过给 html 的 style 设置 font-size，把 1 里面得到的宽度 rem 值代入 x document.documentElement.style.fontSize = document.documentElement.clientWidth / x + ‘px‘;
• 3、设计稿 px/100 即可换算为 rem

优：通过动态根 font-size 来做适配，基本无兼容性问题，适配较为精准，换算简便 劣：无 viewport 缩放，且针对 iPhone 的 Retina 屏没有做适配，导致对一些手机的适配不是很到位

手淘方案

1、拿到设计稿除以 10，得到 font-size 基准值 2、引入 flexible 3、不要设置 meta 的 viewport 缩放值 4、设计稿 px/ font-size 基准值，即可换算为 rem 优：通过动态根 font-size、viewpor、dpr 来做适配，无兼容性问题，适配精准。 劣：需要根据设计稿进行基准值换算，在不使用 sublime text 编辑器插件开发时，单 位计算复杂

CSS 中 link 和 @import 的区别？

查看答案

适用范围不同

@import 可以在网页页面中使用，也可以在 CSS 文件中使用，用来将多个 CSS 文件引入到一个 CSS 文件中；而 link 只能将 CSS 文件引入到网页页面中

功能范围不同

link 属于 XHTML 标签，而 @import 是 CSS 提供的一种方式，link 标签 除了可以加载 CSS 外，还可以定义 RSS，定义 rel 连接属性等，@import 就只能加载 CSS

加载顺序不同

当一个页面被加载的时候，link 引用的 CSS 会同时被加载，而 @import引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS 的页 面时开始会没有样式（就是闪烁），网速慢的时候还挺明显

兼容性

由于 @import 是 css2.1 提出的，所以老的浏览器不支持，@import 只有在 IE5以上的才能识别，而 link 标签无此问题

控制样式时的差别

使用 link 方式可以让用户切换 CSS 样式.现代浏览器如 Firefox,Opera,Safari 都支持 rel=”alternate stylesheet”属性(即可在浏览器上选择不同的风格),当然你还可以使用 Javascript 使得 IE 也支持用户更换样式

权重区别

link 引入的样式权重大于 @import 引入的样式

display：none 与 visibility：hidden 的区别？

查看答案

最常用的为 display:none 和 visibility:hidden

• dispaly:none: 设置该属性后，该元素下的元素都会隐藏，占据的空间消失
• visibility:hidden: 设置该元素后，元素虽然不可见了，但是依然占据空间的位置

区别

• 1. visibility 具有继承性，其子元素也会继承此属性，若设置 visibility:visible，则子元素会显示
• 2. visibility 不会影响计数器的计算，虽然隐藏掉了，但是计数器依然继续运行着。
• 3. 在 CSS3 的 transition 中支持 visibility 属性，但是不支持 display，因为 transition 可以延迟执行，因此配合 visibility 使用纯 CSS 实现 hover 延时显示效果可以提高用户体验
• 4. display:none 会引起回流(重排)和重绘 visibility:hidden 会引起重绘

为什么会出现浮动？浮动元素会引起什么问题？如何清除浮动？

查看答案

为什么会出现浮动

浮动（float）属性最初是为了实现文字环绕图片的效果而引入的。在网页设计中，经常需要让文字围绕在图片或者其他元素的周围，浮动属性可以让元素脱离正常的文档流，向左或向右移动，直到它的外边缘碰到包含框或者另一个浮动元素的边框为止，从而实现文字环绕的布局。

浮动元素会引起什么问题

• 1. 父元素的高度无法被撑开，影响与父元素同级的元素；
• 2. 与浮动元素同级的非浮动元素（内联元素）会跟随其后；
• 3. 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构解

如何清除浮动

• 1. 使用 clear 属性：在浮动元素的后面添加一个空标签，然后设置该标签的 clear:both 属性，即可清除浮动。
• 2. 使用 BFC（块级格式化上下文）: 设置父元素的 overflow 属性为 hidden 或 auto 来创建 BFC，从而包含浮动元素。
• 3. 使用伪元素清除浮动: 父级添加 ::after 伪元素，并为伪元素设置 clear: both 属性清除浮动。

简述弹性盒子 flex 布局及 rem 布局？

查看答案

弹性盒子 flex 布局

弹性盒子（Flexbox）是 CSS3 中新增的一种布局方式，它可以让元素在容器中按照一定的规则进行排列和对齐。使用弹性盒子可以实现更灵活的布局效果，同时也可以避免使用浮动和定位等传统的布局方式。

弹性盒子的核心概念

• 容器（Flex Container）：设置了 display: flex 或 display: inline-flex 的元素，它是所有子元素（Flex Items）的父元素。
• 子元素（Flex Items）：容器内的直接子元素，它们会根据容器的属性进行布局。
• 主轴（Main Axis）：容器中元素排列的主要方向，可以是水平方向（默认）或垂直方向。
• 交叉轴（Cross Axis）：与主轴垂直的方向。

弹性盒子的常用属性

容器属性

• display：定义容器为弹性容器，值可以是 flex 或 inline-flex。
• flex-direction：定义主轴的方向，值可以是 row（默认，水平从左到右）、row-reverse（水平从右到左）、column（垂直从上到下）、column-reverse（垂直从下到上）。
• flex-wrap：定义子元素是否换行，值可以是 nowrap（默认，不换行）、wrap（换行）、wrap-reverse（换行且顺序反转）。
• justify-content：定义子元素在主轴上的对齐方式，值可以是 flex-start（默认，左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，子元素之间间距相等）、space-around（子元素两侧间距相等）。
• align-items：定义子元素在交叉轴上的对齐方式，值可以是 stretch（默认，拉伸填充容器）、flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、baseline（基线对齐）。
• align-content：定义多行子元素在交叉轴上的对齐方式，值与 justify-content 类似。

子元素属性

• flex-grow：定义子元素的放大比例，默认值为 0，表示不放大。
• flex-shrink：定义子元素的缩小比例，默认值为 1，表示可以缩小。
• flex-basis：定义子元素在主轴上的初始大小，默认值为 auto。
• flex：是 flex-grow、flex-shrink 和 flex-basis 的缩写，默认值为 0 1 auto。
• order：定义子元素的排列顺序，值为整数，默认值为 0，数值越小越靠前。
• align-self：定义单个子元素在交叉轴上的对齐方式，覆盖容器的 align-items 属性。

rem概念

rem（root em）是一种相对长度单位，它相对于根元素（<html>）的字体大小。使用 rem 布局可以实现页面元素的整体缩放，方便进行响应式设计。

rem 的原理

通过设置根元素的字体大小，然后使用 rem 作为元素的尺寸单位，当根元素的字体大小改变时，所有使用 rem 单位的元素尺寸也会相应改变。

优点

• 响应式布局：可以根据不同的屏幕尺寸动态调整根元素的字体大小，从而实现页面的整体缩放。
• 易于维护：只需要修改根元素的字体大小，就可以改变整个页面的布局。

适配方案步骤：

• 1、首先动态计算 html 的 font-size
• 2、将所有的 px 换算成 rem(计算过程请看下面代码和注释（注意：rem 的换算是根据设计图稿的像素计算的，下面的计算只是动态计算 html 的 font-size 大小），请看下面的注意事项

<meta name="viewport" content="width=device-width,user-scalable=no"/>
<style>
 body {
    margin: 0;
 }
 div {
     /*width: 80px;*/
     height: 100px;
     width: 4rem;
     height: 4rem;
     /*1rem=20; nrem=80; n=80/rem; n=80/20; n=4*/
     background: green;
     float: left;
 }
<style>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</body>
<script>
 (function(){
    var html=document.documentElement;
    var width=html.getBoundingClientRect().width; //获取屏幕宽度（设备独立像素）， 如iPhone6 为 414
    html.style.fontSize=width/16+'px'; //html font-size = 20px;
    //iphone5 下 1rem=20 这里之所以除以 16，是因为要把宽度分成 16 份，这个数并没有固定，一般选 15，16，以 ipone5 为准是 16，因为一除可以得到整数 20，好计算。 
 })();
</script>

注意：

• 1、必需动态的去设置 html 的大小，才能适配
• 2、根据页面的宽度除以一个系数，把算出的这个值赋给 html 的 font-size 属性，rem换算值是根据 psd 设计图的宽度 / 系数的 rem 系数
  • 2.1）为什么要除一个数字，原因是：一个页面里，不可能全都是整屏的元素，肯定有一行中放多个元素。所以就把一行分成 n 份
  • 2.2）不除一个数字的话，那 1 个 rem 就是屏幕的宽度，这个值太大，如果一个元素的宽度比它小的话，就不方便计算
  • 2.3）这个系数，自己定。多少都可以，但是建议给一个能整除的值（这个能整除的数， 是还要根据设计稿能整除的数。）

以 640px 设计稿和 750px 的视觉稿，网易这样处理：

var width = document.documentElement.clientWidth; // 屏幕的布局视口宽度
var rem = width / 7.5; // 750px 设计稿将布局视口分为 7.5 份
var rem = width / 6.4; // 640px 设计稿将布局视口分为 6.4 份

这样不管是 750px 设计稿还是 640px 设计稿，1rem 等于设计稿上的 100px。故 px 转换 rem 时：1rem = 1px * 0.01;

750px 设计稿上：

// 设计稿上 75px 对应 0.75rem, 距离占设计稿的 10%；
// 在 ipone6 上：
width = document.documentElement.clientWidth = 375px；
// 1rem = 375px / 7.5 = 50px;
// 0.75rem = 37.5px; (37.5/375=10%；占屏幕 10%)
// 在 ipone5 上：
width = document.documentElement.clientWidth = 320px；
// rem = 320px / 7.5 = 42.667px;
// 0.75rem = 32px; (32/320=10%；占屏幕 10%)

故对于设计稿上任何一个尺寸换成 rem 后，在任何屏下对应的尺寸占屏幕宽度的百分比相同。故这种布局可以百分比还原设计图

3、对于切的图片，尺寸是根据设计图的尺寸宽度的，显示起来会很大，如果是 Img 标签， 可以设置宽度为切出的图片尺寸，换算成 rem，如果是 background-img，用 background-size 属性，设置设计图尺寸宽高，换算成 rem 进行图片的缩放适配。

对于上述的第二点，根据设计稿动态转换 rem，这里说一下，前面的计算是动态的设置 html的 font-size 的大小，这是根据设备的独立像素计算的。而设计稿往往是根据物理像素，即设备像素设计的，往往很大，是 750px 及以上，所以在转换 rem 的时候，转换是根据 psd 设计稿的像素进行转换，即 1rem = 设计稿像素宽度/系数，例如，如果是 1080px 的设计稿，那么，就用 1rem = 1080/18 = 60px（这里用 18 做系数，是因为能整除），然后布局的时候就根据设计稿的元素尺寸转换，例如设计稿一个元素的高为 60px，那么就可以转化为 1rem 了

特点：

• 1、所有有单位的属性会根据屏幕的尺寸自动计算大小
• 2、同样一个元素，在不同的设备下的大小是不一样的。在尺寸小的设备下显示的小，在尺寸大的设备下显示的大
• 3、一般以 iphone6 为基准，以它的宽度 750 除上一个系数，再去算 rem
  • 3.1）打开 Hbuilder，顶部栏的工具》选项》Hbuilder》代码助手》px 自动转 rem 设置
  • 3.2）less 自动转换：Hbuilder 也可以将 less 文件自动转成 css 文件。less 文件的书写如下所示

// 比如想设置宽度为 187px，高度为 100px 的元素，可以通过下面方式计算适配
@rem：25rem； /*这是 1rem = X px 的 X 的值，但是用了 rem 做单位而已*/
div{
 width: 187/@rem;
 height: 100/@rem;
}

Tips：上述步骤 2 中换算可以通过 Hbuilder 将 px 自动转 rem 以及通过 less 自动计算成 rem，sublime 也可以通过插件进行自动转换

弹性布局适配(会配合 rem 适配使用 )

兼容情况

IE10 及以上、ios9 及以上、android4.4 及以上版本支持

如何解决 margin“塌陷”？

查看答案

在 CSS 中，margin “塌陷”（Margin Collapsing）指的是两个相邻元素（或父子元素）的垂直外边距（margin-top/margin-bottom）会合并为一个单一的外边距，取其中较大的值。这种现象主要发生在垂直方向，解决思路是打破触发 margin 合并的条件，以下是具体方案：

一、父子元素 margin 塌陷（父元素与子元素的 margin 合并）

问题：子元素的margin-top会 “转移” 到父元素上，导致父元素意外偏移。

预览
<div class="parent">
  <div class="child">子元素</div>
</div>
<style>
  .parent { background: #eee; }
  .child { margin-top: 20px; } /* 父元素会被“带着”下移20px */
</style>

解决方法：

1. 让父元素触发 BFC，或在父子间添加 “隔离层”：

• 父元素触发 BFC（推荐）：

.parent {
  overflow: hidden; /* 触发BFC，阻止margin塌陷 */
  /* 或其他BFC触发方式：display: flex; / position: absolute; 等 */
}

• 父元素添加边框或内边距：

.parent {
  border-top: 1px solid transparent; /* 边框隔离 */
  /* 或 padding-top: 1px; 内边距隔离 */
}

二、相邻元素 margin 塌陷（兄弟元素的 margin 合并）

问题：两个相邻块元素的margin-bottom和margin-top会合并为较大值。

<p class="p1">段落1</p>
<p class="p2">段落2</p>
<style>
  .p1 { margin-bottom: 20px; }
  .p2 { margin-top: 30px; } /* 实际间距为30px（取较大值），而非50px */
</style>

解决方法： 在两个元素之间添加 “隔离容器”，或改变元素的显示方式：

• 用 BFC 容器包裹其中一个元素：

<p class="p1">段落1</p>
<div style="overflow: hidden;"> <!-- BFC容器隔离 -->
  <p class="p2">段落2</p>
</div>

• 将元素改为非块级布局（如inline-block）：

.p1, .p2 {
  display: inline-block;
  width: 100%; /* 保持块级视觉效果 */
}

三、空元素的 margin 塌陷

问题：高度为 0 的空元素，其margin-top和margin-bottom会合并。

.empty {
  margin-top: 20px;
  margin-bottom: 30px; /* 实际只显示30px的margin */
}

解决方法：

• 给空元素添加内容或触发 BFC：

.empty {
  overflow: hidden; /* 触发BFC */
  /* 或添加最小高度：min-height: 1px; */
}

核心原理总结

margin 塌陷仅发生在：

• 垂直方向的块级元素
• 处于同一 BFC 中的元素

因此，解决的核心是打破 “同一 BFC” 或 “垂直块级相邻” 的条件：

1. 触发元素的 BFC（最常用）
2. 添加边框 / 内边距隔离
3. 改变元素的显示模式（如inline-block、flex）

实际开发中，推荐优先使用 “触发 BFC” 的方式（如overflow: hidden或display: flex），简洁且兼容性好。

什么是外边距重叠 (margin“塌陷”)？ 重叠的结果是什么？

查看答案

外边距重叠的定义

外边距重叠（Margin Collapsing），也称为外边距合并，是指在垂直方向上，两个或多个块级元素的外边距（margin）相遇时，它们会合并成一个外边距，这个合并后的外边距大小等于这些外边距中的最大值。外边距重叠只会发生在垂直方向上（margin-top 和 margin-bottom），水平方向（margin-left 和 margin-right）不会出现这种情况。

外边距重叠的情况

1. 相邻兄弟元素：当两个相邻的块级元素上下排列时，它们的垂直外边距会发生重叠。
2. 父元素与第一个/最后一个子元素：如果父元素没有上内边距（padding-top）或上边框（border-top），那么父元素的 margin-top 会与第一个子元素的 margin-top 重叠；如果父元素没有下内边距（padding-bottom）或下边框（border-bottom），那么父元素的 margin-bottom 会与最后一个子元素的 margin-bottom 重叠。
3. 空块级元素：如果一个块级元素没有内容、内边距、边框，那么它的 margin-top 和 margin-bottom 会发生重叠。

外边距重叠的结果

外边距重叠的结果取决于外边距的大小。如果两个外边距的大小相等，那么它们会合并成一个外边距，大小为这个外边距的大小。如果两个外边距的大小不同，那么它们会合并成一个外边距，大小为两个外边距中的最大值。

• 1、两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值
• 2、两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值
• 3、两个外边距一正一负时，折叠结果是两者的相加的和
• 4、外边距不重叠的情况
  • 水平 margin 永远不会重合
  • 设置了 overflow 属性(visible 除外)的元素和它的子元素之间的 margin 不会重叠
  • 设置了绝对定位（position:absolute）的盒模型，垂直 margin 不会被重叠，和子元素之间也不重叠
  • 设置了 display:inline-block 的元素，垂直 margin 不会重叠，和子元素之间也不重叠根元素(如 html)与 body 的 margin 不会重叠

防止外边距重叠的方法

• 对于相邻兄弟元素：可以将元素设置为浮动元素（float: left 或 float: right）、行内块元素（display: inline-block）或绝对定位元素（position: absolute），这样元素就不会发生外边距重叠。
• 对于父元素与子元素：可以给父元素添加 padding 或 border，或者将父元素设置为 BFC（块级格式化上下文），例如设置 overflow: hidden。
• 对于空块级元素：可以给元素添加内容、内边距或边框，避免外边距重叠。

CSS 预处理器是什么？常见的 CSS 预处理器有哪些？使用 CSS 预处理器的优缺点有哪些？

查看答案

CSS 预处理器是什么？

CSS 预处理器是一种脚本语言，它扩展了 CSS 并在 CSS 语法基础上添加了诸如变量、嵌套规则、混合（mixins）、函数等编程特性。这些特性使得 CSS 的编写更加高效、可维护和可扩展。预处理器会将编写的代码编译成标准的 CSS 代码，然后在网页中使用。

常见的 CSS 预处理器有哪些？

• Sass（Syntactically Awesome Stylesheets）：有两种语法格式，一种是 .sass 扩展名的缩进语法，另一种是 .scss 扩展名的类 CSS 语法。Sass 是最早的 CSS 预处理器之一，功能强大，社区活跃。
• Less（Leaner Style Sheets）：受 Sass 启发而创建，语法与 CSS 非常相似，易于学习和上手。Less 可以在客户端或服务器端编译。
• Stylus：提供了简洁灵活的语法，支持多种书写风格，既可以使用类似 CSS 的语法，也可以使用更简洁的缩进语法。Stylus 通常用于 Node.js 项目。

使用 CSS 预处理器的优缺点

优点

• 提高代码可维护性：通过使用变量、嵌套规则和混合等特性，可以减少代码重复，使代码结构更加清晰，易于理解和维护。
• 增强代码复用性：可以定义可复用的代码块（如混合），在多个地方重复使用，提高开发效率。
• 支持编程特性：引入了变量、函数、条件语句等编程概念，使得 CSS 编写更加灵活和强大。
• 更好的代码组织：可以将样式代码分割成多个文件，通过导入功能进行管理，使项目结构更加清晰。 缺点
• 学习成本：需要学习额外的语法和特性，对于初学者来说可能有一定的学习曲线。
• 编译时间：在项目规模较大时，编译预处理器代码可能需要一定的时间，影响开发效率。
• 调试困难：由于预处理器代码需要编译成 CSS 才能在浏览器中使用，调试时可能需要在编译后的 CSS 代码中查找问题，增加了调试的难度。

使用 CSS 怎么让 Chrome 支持小于 12px 的文字比如 10px？

查看答案

针对谷歌浏览器内核，加 webkit 前缀，用 transform:scale() 这个属性进行缩放！

box-sizing属性？

查看答案

用来控制元素的盒子模型的解析模式，默认为 content-box

• context-box：W3C的标准盒子模型，设置元素的 height / width 属性指的是 content 部分的高/宽
• border-box：IE传统盒子模型。设置元素的 height / width 属性指的是 border + padding + content 部分的 高/宽

width: auto 和 width: 100% 的区别？

查看答案

• width: 100% 会使元素 box 的宽度等于父元素的 content 的宽度；
• width: auto 会使元素撑满整个父元素，margin, border, padding, content 区域会自动分配水平空间；

使用 base64 编码的优缺点？

查看答案

base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示时可用该字符串来代替图片的url属性

使用 base64 的优点：

可以减少该图片的 HTTP 请求

使用 base64 的缺点：

• 1.根据base64的编码原理，编码后的大小会比源文件大小大1/3，如果把大图片编码到 html/css 中，不仅会造成文件体积增加，影响文件的加载速度，还会增加浏览器对 html 或 css 文件解析渲染的时间。
• 2.使用base64无法直接缓存，要缓存只能缓存包含base64的文件，比如 HTML 或 CSS，这相比于直接缓存图片的效果要差很多。
• 3.IE8以前的浏览器不支持，一般一些网站的小图标可以使用base64图片引入。

CSS 里的 visibility 属性有个 collapse 属性值？在不同浏览器下有什么区别？

查看答案

visibility 属性规定元素是否可见。

当一个元素的 visibility 属性被设置成 collapse 值后，对于一般的元素，它的表现跟 hidden 是一样的：

• Chrome中，使用 collapse 值和使用 hidden 没有区别；
• firefox，opera 和 IE，使用 collapse 值和使用 display：none 没有什么区别。

position 跟 display、overflow、float这些特性相互叠加后会怎么样？

查看答案

• display 属性规定元素应该生成的框的类型；
• position 属性规定元素的定位类型；
• float 属性是一种布局方式，定义元素在哪个方向浮动。
• 类似于优先级机制：position：absolute/fixed 优先级最高，有他们在时，float 不起作用，display 值需要调整。float 或者 absolute 定位的元素，只能是块元素或表格。

移动端的布局用过媒体查询吗？

查看答案

通过媒体查询可以为不同大小和尺寸的媒体定义不同的 css，适应相应的设备的显示。

• <head> 里边引入：

<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”>

• @media 里边引入：

@media only screen and (max-device-width:480px) { /* css样式 */ }

浏览器是怎样解析CSS选择器的？

查看答案

CSS选择器的解析是从右向左解析的。

• 若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。
• 若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。
• 两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。

而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的Attachment过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

在网页中的应该使用奇数还是偶数的字体？为什么呢？

查看答案

尽量使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

全屏滚动的原理是什么？用到了CSS的哪些属性？

查看答案

• 原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过 transform 进行y轴定位，也可以通过 margin-top 实现。
• 属性：overflow：hidden； transition：all 1000ms ease；

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

查看答案

• 响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。
• 基本原理是通过媒体查询 @media 检测不同的设备屏幕尺寸做处理。
• 兼容低版本IE 可以使用JS辅助一下来解决。

视差滚动效果？

查看答案

视差滚动（Parallax Scrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。

实现方式：

• CSS3 实现 优点：开发时间短、性能和开发效率比较好； 缺点是不能兼容到低版本的浏览器

• jQuery 实现 通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。 优点：能兼容到各个版本的，效果可控性好 缺点：开发起来对制作者要求高

• 插件实现方式 例如：parallax-scrolling，兼容性比较好

让页面里的字体变清晰，变细用CSS怎么做？

查看答案

-webkit-font-smoothing 在window系统下没有起作用，但是在IOS设备上起作用 -webkit-font-smoothing：antialiased 是最佳的，灰度平滑。

position:fixed; 在 android 下无效怎么处理？

查看答案

< meta name="viewport"
   content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
/>

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

查看答案

多数显示器默认频率是 60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms ＝ 16.7ms。

幽灵空白节点是什么？ 有什么解决方案

查看答案

“幽灵空白节点”（Strut）是内联元素布局中一个容易被忽略的现象，指的是在非空的内联元素容器中，即使没有可见文本，也会存在一个默认的匿名内联盒子（匿名文本节点），它会影响布局（如产生额外的行高或间距）。

为什么会出现幽灵空白节点？

CSS 规范中规定：任何包含内联元素的块级容器，都会隐含一个“匿名内联盒子”（可理解为一个不可见的文本节点），用于确保内联布局的一致性。这个节点的特性如下：

• 继承父元素的字体和行高属性（font-size、line-height）。
• 本身没有宽度和高度，但会占据行框（line box）的空间，导致容器产生默认高度。

典型表现（示例）

<!-- 案例1：空的内联容器没有高度，非空容器有默认高度 -->
<div class="box1"></div> <!-- 高度为0 -->
<div class="box2">
  <span></span> <!-- 内联元素，触发幽灵节点 -->
</div>

<style>
.box1, .box2 { background: #eee; }
/* 即使内联元素为空，box2仍有高度（由幽灵节点的line-height决定） */
</style>

<!-- 案例2：图片底部的神秘空白 -->
<div class="container">
  <img src="example.jpg" alt="示例图片">
</div>

<style>
.container { background: #eee; }
img { display: inline-block; } 
/* 图片底部会出现空白，本质是幽灵节点的基线对齐导致 */
</style>

解决方案：消除幽灵节点的影响

幽灵空白节点无法被直接删除，但可通过以下方式消除其对布局的干扰：

1. 改变容器的line-height

幽灵节点的高度由容器的line-height决定，将其设为0可消除默认高度：

.container {
  line-height: 0; /* 幽灵节点高度为0 */
}

2. 改变内联元素的垂直对齐方式

针对图片底部空白问题，修改vertical-align（默认值为baseline，会预留基线到基线的间距）：

img {
  vertical-align: middle; /* 或 top / bottom */
}

3. 将内联元素转为块级元素

内联元素是触发幽灵节点的前提，转为块级后容器不再包含内联盒子：

img {
  display: block; /* 块级元素不触发幽灵节点 */
}

4. 清空容器的字体尺寸

幽灵节点的大小依赖font-size，将其设为0可消除占位：

.container {
  font-size: 0; /* 幽灵节点尺寸为0 */
}
/* 如需子元素显示文字，单独重置font-size */
.container span {
  font-size: 16px;
}

总结

幽灵空白节点是内联布局的隐含规则，主要影响：

• 空内联容器的默认高度
• 图片/内联块元素底部的空白
• 相邻内联元素的间距

解决核心是打破内联布局的默认规则：通过修改line-height、vertical-align，或转换元素为块级，消除幽灵节点的占位影响。实际开发中，vertical-align: middle和display: block是处理图片底部空白的常用方案。

CSS属性 overflow 属性定义溢出元素内容区的内容会如何处理?

查看答案

• visible：默认值。内容不会被修剪，会呈现在元素框之外。
• hidden：内容会被修剪，并且其余内容是不可见的。
• scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
• auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

大屏配置方案有哪些？ 详细说一下

查看答案

大屏配置方案主要针对数据可视化大屏、监控指挥中心大屏等场景，需解决多尺寸适配、高清渲染、实时数据展示、视觉层次感等核心问题。以下从适配方案、技术栈选型、布局设计、性能优化、交互设计等维度详细说明：

一、屏幕适配方案（核心）

大屏设备通常为拼接屏（如2×2、3×3拼接）、LED屏或超宽屏，分辨率多样（如1920×1080、3840×2160、甚至自定义分辨率），适配是首要问题。

1. 动态缩放方案（推荐）

原理：以设计稿为基准，通过transform: scale()动态缩放整个页面，保持布局比例一致。
实现步骤：

• 确定设计稿基准分辨率（如1920×1080），计算大屏实际分辨率与设计稿的缩放比例（scaleX = 实际宽/设计稿宽，scaleY = 实际高/设计稿高）。
• 用一个外层容器包裹所有内容，设置容器尺寸为设计稿尺寸，再通过缩放适配大屏。

<div class="screen-container">
  <!-- 所有大屏内容 -->
</div>
<style>
  .screen-container {
    width: 1920px; /* 设计稿宽度 */
    height: 1080px; /* 设计稿高度 */
    transform-origin: left top; /* 从左上角开始缩放 */
  }
</style>
<script>
  // 动态计算缩放比例
  function resize() {
    const designWidth = 1920;
    const designHeight = 1080;
    const scaleX = window.innerWidth / designWidth;
    const scaleY = window.innerHeight / designHeight;
    document.querySelector('.screen-container').style.transform = `scale(${scaleX}, ${scaleY})`;
  }
  // 初始化和窗口变化时触发
  window.addEventListener('resize', resize);
  resize();
</script>

优点：布局不变形，开发简单（按固定设计稿开发即可），适配所有尺寸。
缺点：极端分辨率下可能模糊（可通过提高设计稿精度缓解）；边缘内容可能被截断（需预留安全区域）。
适用场景：大多数大屏场景，尤其是拼接屏、分辨率不固定的场景。

2. 流式布局方案（vw/vh + 百分比）

原理：使用相对单位（vw/vh/%）定义元素尺寸，让内容随屏幕尺寸自动拉伸。

• 1vw = 屏幕宽度的1%，1vh = 屏幕高度的1%。
• 配合flex/grid布局实现自适应排列。

/* 示例：标题栏高度占屏幕5%，字体大小占3% */
.header {
  height: 5vh;
  font-size: 3vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 左侧菜单占宽度20%，右侧内容占80% */
.sidebar { width: 20%; }
.content { width: 80%; }

优点：元素尺寸随屏幕等比变化，无缩放模糊问题。
缺点：复杂布局易变形（需大量断点调整）；字体/图表可能在极端尺寸下比例失调。
适用场景：简单布局、宽高比例固定的大屏（如16:9）。

3. 响应式布局方案（媒体查询）

原理：针对不同分辨率范围编写单独样式，通过@media断点适配。

/* 设计稿基准1920×1080 */
.base-style { /* 基础样式 */ }

/* 针对2560×1440大屏 */
@media (min-width: 2560px) {
  .header { font-size: 28px; }
  .chart { height: 400px; }
}

/* 针对1366×768小屏 */
@media (max-width: 1366px) {
  .header { font-size: 16px; }
  .chart { height: 200px; }
}

优点：可精确控制不同尺寸下的布局，避免变形。
缺点：开发成本高（需适配多个断点）；难以覆盖所有自定义分辨率。
适用场景：已知固定分辨率范围的场景（如仅适配2-3种大屏）。

4. rem适配方案

原理：通过动态设置html的font-size，将rem与屏幕宽度关联（如1rem = 屏幕宽/100），实现尺寸自适应。

// 动态设置rem基准值
function setRem() {
  const screenWidth = window.innerWidth;
  document.documentElement.style.fontSize = `${screenWidth / 100}px`; 
  // 1rem = 屏幕宽的1%
}
window.addEventListener('resize', setRem);
setRem();

/* 元素宽度为屏幕的50%（50rem），字体大小为屏幕的2%（2rem） */
.box {
  width: 50rem;
  font-size: 2rem;
}

优点：比vw兼容性更好（支持旧浏览器），尺寸计算灵活。
缺点：需额外JS计算，复杂布局仍需配合媒体查询。

二、技术栈选型

1. 前端框架

• 基础框架：Vue 3（生态丰富，适合快速开发）、React（灵活，适合复杂交互）。
• 大屏专用框架：
  • DataV（阿里，基于Vue，提供大量大屏组件：边框、装饰、图表模板）；
  • Aliyun DataV（云端可视化平台，支持零代码配置）；
  • FineReport/FineBI（国产BI工具，适合非开发人员快速搭建）。

2. 可视化库

• 图表库：ECharts（功能最全，支持大屏常见图表：折线、柱状、地图、雷达等，自定义性强）；D3.js（适合高度定制化图表，但开发成本高）。
• 地图可视化：高德/百度地图API（适合地理信息展示）；ECharts Geo（轻量地图，支持省市县下钻）。
• 3D可视化：Three.js（3D模型、场景展示，如3D机房、3D地图）；ECharts GL（3D图表，如3D柱状图、地球仪）。

3. 数据交互

• 实时数据：WebSocket（长连接，适合高频更新数据，如监控指标）；MQTT（物联网场景，低带宽下高效传输）。
• 静态数据：Axios（HTTP请求，适合初始化数据加载）。

三、布局设计方案

大屏布局需突出核心数据，层次分明，避免信息过载。常见布局结构：

1. 顶部区域：标题、系统名称、时间/日期、刷新状态。
2. 左侧/右侧区域：导航菜单、筛选条件、次要指标（如设备列表、状态标签）。
3. 中间区域：核心数据展示（如KPI总览、关键图表、预警信息）。
4. 底部区域：版权信息、数据来源、系统状态（如在线人数、服务器负载）。

布局工具：

• 优先使用flex（一维布局，如顶部标题栏、左右分栏）和grid（二维布局，如多图表网格排列）。
• 用position: absolute固定装饰元素（如背景线条、角落装饰），不影响核心内容布局。

四、性能优化方案

大屏通常包含大量动态图表和实时数据，性能优化至关重要：

1. 减少重绘重排：

   • 图表容器尺寸固定（避免动态改变宽高触发重绘）；
   • 使用transform/opacity实现动画（仅触发合成层，不重排）。

2. 图表优化：

   • 限制单图表数据量（如只展示近100条数据，历史数据通过钻取加载）；
   • 关闭不必要的动画（如ECharts的animation: false）；
   • 用Canvas渲染（ECharts默认Canvas，比SVG更高效）。

3. 数据更新策略：

   • 非核心数据降低更新频率（如30秒一次）；
   • 批量更新数据（避免频繁触发DOM更新）；
   • 使用WebWorker处理复杂计算（如数据聚合、过滤），避免阻塞主线程。

4. 资源优化：

   • 图片使用WebP格式，压缩背景图；
   • 懒加载非首屏图表（滚动/可见时再初始化）。

五、交互设计方案

大屏以“展示”为核心，交互需简洁高效：

1. 基础交互：

   • 鼠标悬停：显示详情（如图表数据tooltip）；
   • 点击钻取：从总览下钻到明细（如全国→省份→城市）；
   • 筛选器：下拉选择时间范围、区域等（固定在侧边栏）。

2. 自动交互：

   • 轮播展示：非核心数据区域自动切换内容（如多组图表轮播）；
   • 预警高亮：异常数据自动闪烁、变色（配合音效提示）。

3. 触摸适配：

   • 针对触摸大屏，支持双指缩放（图表细节查看）、滑动切换（多页面）。

六、部署与适配细节

1. 浏览器选择：优先使用Chrome（支持最新CSS特性、渲染性能好），禁用浏览器缩放（meta: viewport固定缩放）。
2. 分辨率适配：提前获取大屏实际分辨率（如拼接屏单块1920×1080，3×2拼接则总分辨率5760×2160），按实际尺寸调试。
3. 色彩与字体：
   • 色彩：高对比度（深色背景+亮色文字/图表，减少视觉疲劳）；
   • 字体：无衬线字体（如微软雅黑、思源黑体），字号不小于14px（远距离可见）。

总结

大屏配置的核心是“适配+性能+可视化”：

• 优先选择动态缩放方案（开发效率高，适配性强）；
• 技术栈推荐Vue 3 + ECharts + DataV（平衡开发效率和定制性）；
• 重点关注数据更新频率和图表性能，避免卡顿；
• 布局上突出核心数据，减少冗余信息，确保远距离可清晰查看。

贡献者: lfangq

上一页HTML基础篇

下一页JS基础篇