前端系列第9集-CSS系列

Apr 16, 2023 · Yin灏

CSS 预编语言是指可以在 CSS 基础上添加一些扩展功能和语法，从而提高 CSS 编写的效率和可维护性的语言。常见的 CSS 预编语言有 LESS、Sass 和 Stylus 等。

其主要优点包括：

变量支持：可以定义变量来存储颜色、字体、间距等信息，并在需要时进行调用，提高了代码的复用性和可维护性。
嵌套支持：可以将选择器进行嵌套，从而避免了冗长的 CSS 代码，同时也使得 HTML 结构与样式更加清晰。
混合（Mixin）支持：可以定义一些通用且重复使用的样式，然后在需要时进行调用，减少了代码的冗余。
函数支持：提供了强大的函数库，例如计算器函数、字符串处理函数、颜色函数等，使得样式的编写更加灵活和方便。
自动化处理：通过使用 Gulp、Webpack 等工具，可以自动编译 CSS 代码，从而节省开发时间和提高工作效率。

不同的 CSS 预编语言之间存在一些区别，例如：

语法不同：不同的 CSS 预编语言可能会有不同的语法规则和关键字。
文件扩展名不同：LESS 的文件扩展名是.less，Sass 的文件扩展名是.scss 或.sass，Stylus 的文件扩展名是.styl。
编译方式不同：不同的 CSS 预编语言在编译过程中可能会使用不同的引擎和工具，例如 LESS 使用 Less.js 进行编译，Sass 使用 Ruby Sass 或 LibSass 等工具进行编译。

在 Chrome 中，小于 12px 的文字默认会被设置为 12px 的大小，这是因为 Chrome 将最小字体大小限制在了 12px。但是，我们可以通过以下几种方式来实现小于 12px 的文字：

使用-webkit-text-size-adjust 属性

可以使用-webkit-text-size-adjust 属性来控制文本的缩放效果。例如，可以设置如下样式：

body  {
    -webkit-text-size-adjust: none;
}

上述代码中，将-webkit-text-size-adjust 属性设置为 none 可以禁用浏览器的自动缩放功能，从而使得小于 12px 的文字可以正常显示。

使用 transform 属性

可以使用 transform 属性对元素进行缩放操作，从而使得文本的大小可以小于 12px。例如，可以设置如下样式：

.small-font  {
    font-size: 10px;
    display: inline-block;
    transform: scale(0.8);
    transform-origin: 0 0;
}

上述代码中，将元素的字体大小设置为 10px，并使用 transform 的 scale 属性对元素进行缩放，从而实现了小于 12px 的文本。

在 CSS 中，可以使用 border 属性以及其相关属性来画一个三角形。以下是一个示例代码：

.triangle  {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 50px solid red;
    border-right: 50px solid transparent;
}

上述代码中，通过设置元素的宽度和高度为 0，并使用 border-top、border-left 和 border-right 等属性来定义三角形的形状和样式。其中，border-top 属性设置了三角形的高度和颜色，border-left 和 border-right 属性设置了三角形两侧的边框。

三角形的原理基于 CSS 有一个特性：当一个块级元素的宽度和高度都为 0 时，它会自动变成一个没有内容的盒子。此时，如果在这个盒子上应用一个或多个边框，就可以在页面上画出一个三角形。

视差滚动效果可以通过 CSS 的 transform 和 perspective 属性来实现。以下是一些常用的方法：

基于背景图实现视差滚动

可以将背景图固定在页面上，然后使用 transform 属性对其进行平移、缩放等操作，以实现视差滚动的效果。例如，可以设置如下样式：

.background  {
    background-image: url("bg.jpg");
    background-attachment: fixed;
    background-size: cover;
    height: 100vh;
    transform: translateZ(-50px)  scale(1.2);
}

上述代码中，translateZ 属性可以将元素向后平移 50px，产生立体感；scale 属性可以缩放元素，从而使得前景元素看起来更大。

基于文字实现视差滚动

可以使用 perspective 属性和 transform 属性来实现文本的视差滚动效果。例如，可以设置如下样式：

.parallax-text  {
    perspective: 1px;
    font-size: 24px;
}

