CSS 概念 - 您唯一需要的指南

我在这里只是总结一下我的 CSS 学习计划，你的关注将是我更新的动力。希望它也能帮助你加深对 CSS 的理解。欢迎随时查看我的其他内容（定期更新）。

目录

1. CSS 选择器优先级
2. CSS 中可继承和不可继承的属性
3. display 的 block、inline 和 inline-block 的区别
4. 如何隐藏元素
5. link 和 @import 的区别
6. 过渡和动画
7. 伪类和伪元素
8. 怎么理解requestAnimationframe
9. 内容框 vs 边框框
10. 为什么用 Translate() 移动元素比用position:absolute Top/left 更好
11.如何理解 CSS Sprites
12.优化 CSS 性能的措施有哪些
13.为什么要使用 CSS 预处理器和后处理器
14.如何判断一个元素是否已经出现在我们的视口中
15.理解媒体查询
16.什么时候 z-index 不起作用
17.CSS 布局单元
18.如何实现两列布局
19.如何实现三列布局
20.水平和垂直居中
21.理解弹性盒模型
22.响应式设计
23.定位与浮动

其他内容

HTML - 您唯一需要的指南（进行中）
React 概念第 1 部分 - 您唯一需要的指南
React 概念第 2 部分 - 您唯一需要的指南
浏览器概念 - 您唯一需要的指南
Web 优化概念 - 您唯一需要的指南
计算机网络概念 - 您唯一需要的指南

1. CSS 选择器优先级

CSS 选择器的优先级分为几个不同的类别，每个类别都有不同的权重。我们可以通过将所有选择器的权重相加来计算出实际的优先级。

• 事实上，如果您使用 !important 规则，它将覆盖该元素上该特定属性的所有先前的样式规则！

p {
  background-color: red !important;
}

• 如果应用的两种样式具有相同的优先级，则将选择后者。

2. CSS 中的可继承属性和不可继承属性

1. 不可继承的财产

• 展示

• 文本属性： vertical-align、text-decoration、text-shadow、white-space、unicode-bidi

• 盒子模型属性： width、height、margin、border、padding

• 背景属性： background、background-color、background-image、background-repeat、background-position、background-attachment

• 位置属性： float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

• 生成内容属性： content、counter-reset、counter-increment

• **轮廓样式属性：**outline-style、outline-width、outline-color、outline

• 页面样式属性： size、page-break-before、page-break-after

• 音频样式属性： pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

2. 可继承属性

• 字体属性：font-family、font-weight、font-size、font-style

• 文本属性：text-indent、text-align、line-height、
  word-spacing、letter-spacing、text-transform、color。

• 能见度

• 列表布局属性：list-style

• 光标

3. display的block、inline、inline-block的区别

• block：块元素从新行开始，并占据所有可用宽度。这意味着块元素将占据其父元素的整个宽度。

• inline：将元素显示为行内或同一行。换句话说，内联元素不会另起一行，并且仅占用其内容的宽度。

• inline-block：本质上与 inline 相同，只是您可以设置高度和宽度值。

4. 如何隐藏元素

• display: none：该元素不会被渲染，因此不会占用页面的任何空间，并且不会触发绑定在该元素上的事件。

• visibility: hidden：该元素仍将保留在页面中，并将响应事件。

• opacity: 0：设置元素的透明度为0，作用与visibility: hidden相同

• 位置：绝对：使用绝对位置将元素移到视口之外。

• z-index：负值：使用其他元素完全覆盖它。

• transform: scale(0,0)：将元素尺寸缩放为0,0，该元素仍会存在于页面中，但是不会监听绑定的事件。

5. link 和@import有什么区别

它们都用于引用外部 CSS 文件。

• link 是一个 html 标签，它不仅可以加载 css 文件，还可以加载其他内容。而@import则只能加载 css。

• link可以在网页加载的同时加载css，@import只能在网页加载完成后才可以加载css。

• Javascript 可以通过访问 DOM 来改变链接属性，@import不支持这种方式。

6.过渡和动画

• 过渡：要实现过渡，元素必须改变状态，并且必须为每个状态指定不同的样式。确定不同状态样式的最简单方法是使用:hover, :focus, :active, and :target pseudo-classes。

• 动画：当需要更多控制时，过渡需要具有多个状态。因此，我们需要动画。它不需要由任何事件触发，并且可以循环播放。我们可以使用@keyframe设置多个关键帧点

7.伪类和伪元素

伪类在选择器序列中充当简单选择器，从而根据非表现特征对元素进行分类，伪元素创建新的虚拟元素。

8. 如何理解requestAnimationframe

JavaScript 中曾经只有一种定时循环方法：setInterval()。如果你需要快速重复某些操作（但不像 for 循环那样尽可能快），就可以使用 setInterval()。为了达到动画效果，目标是每秒 60 帧才能显得流畅，所以你可以像这样运行循环：

setInterval(function() {
  // animiate something
}, 1000/60);

现在有一个更好的方法，使用requestAnimationframe

