CSS知识点（三）

full-vh-css

1、CSS预处理器是什么

是扩展css功能的工具，允许开发者使用类似编程语言的语法（变量、嵌套、函数、混入、运算等）编写样式代码。预处理器会将这种扩展语法的代码编译成标准的css代码，然后在浏览器中正常使用。

常见的css预处理器

Sass / SCSS 、Less、Stylus。
为什么要用

提高代码的可维护性：使用变量和混入可以减少重复代码，使得样式的维护和修改更简单。

增强代码结构：嵌套语法能更直观地反映HTML结构，使得层次关系一目了然。

实现逻辑运算：预处理器支持条件判断、循环等，可以自动生成大量相似的样式，减少手写。

模块化开发：可以把css分成多个模块或者文件，然后通过编译工具合并成一个css文件。

2、css后处理器是什么

css生成后，对其进行进一步处理的工具。与预处理器不同，后处理器直接作用于标准Css文件，可以自动优化代码，处理兼容性问题，添加厂商前缀，转换现代css语法等。

常见的css后处理器

PostCss、Autoprefixer
为什么要用

自动添加浏览器前缀：不同浏览器对css某些属性的支持不同，后处理器可以自动添加必要的前缀，减少手动编写的错误风险。

代码优化和压缩：后处理器可以清理无用的代码，压缩样式文件，提高页面加载速度。

增强css语法：允许开发者使用未来的css特性或扩展语法，并在编译时转换兼容当前浏览器的代码。

统一处理兼容性问题：集中处理跨浏览器兼容性问题，降低开发和测试的复杂度。

3、::before 和 :after 的双冒号和单冒号有什么区别

在 CSS2 中，伪元素（例如 :before 和 :after）都是使用单冒号书写的；

而在 CSS3 规范中，为了明确区分伪类与伪元素，引入了双冒号语法，推荐使用 ::before 和 ::after。

除了 ::before 和 ::after，CSS3 还引入了一些其他常用的伪元素。以下是其中几个常见的 CSS3 伪元素：

::first-line：用于选中元素的第一行文本，可以对其应用特定的样式。
::first-letter：用于选中元素的第一个字母，可以对其应用特定的样式。
::selection：用于选中文本时的样式，例如文本的背景色和文本颜色等。
::placeholder：用于设置表单元素的占位符文本的样式，允许自定义占位符文本的颜色、字体等。

4、display:inline-block 什么时候会显示间隙

使用 display: inline-block 时，元素会以行内元素的形式排列，这就意味着它们会受到 HTML 中空白字符（如空格、换行、制表符）的影响，从而产生间隙。如果元素之间有空格、换行或者其他空白字符，这些空白字符会被浏览器解析为文本节点，并且默认会占据一定的宽度，从而在元素之间形成可见的间隙。

移除空白字符
将父容器的字体大小设置为0
为元素设置适当的负边距
使用 Flexbox 或 Grid 布局

5、单行、多行文本溢出隐藏

单行文本溢出

1
2
3

overflow: hidden;        /* 隐藏溢出内容 */
white-space: nowrap;     /* 强制文本在一行显示 */
text-overflow: ellipsis; /* 溢出时显示省略号 */

多行文本溢出

overflow: hidden;          /* 隐藏溢出内容 */
display: -webkit-box;      /* 使用伸缩盒布局 */
-webkit-box-orient: vertical; /* 垂直排列子元素 */
-webkit-line-clamp: 3;     /* 限制为最多显示 3 行 */

6、Sass、Less是什么？

css 预处理器扩展了css语言，使开发者能够使用类似编程语言的特性（变量、嵌套、混入、运算、条件和循环等）编写样式代码，预处理器编写的代码经过编译后生成标准css文件，供浏览器解析。

SCSS

文件后缀：.scss

// 变量定义
$primary-color:#3f51b5;
$margin:16px;