.parallax-text span {
    display: inline-block;
    transform: translateZ(-1px);
}

上述代码中，perspective 属性可以设置元素的透视距离，使得元素具有 3D 效果；translateZ 属性可以控制元素沿着 Z 轴方向移动，从而产生视差效果。

单行文本溢出的省略样式可以通过以下代码实现：

.text-overflow  {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

上述代码中，white-space 属性设置为 nowrap 可以让文本不换行，overflow 属性设置为 hidden 可以隐藏超出部分，text-overflow 属性设置为 ellipsis 可以显示省略号。

而多行文本溢出的省略样式则需要使用 CSS3 新增的-webkit-line-clamp 属性，该属性需要结合 display: -webkit-box;和-webkit-box-orient: vertical;属性一起使用，示例代码如下：

.text-overflow-multiline {
  overflow : hidden;
  display : -webkit-box;
  -webkit-line-clamp: 2; /* 行数 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

上述代码中，-webkit-line-clamp 属性指定了需要显示的行数，-webkit-box-orient 属性指定为竖向排列。需要注意的是，这种方式目前只支持 WebKit 内核的浏览器（如 Safari、Chrome 等），其他浏览器可能无法生效。

CSS 的性能优化对于网站性能的提升至关重要，以下是一些 CSS 提高性能的方法：

减少 HTTP 请求：将多个 CSS 文件合并为一个文件，或使用 CSS 预处理器（如 Sass、Less 等）来减少 CSS 文件数目。
压缩 CSS 文件：使用 CSS 压缩工具，例如 CSSNano 和 UglifyCSS 等，可以去除 CSS 中的注释、空格和冗余代码，从而减小文件体积，加快页面加载速度。
使用字体图标：使用字体图标而不是图片，可以减少 HTTP 请求数量，提高网页性能。同时，字体图标可以通过 CSS 控制大小、颜色和样式等，更加灵活。
避免使用@import：@import 语句会导致浏览器在下载完主样式表之后再次发送请求下载其他样式表，因此应该尽可能避免使用@import。
避免使用过于复杂的选择器：使用简单的选择器可以提高 CSS 解析速度，避免影响页面渲染性能。
避免使用!important：虽然!important 可以强制覆盖其他样式，但是滥用它会导致 CSS 的可维护性变差，同时也会降低性能。
使用 CSS Sprites：将多个小图片合并成一张图片，可以减少 HTTP 请求数量，提高网页性能。
避免使用表格布局：表格布局会导致浏览器不得不重新计算整个文档，应该尽可能使用 CSS 布局来代替表格布局。

响应式设计（Responsive Design）是一种能够自适应不同设备和屏幕尺寸的网页设计方式。它可以让用户在任何设备上都能够获得最佳的浏览体验，而不需要针对每个设备单独创建一个独立的网站。

响应式设计的基本原理是根据设备屏幕的尺寸或者分辨率等特征，动态地调整页面布局、字体大小、图片大小等元素，使其能够适应不同的设备屏幕，并保证内容的可读性和易用性。通常，响应式设计会使用 CSS3 媒体查询、弹性盒子布局、图像缩放与裁剪等技术来实现。

要做好一个响应式网站，以下是几个关键的步骤：

设计阶段：在设计网站时需要先考虑不同设备上的展示效果，即采用流体布局和可伸缩的设计风格。同时，需要注意颜色、字体、图像等方面的选取，以确保在各种设备上都具有良好的视觉效果和可读性。
HTML 编码：应该使用语义化标签来搭建页面结构，便于搜索引擎获取信息，同时也为不同设备提供了适配的基础。同时，需要注意在 HTML 中添加 viewport meta 标签，以确保页面在移动设备上能够正常显示。
CSS 编码：按照响应式布局的原则设计 CSS 样式，使用媒体查询来针对不同屏幕尺寸做出调整，使用流式单位（如百分比、em 等）来实现元素的伸缩效果，避免设置固定的宽度和高度。
图像优化：使用无损压缩技术，压缩图像文件大小，选择合适的图片格式（如 JPEG、PNG、SVG 等），同时针对不同屏幕尺寸提供不同大小的图片版本，以达到更好的加载速度和效果。

回流（reflow）和重绘（repaint）是页面性能优化中需要掌握的两个关键概念。

回流指的是当 DOM 结构发生变化或者浏览器窗口尺寸改变时，浏览器需要重新计算元素的位置和大小，然后将视图更新到屏幕上的过程。这个过程十分消耗性能，因为它涉及到了整个文档的重新布局和重新绘制。

重绘指的是当元素的样式属性发生变化，但不影响其在文档流中的位置和大小时，浏览器只需要重新绘制元素的外观，而无需重新计算布局和重新绘制整个文档的过程。

在实际开发中，以下场景可能会触发回流和重绘：

改变窗口大小：浏览器需要重新计算布局和重新绘制整个文档。
修改 CSS 样式：例如修改元素的宽度、高度、边距、位置等，都可能导致元素的回流和重绘。
操作 DOM 结构：例如添加、删除、移动元素等，都可能导致整个文档重新布局和重新绘制。
获取一些计算值：例如 offsetTop、offsetWidth 等，这些值需要浏览器重新计算元素的位置和大小。

为了减少回流和重绘，可以采取以下几种方式：

使用相对定位、绝对定位等方式摆放元素，避免影响其他元素的布局。
将需要多次操作的元素离线处理，例如使用 document fragment 操作 DOM 结构。
通过合理设置 CSS 属性，尽可能减少浏览器计算量。
避免在循环中操作 DOM，尽可能减小 DOM 树的深度。

CSS3 动画指的是使用 CSS3 中的特定属性和值来实现元素动态效果的技术。以下是 CSS3 动画常用的一些属性和值：

transition：过渡动画，可以在状态改变时添加平滑的动画效果。
transform：变形动画，可以通过缩放、旋转、倾斜或移动等操作实现元素的变形效果。
animation：关键帧动画，可以分别定义不同的动画状态，并在指定时间内自动切换。
@keyframes：定义关键帧动画中的各个关键帧，可以控制元素在不同时间点的状态。
perspective：透视距离，可以设置元素的透视效果，使得元素看起来更加真实。
backface-visibility：背面可见性，可以控制元素的背面是否可见，使得元素旋转时呈现更好的效果。
will-change：预设元素的某些属性，优化 GPU 处理并提高动画性能。

CSS3 是 CSS 的最新标准，包含了许多新的功能和特性。以下是 CSS3 新增的一些主要特性：

强大的选择器：CSS3 引入了很多强大的选择器，例如属性选择器、伪类选择器、伪元素选择器等，可以更精确地选择网页中的元素。
盒模型：CSS3 中新增了盒模型的 box-sizing 属性，可以控制盒子的宽高计算方式，包括 content-box（默认值）、border-box 和 padding-box。
文字和字体：CSS3 中新增了 text-shadow 属性和 font-face 规则，可以实现文字阴影和自定义字体。
背景和渐变：CSS3 中新增了 background-size 属性和多种渐变效果，例如线性渐变、径向渐变等。
2D 转换和动画：CSS3 中新增了 transform 属性和 transition 属性，可以实现元素的 2D 变形和动画效果。
3D 转换和动画：CSS3 中还新增了类似于 transform 的 3D 变形和过渡动画的属性，例如 perspective、rotateX、rotateY、scaleZ、translateZ 等。
Flexbox 布局：CSS3 中引入了 Flexbox 布局，可以轻松地实现弹性布局，使得页面布局更加灵活。
Grid 布局：CSS3 中还引入了 Grid 布局，可以方便地实现复杂的网格布局结构。

Grid 网格布局是 CSS3 中引入的新一代布局方式，它可以使我们更方便地进行页面布局，实现复杂的网格结构。与 Flexbox 不同的是，Grid 布局能够同时管理行和列，具有更高的灵活性和自由度。

Grid 布局的基本概念：

网格容器（grid container）：使用 display: grid 属性定义的元素，它的子元素将成为网格项。
网格线（grid line）：将网格划分为行和列的线，在网格线上的位置可以用来定位网格项。
网格轨道（grid track）：相邻两个网格线之间的空间，可以是行或列。
网格单元格（grid cell）：网格交叉处形成的矩形区域，是网格容器的最小单位。
网格区域（grid area）：由四条网格线围成的矩形区域，可以包含一个或多个网格单元格。

Grid 布局的常用属性：

grid-template-columns/grid-template-rows：定义网格容器的列/行大小和数量。
grid-template-areas：定义网格容器中每个网格区域的名称，用于布局。
grid-column-start/grid-column-end/grid-row-start/grid-row-end：定义网格项所占据的网格线位置。
grid-column/grid-row：简写属性，同时定义 grid-column-start 和 grid-column-end/grid-row-start 和 grid-row-end。
grid-area：定义网格项所占据的网格区域。
justify-items/align-items：定义网格容器内网格项的对齐方式。
justify-content/align-content：定义网格容器内所有网格项的对齐方式。

Grid 布局适用于以下场景：

多列布局：可以方便地实现多列布局，不必使用浮动和定位等传统布局技术。
复杂布局：可以通过网格线和网格区域的划分和合并，实现各种复杂的布局效果。
响应式布局：可以根据屏幕尺寸自动调整布局，适用于各种设备和终端。

Flexbox（弹性盒布局模型）是 CSS3 中引入的一种新的布局模型，它可以方便地实现各种复杂的页面布局效果。Flexbox 将容器内的元素放在一个主轴上，并定义了如何分配剩余空间和对齐元素等属性，可以完全改变元素默认排列顺序、大小、位置和流动方向。

Flexbox 的适用场景如下：

实现可以自适应的网页布局

Flexbox 可以使得网页元素更加灵活，可以根据不同的屏幕尺寸和设备自适应调整布局，从而提高多终端访问体验。

解决传统布局中存在的难以解决的问题

传统布局中，当两个或多个元素具有不同的高度时，我们往往需要使用 hack 方法来解决，而在 Flexbox 中，只需要简单设置一些属性即可实现元素的自适应调整。

可以快速创建响应式布局

通过使用 Flexbox 技术，我们可以快速构建出符合计算机屏幕尺寸的响应式布局，这样可以大大提升用户交互体验。

两栏布局，右侧自适应：

使用 float 属性实现，左边固定宽度，右边设置为 100%减去左边的宽度。具体代码如下：

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

<style>
    .left {
      float: left;
      width: 200px; 
    }
    .right {
      margin-left: 200px; /* 左侧宽度 */
    }
</style>

另一种方法是使用 flex 布局，将容器设置为 display: flex;，并将左侧元素的 flex-basis 属性设置为固定宽度，右侧元素的 flex-grow 属性设置为 1。具体代码如下：

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

<style>
    .container {
      display: flex;
    }
    .left {
      flex-basis: 200px; /* 左侧宽度 */
    }
    .right {
      flex-grow: 1;
    }
</style>

三栏布局，中间自适应：

同样可以使用 float 或者 flex 布局实现。

使用 float 属性实现，左右两侧宽度固定，中间宽度为 100%减去左右两侧宽度之和。具体代码如下：

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

<style>
    .left {
      float: left;
      width: 200px; /* 左侧宽度 */
    }
    .center {
      float: left;
      width: calc(100% - 400px); /* 中间宽度 */
    }
    .right {
      float: left;
      width: 200px; /* 右侧宽度 */
    }
</style>

使用 flex 布局实现，将容器设置为 display: flex;，左右两侧元素的 flex-basis 属性设置为固定宽度，中间元素的 flex-grow 属性设置为 1。具体代码如下：

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

<style>
    .container {
      display: flex;
    }
    .left {
      flex-basis: 200px; /* 左侧宽度 */
    }
    .center {
      flex-grow: 1;
    }
    .right {
      flex-basis: 200px; /* 右侧宽度 */
    }
</style>

元素水平垂直居中的方法有以下几种：

绝对定位 + margin: auto：将元素设置为绝对定位，将左右和上下方向的 margin 都设置为 auto。这个方法需要知道要居中元素的宽高，并且元素必须是块级元素。
flex 布局：使用 flex 布局，将父容器设置为 display: flex; align-items: center; justify-content: center;，子元素即可实现水平垂直居中。这个方法适用于块级元素和行内元素。
display: table-cell + vertical-align: middle：将元素设置为表格单元格，并将其 vertical-align 属性设置为 middle。这个方法适用于块级元素和行内元素。

如果元素不定宽高，以上方法中第一种方法无法使用，但是前两种方法仍然适用：

flex 布局：使用 flex 布局，将父容器设置为 display: flex; align-items: center; justify-content: center;，子元素即可实现水平垂直居中。此时需要将子元素的 width 和 height 设为 100%或者 min-width 和 min-height 设为 0，以使子元素能够随着父元素的大小而自适应。
display: table-cell + vertical-align: middle：将元素设置为表格单元格，并将其 vertical-align 属性设置为 middle。此时需要将子元素的 display 设置为 inline-block 或 table-cell，以便它能够在表格单元格中显示，并且随着父元素的大小而自适应。

BFC（块级格式化上下文）是 CSS 中的一个重要概念，它是一个独立的渲染区域，具有一定的特性和约束条件。在 BFC 内部的元素按照一定规则进行排列和布局，不会影响到外部的元素。

BFC 的主要作用如下：

清除浮动：当一个元素浮动之后，它会脱离普通流并且可能会导致父容器高度塌陷。而当一个元素触发 BFC 时，它可以包含浮动的子元素并计算它们的尺寸。
防止边距重叠：当两个相邻元素的 margin 相遇时，它们之间的 margin 会合并为一个值。但是当一个元素触发 BFC 时，它的 margin 不会和相邻元素合并。
分属于不同的块级格式化上下文，互相独立，不会影响到其他元素。

BFC 的触发条件如下：

根元素或包含根元素的元素
浮动元素（float 不为 none）
绝对定位元素（position 为 absolute 或 fixed）
行内块元素（display 为 inline-block）
表格单元格（display 为 table-cell, table-caption, table-row）
弹性盒子元素（display 为 flex 或 inline-flex）
overflow 不为 visible 的块级盒子

触发 BFC 后，BFC 内部的元素按照一定规则进行排列和布局。具体来说，BFC 内部的元素会按照下列规则进行排列：

垂直方向上的距离由 margin 决定，同一个 BFC 内相邻两个块级元素之间的 margin 会发生重叠。
BFC 内部的所有元素从包含块的顶部开始放置，它们在垂直方向上一个接一个地放置。
浮动元素将被包裹在 BFC 内部，并不会影响到 BFC 外面的元素。

在 CSS 中，有以下几种方式可以隐藏页面元素：

display: none;：将元素设置为不显示，并且不占据页面任何空间。该方法隐藏的元素将无法通过 JavaScript 访问。
visibility: hidden;：将元素设置为不可见，但是仍会占据页面空间。该方法隐藏的元素仍然可以通过 JavaScript 访问。
opacity: 0;：将元素透明度设置为 0，使其不可见。该方法隐藏的元素仍然占据页面空间，但是可以通过 JavaScript 访问。
height: 0; width: 0; overflow: hidden;：使用这些属性将元素高度和宽度设置为 0，同时隐藏内容溢出的部分。该方法隐藏的元素仍然占据页面空间，可以通过 JavaScript 访问。
position: absolute; left: -9999px;：使用这些属性将元素移除屏幕外。该方法隐藏的元素仍然占据页面空间，可以通过 JavaScript 访问。

在具体应用时，我们需要根据需求选择适合的方式进行隐藏。display: none;将完全从 DOM 中删除被隐藏元素，对性能相对友好；visibility: hidden;将仅仅是视觉上隐藏但仍占据空间；opacity: 0;则是通过改变元素的透明度来实现隐藏；height: 0; width: 0; overflow: hidden;则是隐藏元素的内容以及溢出部分，但是占据空间；position: absolute; left: -9999px;则是将元素移动到屏幕外，但也仍然占据空间。

设备像素（physical pixel）：指的是物理硬件屏幕上的最小显示单元，也称为物理像素或点。设备像素是屏幕上可以看到的微小方块，每个方块都有自己的颜色值。

CSS 像素（CSS pixel）：指的是 CSS 中使用的逻辑单位，通常用于浏览器渲染 Web 页面。在大多数情况下，1 个 CSS 像素等于 1 个设备独立像素。

设备独立像素（device-independent pixel，也称为密度无关像素、逻辑像素或虚拟像素）：是一种基于 CSS 像素的视觉单位，与设备的物理性质无关。设备独立像素是浏览器和操作系统用来确定在各种分辨率和尺寸的设备上如何呈现 Web 页面的重要因素。

DPR（device pixel ratio）：设备像素与设备独立像素之间的比率，表示屏幕上一个 CSS 像素对应于几个设备像素。例如，如果一个设备的 DPR 为 2，那么 1 个 CSS 像素将对应于 4 个设备像素（2x2）。

PPI（pixels per inch）：每英寸的像素数，通常用于描述屏幕的分辨率。PPI 越高，屏幕的分辨率就越高，显示的图像就越清晰。

综上所述，设备像素是屏幕上的物理点，CSS 像素是逻辑单位用于浏览器渲染 Web 页面，设备独立像素是基于 CSS 像素的视觉单位，DPR 是设备像素和设备独立像素之间的比率，PPI 表示每英寸的像素数。在移动端开发中，我们通常通过控制 CSS 像素和设备像素之间的比率来实现高清屏幕的适配。

em、px、rem、vh 和 vw 都是 CSS 中用于设置长度或大小的单位。

px（像素）：最常用的单位，指定一个具体的像素数值。在不同设备上显示的尺寸可能会有所不同。
em（相对单位）：基于当前元素的字体大小计算，在不同环境下可能会有所不同。例如，如果当前元素的字体大小为 16px，那么 1em 就等于 16px；如果嵌套的子元素设置了字体大小为 1.2em，则相对于父元素来说，子元素的字体大小为 19.2px（1.2 x 16px）。
rem（根元素相对单位）：与 em 类似，但是它基于根元素的字体大小计算，即 html 元素的字体大小。这意味着 rem 的大小不会受到父元素的影响，更容易控制整个页面的尺寸。例如，如果 html 元素的字体大小为 16px，那么 1rem 就等于 16px；如果嵌套的子元素设置了字体大小为 1.2rem，则相对于 html 元素来说，子元素的字体大小为 19.2px（1.2 x 16px）。
vh（视口高度的百分比）：基于视口高度计算，1vh 等于视口高度的 1%。例如，如果视口高度为 1000px，那么 1vh 就等于 10px。
vw（视口宽度的百分比）：基于视口宽度计算，1vw 等于视口宽度的 1%。例如，如果视口宽度为 800px，那么 1vw 就等于 8px。

CSS 选择器包括以下几种：

元素选择器（element selector）
ID 选择器（ID selector）
类选择器（class selector）
属性选择器（attribute selector）
伪类选择器（pseudo-class selector）
伪元素选择器（pseudo-element selector）
后代选择器（descendant selector）
子元素选择器（child selector）
相邻兄弟选择器（adjacent sibling selector）
通用选择器（universal selector）

CSS 优先级按照以下顺序进行排序，从高到低：

!important 声明的样式
行内样式（即直接在 HTML 标签中使用 style 属性定义的样式）
ID 选择器
类选择器、属性选择器和伪类选择器
元素选择器和伪元素选择器
通配符选择器

可以继承的属性包括：

字体系列（font-family）
字体大小（font-size）
字体样式（font-style）
字体粗细（font-weight）
颜色（color）
行高（line-height）
文本缩进（text-indent）
文本对齐方式（text-align）
文本装饰（text-decoration）
垂直对齐方式（vertical-align）
opacity 属性
visibility 属性

盒子模型是指在网页布局中，HTML 元素被看作是一个矩形的盒子，该盒子由四个边框（border）、内边距（padding）和内容区域（content）组成。这些部分被称为盒子模型的属性。

每个盒子都有自己的宽度和高度，可以通过 CSS 来设置、修改和控制。边框决定了盒子的外观，内边距在内容区域和边框之间创建空白区域，而内容区域则包含了 HTML 元素的实际内容。

盒子模型在网页设计和布局中起着非常重要的作用，可以用于控制元素的位置、大小和间距等属性。同时，理解盒子模型也有助于更好地掌握 CSS 布局技能。

仓库地址：https://github.com/webVueBlog/WebGuideInterview

- Book Lists -