window.requestAnimationFrame() 方法告诉浏览器您希望执行动画，并请求浏览器在下次重绘之前调用指定的函数来更新动画。该方法接受一个回调函数作为参数，在重绘之前调用。

如果您想在下次重绘时为另一帧添加动画，回调例程本身必须再次调用 requestAnimationFrame()。requestAnimationFrame() 是单次触发的。回调次数通常为每秒 60 次。

*有哪些优势 *

• 节省 CPU 资源：使用 SetTinterval 实现的动画，当页面隐藏或最小化时，SetTinterval 仍然会在后台执行动画任务。由于此时页面处于不可见或不可用状态，刷新动画毫无意义，完全浪费 CPU 资源。

而 RequestAnimationFrame 则完全不同，当页面处理未激活时，页面的屏幕刷新任务也会被系统暂停，因此跟随其后的 RequestAnimationFrame 也会停止渲染，而当页面被激活时，动画会停留在上次执行的位置，无论在何处继续执行，有效节省 CPU 开销。

• Throttling：在高频事件（resize、scroll等）中，为了防止一个刷新间隔内执行多次函数，RequestAnimationFrame 可以保证每个刷新间隔内该函数只执行一次，这样既保证流畅度，也能更好地节省函数执行的开销。当一个刷新间隔内多次执行该函数时就没意义了，因为大多数显示器每16.7ms刷新一次，多次绘制并不会体现在屏幕上。

如何将 requestAnimationFrame 限制到特定的帧速率

• 减少 DOM 操作：requestAnimationFrame 将收集每一帧中的所有 DOM 操作，并在一次重绘中完成

为什么我们不应该使用它setTimeout来控制动画：

• 由于setTimeout是异步任务，所以只有在所有同步任务完成后才会执行，所以总是存在时间延迟。

• 其固定时间段不会与屏幕刷新率完全匹配，从而导致丢帧。

9. 内容框 vs 边框框

• content-box：元素的宽度和高度仅包含内容。换句话说，border、padding 和 margin 不包含在宽度或高度中。这是默认值。

• border-box：宽度和高度中包含padding和border。

10. 为什么使用 Translate() 移动元素比使用 Position:absolute Top/left 更好

Translate 是 transform 属性中的一个方法。更改 transform 或 opacity 不会触发浏览器重排和重绘，只会触发合成。

然而，改变绝对定位会触发重新布局，从而引发重新绘制和合成。transform操作会要求浏览器为元素创建一个GPU层，而改变绝对定位则会占用CPU。因此，translate()更高效，可以缩短流畅动画的绘制时间。当translate改变位置时，元素仍然占据其原始空间，而绝对定位则不会发生这种情况。

11.如何理解CSS Sprites

CSS Sprites 是一种将多幅图像组合成一个图像文件以供网站使用，从而提高性能的方法。

我们可以使用 background-image、background-repeat、background-position
来定位图像。

优点：

• 它可以最大限度地减少客户端从服务器检索图像资源所需的 http 请求。

• 将多幅图像合并成一幅也会减小图像尺寸

缺点：

• 要求对每幅图像的尺寸进行精确测量。

• 当图像的某些部分发生变化时，我们必须编辑组合后的图像。

12.优化CSS性能的措施有哪些

• 装载性能：

1. 压缩 CSS 文件以减小文件大小

2. 使用单个 CSS 属性而不是简写属性

3. 不要使用@import，而是使用 link

• 选择器：

1. 使用键选择器而不是后代组合器，因为后者将遍历树上的所有后代。

2. 使用 ID 选择器时，不要添加不必要的选择器

3. 不要使用 * 选择器

4. 使用类选择器代替 HTML 标签选择器

5. 避免重复为元素分配样式，利用可继承的属性。

• 渲染性能：

1. 谨慎使用浮动和定位，因为它们会消耗大量资源。

2. 避免频繁重新渲染

3. 高效使用 CSS spirte

13.为什么要使用 CSS 预处理器和后处理器

• css 预处理器：less、sass、stylus

• 后处理器：postCss

使用原因：

• 使得CSS结构清晰，易于扩展。

• 可以轻松避免不同浏览器的语法差异。

• 可以轻松实现多重继承。

• 完美兼容CSS代码，可应用于旧项目。

14.如何判断元素是否已经出现在我们的视口中

• window.innerHeight是视口高度

• document.body.scrollTop|| document.documentElement.scrollTop 是浏览器滚动的距离。

• imgs.offsetTop是元素顶部到文档顶部的距离