// 嵌套（直接嵌套选择器）
.container {
    color: $primary-color;
    margin: $margin;

    .item {
        padding: 10px;
        &:hover{
        	// 调用内置函数 lighten 来变亮颜色
            background-color: lighten($primary-color,10%);
        }
    }
}
// Mixin 定义：用 @mixin 定义一个可重用代码块
@mixin border-radius($radius){
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

// 使用 Mixin：用 @include 引入 mixin
.box {
    @include border-radius(5px);
}

Sass 缩进语法

文件后缀：.sass

省略大括号和分号，完全依赖缩进来表示层级关系，语法更简洁。

// 变量定义
$primary-color: #3498db
$margin: 16px

// 嵌套（依赖缩进表示层级）
.container
  color: $primary-color
  margin: $margin
  .item
    padding: 10px
    &:hover
      background-color: lighten($primary-color, 20%)

// Mixin 定义：用 "=" 或 "@mixin" 定义（早期常用 "="，新版本也支持 @mixin）
=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius: $radius
  border-radius: $radius

// 使用 Mixin：用 "+" 引入 mixin（如果用 "=" 定义）或者 @include（如果用 @mixin 定义）
.box
  +border-radius(10px)

Less

// 使用 @ 符号定义变量
@primary-color: #3498db;
@margin: 16px;

.menu {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    li {
      display: inline-block;
    }
  }
// Less 中的 Mixin 可以看作普通的类或者定义的代码块，它既可以无参数也可以有参数。
.center(){
    text-align: center;
}

.border-radius(@radius){
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}


.box {
    .center();
    .border-radius(10px);
  }

@width: 100px;
.box {
width: @width + 20px;
}

7、对媒体查询的理解

根据设备的特性（如屏幕尺寸、分辨率、方向等）动态的应用不同的样式规则。

实现响应式设计的核心工具，可以确保网页在各种设备（手机、平板、桌面）上都有良好的显示效果和用户体验。

1
2
3

@media (媒体类型) and (媒体特性) {
  /* 样式规则 */
}

媒体类型：例如 screen（屏幕）、print（打印）、all（适用于所有设备）。

媒体特性：检测设备的具体属性，例如宽度、高度、分辨率等。

常见的媒体特性

1、宽度和高度

width / height：视口宽度或高度。
min-width / max-width：设置最小或最大宽度。
常用于响应式布局，根据屏幕宽度调整样式。

2、设备方向

orientation：检测设备的方向，值为 portrait（纵向）或 landscape（横向）。

3、分辨率

resolution：检测设备的分辨率（例如 DPI）。
常用于针对高分辨率设备（如 Retina 屏幕）优化图像显示。

4、宽高比

aspect-ratio：检测屏幕宽高比。
例如 min-aspect-ratio: 16/9，可用于适配超宽屏设备。

实际应用

1、响应式设计

body {
  font-size: 16px;
}

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

2、调整图片和资源（针对高分辨率设备加载更高质量的图片）

@media (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
  }
}

3、支持深色模式(使用 prefers-color-scheme 检测用户的系统配色偏好)

@media (prefers-color-scheme: dark) {
  body {
    background-color: #333;
    color: #fff;
  }
}

8、对 CSS 工程化的理解

在大型或者复杂的项目中，为了解决传统CSS随着代码规模增长而产生的问题（样式冲突、难以维护、低复用性等，引入工程化的方法和工具来优化CSS的开发、组织和维护、协作。

CSS 工程化是为了解决以下问题：

规范化和模块化：CSS 代码如何组织、如何拆分、模块结构怎样设计？

将样式按功能或页面模块拆分，分离每个模块的作用域。

CSS Modules：通过工具为每个样式添加唯一标识，避免全局冲突。

组件化样式：在 React、Vue 等框架中，每个组件维护自己的样式文件。

目录结构设计。

src/
├── styles/
│   ├── base.css    // 基础样式（如 reset 样式）
│   ├── variables.css // 变量、主题定义
│   ├── layout.css  // 通用布局
│   ├── components/ // 组件样式
│   │   ├── button.css
│   │   └── card.css
│   └── pages/      // 页面样式
│       ├── home.css
│       └── about.css

BEM命名规范

1
2
3

.card { /* Block */ }
.card__title { /* Element */ }
.card--highlighted { /* Modifier */ }

编码优化：怎样写出更好的 CSS？

No Repeat：利用 CSS 变量和混入减少样式重复

:root {
  --primary-color: #007bff;
}
button {
  background-color: var(--primary-color);
}

预处理器优化

