CSS知识点（二）

full-vh-css

1、对盒模型的理解

每个 HTML 元素都被看作一个矩形的盒子，该盒子主要由以下四个部分组成：

内容content、内边距padding、边框border、外边距margin。

标准盒子模型（W3C盒模型、content-box）

通过css设置的宽高只是内容区域的宽高。
IE盒子模型（怪异盒模型、border-box）

通过css设置的宽高包含了内容、内边距、边框。

1	`box-sizing: border-box; # 默认是content-box`

2、为什么有时候用translate来改变位置而不是定位

在前端开发中，需要改变元素位置实现动画或者交互效果。常见的两种方式是使用css定位（top、left等属性）、使用css变换（transform: translate())。

在讲二者的区别前，先了解浏览器的渲染流程：

1、样式计算。（根据HTML和CSS计算出每个元素的样式）

2、布局/重排。浏览器计算每个元素在页面中的位置和尺寸。元素的几何信息如宽高和位置改变时，会触发重排。重排不仅影响目标元素，还可能影响到其他元素的布局。

3、绘制/重绘。浏览器将每个元素绘制在屏幕上。如果元素只有颜色或外观的变化，可能只需要重绘，而不触发布局计算。

4、合成。现代浏览器把页面分为多个图层(layer），这一阶段，这些图层会被合成起来显示在屏幕上，通常由GPU加速处理，可以在不重新布局或重绘的情况下，单独对某些图层进行移动、缩放、旋转。

css定位

修改元素的top或者left等，通常需要配合position:relative(absolute)，浏览器需要重新计算元素在页面的位置，可能影响周围元素触发重排(reflow)，之后再进行重绘。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box Move Animation</title>
    <style>
        .box {
            position: relative;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background: lightblue;
            transition: top 0.5s ease, left 0.5s ease;
        }
        .box.move {
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>

<div class="box" id="box"></div>

<button onclick="moveBox()">Move Box</button>

<script>
    function moveBox() {
        var box = document.getElementById('box');
        box.classList.toggle('move');  // 切换 move 类，触发动画
    }
</script>

</body>
</html>

css变换

使用transform:translateX()/translateY)/translate()时，实际上是修改了元素的变换矩阵。元素值在文档流中的位置和尺寸并未改变，只有视觉上产生位移。元素被提升到一个独立的合成层，在合成阶段，浏览器只需要调整这个图层的变换矩阵，无需重新计算页面的布局或重新绘制。

由于不触发重排重绘，性能更高，而且由GPU加速，更加流畅，渲染效率高。

.box {
            width: 100px;
            height: 100px;
            background-color: red;
            transition: transform 0.5s ease;
        }

        .box.move {
            transform: translate(100px,100px);
        }

？什么是合成层

浏览器在渲染过程中把页面分为若干独立的图层，每个图层的内容可以独立地进行变换（如平移、旋转、缩放），当某个元素被单独提升为一个图层后，对它的操作只影响这一层，而不用重新计算其他图层的内容和位置。优化性能上，主要是利用局部更新和GPU加速。

? 哪些属性触发合成层

除了 transform 之外，还有 opacity、filter 等属性

3、 li 与 li 之间有空白间隔

当li标签设置display:inline-block属性时，页面效果如图所示

<ul>
    <li>11</li>
    <li>11</li>
    <li>11</li>
    <li>11</li>
</ul>

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

解决方案

1、将标签写在一起，不要留空
1
2
3
<ul> <li>11</li><li>11</li><li>11</li><li>11</li> </ul>
2、把换行处注释
1
2
3
4
5
6
<ul> <li>11</li><li>11</li><li>11</li><li>11</li> </ul>
3、父元素设置 font-size: 0; （空白字符的宽度与字体大小相关）

4、将 <li> 元素设置为 float: left;（脱离内联布局，不受空白字符影响）

5、使用 Flex 布局
1
2
3
ul { display: flex; }

4、CSS3中有哪些新特性

新的选择器

属性选择器增强：[attr^="value"]、[attr$="value"]、[attr*="value"]

新增结构伪类：:nth-child(n)、:nth-of-type(n)、:first-child、:last-child、:not(selector)等。
背景与边框的扩展

多重背景、渐变背景（linear-gradient、 radial-gradient）、边框图像(border-image)；

圆角border-radius、盒阴影box-shadow、文本阴影text-shadow
转换

二维转换：旋转（rotate）、缩放（scale）、平移（translate）和倾斜（skew）等操作。

三维转换：rotateX、rotateY、rotateZ 以及透视（perspective）属性
过渡

transition属性
动画

利用 @keyframes 定义动画的关键帧，使用 animation 属性将动画应用到元素上。
布局新特性
弹性盒布局display: flex;、网格布局display: grid;、多列布局 column-count

媒体查询

1
2
3

@media [媒体类型] and ([媒体特性]) {
  /* CSS 规则 */
}

字体和文本

利用@font-face规则，引入网络字体。

除了 text-shadow 外，还引入了一些新的属性来改善文本的渲染效果，如 word-break、text-overflow、line-clamp（部分浏览器支持）等。

自定义属性

:root {
  --main-color: #3498db;
}
.box {
  background-color: var(--main-color);
}

calc() 函数
1
2
3
.box { width: calc(100% - 20px); }

5、替换元素的概念

“替换元素”指的是那些其显示内容不来源于标签内部的文本或子节点，而是由外部资源提供的元素。

替换元素的实际内容是由外部资源（图片、视频、嵌入的内容等）决定的，例如，img加载图片，video加载视频，object或者iframe加载外部文档或插件内容。

外部资源与布局分离

由于替换元素的内容由外部文件提供，它们的渲染与页面其他内容相对独立。这在响应式设计中尤为重要，可以通过 CSS 控制其尺寸和缩放行为，而不会直接改变元素内部的结构。
内在尺寸的参考

浏览器在渲染替换元素时，会首先考虑其内在尺寸，然后再根据 CSS 指定的尺寸规则（例如百分比宽度、固定像素值等）来调整显示大小。这使得替换元素能够在不同的设备和布局中保持一定的比例或响应性。

6、常见的图片格式及使用场景

1、 JPEG/JPG 有损压缩，文件体积小，多次保存会导致质量下降。

2、PNG 无损压缩，文件体积较大，保存高质量细节。支持透明通道。

3、GIF 无损压缩，文件体积较大，支持动画，支持透明。

4、SVG 基于XML代码，无限缩放不失真，文件体积小，支持动画。

5、WebP 支持有损/无损压缩，支持透明通道和动画。相同质量的图片，WebP具有更小的文件体积。

6、BMP 无压缩位图格式，保持原始像素数据，文件体积较大。

7、对 CSSSprites 的理解

CSS Sprites 是一种在网页开发中常用的优化技术，其核心思想是将多个小图片合并为一张大图，通过 CSS 的背景定位（background-position）来显示大图中的特定区域，从而在页面上实现原来分散的多个图片效果。

减少HTTP请求：传统每个图片需要一次独立的http请求，这样只需请求一次。
提高加载性能：减少http请求降低服务器压力，还能加快页面渲染速度。
统一管理： 所有相关图标集中在一张图片中，便于统一管理和修改。

div {
    width: 200px;
    height: 200px;
    background-color: #ff0000;
    background-image: url(../Images/cat.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position:20px 10px;
    }

8、物理像素，逻辑像素和像素密度

物理像素：设备屏幕上实际存在的最小点，一个物理像素就是显示屏上能够发光的一个单元。

比如某个手机屏幕的分辨率可能是1080 x 1920，分别代表水平和垂直方向的物理像素数。

逻辑像素：（也称作设备独立像素或 DIP,Density Independent Pixel），是开发时的抽象单位，通过缩放因子与物理像素进行映射，使得应用在不同屏幕密度下都能保持相似的视觉大小和比例。

举例：
如果一个按钮在设计稿上是 50×50 逻辑像素，在一台 2x 的设备上，实际显示就会使用 100×100 物理像素；而在 3x 的设备上，则需要 150×150 的物理像素。

像素密度：单位面积内的物理像素数，通常用DPI（Dots Per Inch）或 PPI（Pixels Per Inch）来表示。高像素密度意味着屏幕上单位面积内拥有更多的物理像素，画面会更加细腻和清晰。

？为什么在移动端开发时需要用到 @2x, @3x 这种图片？

适配不同缩放因子：
使用 @2x、@3x 命名的图片，可以让开发者根据设备的像素比自动选择合适的资源。例如：

在普通（1x）设备上使用常规图片。

在 Retina（2x）设备上使用 @2x 图片。

在更高密度（3x）设备上使用 @3x 图片。

这样可以确保图像在各个设备上既不失真，又能保证视觉效果一致。

9、对line-height 的理解

行盒（Line Box）：当元素中包含内联内容（如文字、图片等）时，浏览器会根据字体大小、行高等属性构建行盒，行盒决定了这一行的高度。

line-height 指文本行基线间的垂直距离，用来指定行盒的高度，从而控制文本行与行之间的垂直间距。它既可以增加行与行之间的间距，使文本看起来更加宽松，也可以减小间距，使文本更加紧凑。指文本行基线间的垂直距离

line-height 可以采用多种形式的取值：

**关键字 normal： **
- 默认值，浏览器会根据字体和排版引擎自动计算一个合适的行高。通常大约在字体大小的 1.2 到 1.4 倍之间，但不同浏览器和字体可能有所差异。
无单位数值（Unitless Number）：
- 例如：line-height: 1.5;
- 当使用无单位数值时，这个值会与当前元素的 font-size 相乘，得到实际的行高。无单位数值具有一个优点：在继承时，子元素会继承这个乘数，而不是一个固定的长度，这样即使子元素的 font-size 发生变化，行高也会相应调整，保持良好的比例。
带单位的长度值（Length）：
- 例如：line-height: 24px;、line-height: 1.5em;
- 这种方式直接指定了行盒的高度为一个固定值。使用固定值时，行高不会随着字体大小的变化而自动调整，因此在响应式设计中需要谨慎使用。
百分比（Percentage）：
- 例如：line-height: 150%;
- 百分比的计算基于元素的 font-size。比如 150% 实际上等于 1.5 倍的字体大小。

从上到下四条线分别是顶线、中线、基线、底线。

行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。

行距是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。

10、CSS 优化和提高性能的方法有哪些

文件体积优化

使用工具压缩css文件，删除注释、空格、重复代码，将体积最小化。（如 CSSNano、PostCSS）

扫描代码，移除未使用的css规则。（如urgeCSS、UnCSS 等工具）

避免使用@import，改用link或者构建工具合并文件，减少 HTTP 请求次数。
选择器优化

减少复杂选择器，避免深度嵌套。

避免使用通用选择器。

优先使用类选择器，优于标签或属性选择器。
减少重排和重绘
- 使用 transform 和 opacity 实现动画（触发合成层，跳过重排）。
- 批量修改 DOM 样式（如通过 classList 一次性修改多个属性）。
加载与执行优化
- 将首屏渲染所需的 CSS 直接内嵌到 HTML 中，减少关键路径的阻塞时间。
- 使用 <link rel="preload"> 或 media="print" 延迟加载非首屏 CSS。都依赖于 onload 事件。
- 使用媒体查询，拆分不同设备的 CSS 文件，按需加载。
其他优化
- 避免使用昂贵的 CSS 属性，如 box-shadow、border-radius、filter 在大量使用时可能影响性能。
- 使用 Flexbox/Grid 替代传统布局，减少复杂浮动或定位的使用。
- 精灵图：将多个图标或小图片合并为一张大图，减少 HTTP 请求数。
- 利用预处理器，更好地组织代码，使用变量、混合宏和函数等机制，可以生成更简洁、高效的 CSS。

CSS

#盒模型 #transform #li与li之间的空隙 #css3新特性 #图片类型 #精灵图是什么 #物理像素与逻辑像素 #像素密度 #行高 #css性能优化

CSS知识点（三）上一篇

CSS知识点（一）下一篇