如果 img.offsetTop < window.innerHeight + document.body.scrollTop` || document.documentElement.scrollTop 则表示 img 已经出现在视口中。

15.了解媒体查询

CSS3 中的媒体查询扩展了 CSS2 媒体类型的思想：它们不再查找设备类型，而是查找设备的功能。

媒体查询可用于检查许多事情，例如：

视口的宽度和高度
设备
方向的宽度和高度（平板电脑/手机是横向还是纵向模式？）
分辨率
使用媒体查询是一种流行的技术，可以向台式机、笔记本电脑、平板电脑和移动电话（如 iPhone 和 Android 手机）提供定制的样式表。

16.z-index 什么时候不起作用

z-index 属性仅适用于位置值不是静态的元素（例如，position: absolute;、position:relative; 或position:fixed）。

如果出现以下情况，它将无法正常运行：

• 父容器的位置是相对的

• 具有 z-index 的元素也已设置为 float

17.CSS布局单元

CSS 单元可分为以下类别：

• 绝对单位

• 字体相对单位

• 视口相对单位

绝对单位：

某些单位取决于某些绝对值，不受屏幕尺寸或字体的影响。这些单位的显示可能会因不同的屏幕分辨率而异，因为它们取决于屏幕的 DPI（每英寸点数）。

这些单位是：

• px（像素）
• 英寸
• cm（厘米）
• mm（毫米）
• 个人计算机（派卡）
• pt（点）

字体相对单位：

有些单位取决于文档或其父级元素的字体大小或字体系列。这些单位包括：

• em
• 雷姆
• 前任
• ch

视口相对单位：

有一些单位取决于视口的高度和宽度大小，例如：

• vh（视口高度）
• vw（视口宽度）
• vmin（视口最小值）
• vmax（视口最大值）

百分比(%)单位不属于上述任何类别。

18.如何实现两列布局

两列布局通常是指左列宽度固定、右列自动填充的布局

1.将左侧元素向左浮动，设置宽度为200px，将右侧元素的margin-left设置为左侧元素的宽度。

.outer {
height: 100px;
}
.left {
float: left;
width: 200px;
background: tomato;
}
.right {
margin-left: 200px;
width: auto;
background: gold;
}

2. 使用绝对定位，在此之前，我们必须将父容器的position属性设置为非静态的。然后将左侧元素的position设置为绝对定位，宽度设置为200px。接下来将右侧元素的margin-left设置为200px。

.outer {
position: relative;
height: 100px;
}
.left {
position: absolute;
width: 200px;
height: 100px;
background: tomato;
}
.right {
margin-left: 200px;
background: gold;
}

3.使用弹性布局，设置左侧元素宽度为200px，设置右侧元素弹性属性为1

.outer {
display: flex;
height: 100px;
}
.left {
width: 200px;
background: tomato;
}
.right {
flex: 1;
background: gold;
}

19.如何实现三列布局

三列布局是指左右元素宽度固定，中间元素自动填充空隙。

1. 使用绝对定位，将左侧元素设置为特定宽度。将右侧元素的 top 和 right 属性设置为 0，使其紧贴容器的右侧。最后，将居中元素的 margin-left 和 margin-right 设置为左​​侧元素和右侧元素各自的宽度。

`.outer {
位置：相对；
高度：100px；
}

.left {
位置：绝对；
宽度：100px；
高度：100px；
背景：番茄；
}

.right {
位置：绝对；
顶部：0；
右侧：0；
宽度：200px；
高度：100px；
背景：金色；
}

.center {
左边距：100px；
右边距：200px；
高度：100px；
背景：浅绿色；
}`

2.使用弹性布局，设置左右元素固定宽度，让居中元素的flex: 1

`.outer {
显示：flex；
高度：100px；
}

.left {
宽度：100px；
背景：番茄；
}

.right {
宽度：100px；
背景：金色；
}

.center {
flex：1；
背景：浅绿色；
}`

20.水平和垂直居中

• 使用绝对定位，将 left 和 top 设置为 50%，这样元素的左角就会出现在元素的中心。使用 transform 调整子元素的中心点，使其与父元素的中心点一致。

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

• 使用弹性布局，设置 align-items:center 和 justify-content:center

.parent {
display: flex;
justify-content:center;
align-items:center;
}

21.理解弹性盒模型

Flex 是 CSS display 属性新增的一个值。它与 inline-flex 一起使用，使应用该属性的元素成为弹性容器，并使该元素的每个子元素成为弹性项目。这些弹性项目随后参与弹性布局，并且可以应用 CSS 弹性盒布局模块中定义的所有属性。
在 MDN 获取实践经验

22.响应式设计

响应式网页设计就是网站可以兼容多种终端，而不需要为每个终端制作一个特定的版本。

基本原理是使用媒体查询（@media）查询来检测不同设备屏幕尺寸进行处理。

关于兼容性：页面标题必须具有由 meta 声明的视口。

<meta name="’viewport’" content="”width=device-width," initial-scale="1." maximum-scale="1,user-scalable=no”"/>


23. 位置与浮动

阅读 BFC 文档以继续

块格式化上下文 (BFC) 是网页 CSS 可视化渲染的一部分。它是块框布局发生的区域，也是浮动元素与其他元素交互的区域。
格式化上下文会影响布局，但通常情况下，我们会创建一个新的 BFC 来定位和清除浮动元素，而不是更改布局。这是因为创建了新 BFC 的元素会：

包含内部浮动。
排除外部浮动。
抑制边距折叠。

进行中...

进行中...