$primary-color: #007bff;
button {
  background-color: $primary-color;
}

避免过度嵌套的选择器

/* 不推荐 */
.header .nav .menu .item a {
  color: red;
}

/* 推荐 */
.menu-item a {
  color: red;
}

构建：如何处理我的 CSS，才能让它的打包结果最优？

重要的工程化插件： PostCss、Webpack loader 等

自动添加浏览器前缀

压缩和合并 CSS

支持按需加载

移除未使用的 CSS

预加载关键 CSS：将关键路径样式内联到 HTML 中，提高首屏加载性能
可维护性：代码写完了，如何最小化它后续的变更成本？如何确保任何一个同事都能轻松接手？

使用 Stylelint 检查 CSS 代码风格，避免不一致。

文档化。

样式文件和代码一起使用 Git 管理。

定期进行样式代码审查，确保符合团队规范。

？ PostCss是如何工作的
PostCSS 是一个 CSS 处理工具，它本质上是一个插件运行平台，可以通过插件对 CSS 进行各种处理，比如自动添加前缀、代码压缩、语法转换等。

PostCSS 的核心工作原理:CSS 文件 -> 抽象语法树（AST） -> 插件处理 -> 生成 CSS 文件。

PostCSS 首先将 CSS 转换为 抽象语法树（AST），这个结构化的数据表示了 CSS 的内容和结构。将生成的 AST 交给各个插件进行处理。例如：Autoprefixer 会在 AST 中找到需要添加浏览器前缀的属性。CSSNano 会对 AST 进行压缩优化。处理完成后，PostCSS 将修改过的 AST 转换回普通的 CSS 文件输出。

PostCSS 本身不处理任何 CSS，它的强大功能完全依赖插件。常见的插件包括：
- Autoprefixer：自动添加浏览器前缀。
- cssnano：压缩和优化 CSS 文件。
- PurgeCSS：移除未使用的 CSS。
？ Webpack如何处理CSS的

Webpack 通过 css-loader 和 style-loader 等加载器处理 CSS 文件。

Webpack 处理 CSS 的核心流程：

读取 CSS 文件
使用 css-loader 将 CSS 文件解析为 JavaScript 可理解的模块内容。

将 CSS 内容注入到页面中
使用 style-loader 或 MiniCssExtractPlugin，将解析后的 CSS 内容注入到页面中。

支持预处理器
使用 sass-loader、less-loader 或 postcss-loader 处理 SASS、LESS 或 PostCSS 文件。

优化打包结果
在生产环境中，Webpack 会通过压缩和移除无用 CSS，优化最终的输出文件。

9、如何判断元素是否到达可视区域

以图片显示为例：

window.innerHeight 是浏览器可视区的高度；
document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离；
imgs.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离）；
内容达到显示区域的：img.offsetTop < window.innerHeight + document.body.scrollTop;

10、z-index属性在什么情况下会失效

z-index属性：控制元素的堆叠顺序（层级）

元素必须设置定位属性：例如 relative、absolute、fixed 或 sticky。
层叠上下文的概念：某些 CSS 属性（如 transform、opacity、filter 等）会创建新的层叠上下文，使得在不同上下文中的元素无法互相比较 z-index。
父元素限制：子元素的 z-index 仅在其所在的层叠上下文内有效，即使子元素 z-index 数值很大，也不能超越父元素所在上下文的整体层级。
特殊情况：
- display: none 的元素不会展示，自然 z-index 也无效。
- 某些内联元素可能需要转换为块级元素或添加定位属性才能正确应用 z-index。
- 例如 iframe 会创建独立的层叠上下文，需要特殊处理。
浏览器默认层叠规则

即使没有 z-index，浏览器也有默认的堆叠规则，以下是堆叠顺序的规则（从低到高）：

背景和边框（不受 z-index 影响）。
正常的流式内容。
浮动元素（float）。
定位元素（position: relative/absolute/fixed）。
设置了 z-index 的元素。

CSS

#预处理器 #伪元素 #行内块元素的间隙 #文本溢出隐藏 #Sass和Less #媒体查询 #CSS工程化 #元素可视区域 #z-index有效条件

页面布局上一篇

CSS知识点（二）下一篇