CSS 问题笔记

Flex布局

Flexbox（Flexible Box Layout）是一种用于在网页布局中分配空间并对齐内容的CSS布局模式。与传统的布局方式（如 float 或 inline-block）相比，Flexbox 更加灵活且易于控制，特别适合用于创建复杂的布局结构。

基本概念

Flexbox布局涉及两个主要的元素：

Flex 容器（Flex Container）：包含 Flex 子元素的父元素。可以通过设置 display: flex; 或 display: inline-flex; 将一个元素定义为 Flex 容器。
Flex 项目（Flex Items）：容器内的子元素，它们将按照 Flexbox 布局规则排列。

主要属性

Flexbox 布局中有几个关键的属性来控制容器和项目的行为：

容器属性

display：
- display: flex;：定义一个块级的 Flex 容器。
- display: inline-flex;：定义一个内联级的 Flex 容器。
flex-direction：
- 决定 Flex 项目的主轴方向（项目的排列方向）。
- 可能的值：
  - row（默认值）：主轴为水平方向，项目从左到右排列。
  - row-reverse：主轴为水平方向，项目从右到左排列。
  - column：主轴为垂直方向，项目从上到下排列。
  - column-reverse：主轴为垂直方向，项目从下到上排列。
justify-content：
- 决定项目在主轴上的对齐方式。
- 可能的值：
  - flex-start（默认值）：项目从主轴的起点开始。
  - flex-end：项目从主轴的终点开始。
  - center：项目居中对齐。
  - space-between：项目在主轴上平均分布，第一个项目在起点，最后一个项目在终点。
  - space-around：项目在主轴上平均分布，每个项目两侧的间距相等。
align-items：
- 决定项目在交叉轴（与主轴垂直的方向）上的对齐方式。
- 可能的值：
  - flex-start：项目在交叉轴的起点对齐。
  - flex-end：项目在交叉轴的终点对齐。
  - center：项目在交叉轴上居中对齐。
  - baseline：项目的基线对齐。
  - stretch（默认值）：项目在交叉轴上拉伸以填满容器（如果未设置高度）。
flex-wrap：
- 决定当 Flex 容器内空间不足时，项目是否换行。
- 可能的值：
  - nowrap（默认值）：所有项目保持在一行内。
  - wrap：项目按行排列，当一行空间不足时换到下一行。
  - wrap-reverse：与 wrap 类似，但换行的顺序反向。
align-content：
- 用于在多行布局中对齐各行。
- 可能的值与 align-items 类似，但它作用于多行布局。

项目属性

flex-grow：
- 定义项目的增长因子，即当存在剩余空间时，项目如何分配这些空间。
- 默认值为 0（不增长），可以设置为正数，值越大，分配的空间越多。
flex-shrink：
- 定义项目的缩小因子，即当空间不足时，项目如何缩小。
- 默认值为 1，可以设置为正数，值越大，项目缩小得越多。
flex-basis：
- 定义项目在主轴方向上的初始大小。
- 可以是长度单位（如 px, em, %）或 auto。
align-self：
- 允许单个项目覆盖容器的 align-items 属性，控制该项目在交叉轴上的对齐方式。
- 可能的值与 align-items 相同，如 flex-start，flex-end，center，baseline，stretch。

可见性和布局的比较

属性	是否可见	占据空间	响应事件	适用场景
`opacity: 0`	否	是	是	动画效果，保留布局和交互
`visibility: hidden`	否	是	否	保留布局，但不交互
`display: none`	否	否	否	完全隐藏元素，移除布局

使用建议

opacity: 0：适用于需要隐藏元素但仍希望其保留在布局中且可响应事件的场景，如动画效果。只会导致单个元素重绘，消耗较小。
visibility: hidden：适用于隐藏元素但需要保留其布局空间的场景，不希望元素参与交互。只会导致单个元素重绘，消耗较小。
display: none：适用于需要彻底移除元素并不保留其布局空间的场景，如切换视图或动态移除元素。改变会导致文本回流，性能开销比较大。

继承属性

opacity: 0：子元素继承透明度，所有元素不可见但仍然占据空间并响应事件。可以用于需要保留布局和交互的情况。

visibility: hidden：子元素继承不可见性，但仍然占据空间且不会响应事件。可以通过子元素单独设置 visibility: visible 来覆盖继承的不可见性。

display: none：子元素不会继承这一属性，但它们随着父元素一起从文档流中移除，不占据空间也不响应事件。适用于需要彻底隐藏父元素及其所有子元素的情况。

粘性布局 Sticky

粘性布局（Sticky Layout）是CSS中一种用于定位元素的布局方式，通过position: sticky;来实现。它结合了相对定位和固定定位的特性，使得元素在页面滚动时可以保持在特定位置，直到它到达指定的阈值位置后，再随着页面的滚动而滚动。这种布局方式非常适合在页面滚动时，让元素（如导航栏、标题等）在视口中保持可见。

工作原理

position: sticky; 的行为主要依赖于两个因素：

滚动容器：sticky 元素的粘性定位是相对于最近的可滚动祖先元素（通常是overflow设置为auto或scroll的元素）或视口的。
粘性阈值（阈值位置）：通过 top、right、bottom、left 等属性设置粘性元素的粘性阈值。当页面滚动使得元素触及这个阈值时，元素会“粘住”在这个位置，并在超过阈值后继续随页面滚动。

例子

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Layout Example</title>
<style>
  .container {
    height: 1500px;
    padding: 10px;
  }

  .sticky-header {
    position: sticky;
    top: 0; /* 当滚动到距离顶部 0 的位置时，元素将粘性定位 */
    background-color: lightblue;
    padding: 10px;
    font-size: 20px;
  }

  .content {
    margin-top: 10px;
    height: 1300px;
    background-color: lightcoral;
  }
</style>
</head>
<body>

<div class="container">
  <div class="sticky-header">我是一个粘性标题</div>
  <div class="content">滚动内容区域...</div>
</div>

</body>
</html>

在这个例子中，当页面滚动时，.sticky-header 元素会在接近视口顶部时“粘住”，保持在视口顶部，直到其容器的底部滚出视口。

粘性布局的优点

用户体验：粘性布局可以帮助用户在长页面上更方便地访问固定内容，比如导航栏或提示信息。
简单易用：只需几行CSS代码就可以实现复杂的固定效果，而不需要借助JavaScript或其他手段。
灵活性：通过设置不同的 top、bottom、left、right 等属性，粘性布局可以应用于各种不同的场景，比如固定在顶部、底部或侧边。

注意事项

浏览器支持：position: sticky; 得到广泛的浏览器支持，但在某些旧版本的浏览器中可能不完全支持。
父容器的 overflow 设置：如果父容器的 overflow 属性设置为 hidden、scroll 或 auto，sticky 元素的行为可能会受到影响。
粘性元素的大小：粘性元素不能超出其滚动容器的边界。如果 sticky 元素的高度超过其容器的高度，粘性效果可能无法正常工作。

使用场景

固定导航栏：在长页面中，保持导航栏在视口顶部，方便用户随时访问不同部分。
浮动提示：在特定内容旁边显示浮动提示信息，当页面滚动时，提示信息依然可见。
表格标题：在大表格中，保持表头在视口顶部，方便用户查看数据。

粘性布局在需要保持元素在视口内固定显示的场景中非常有用，简化了许多UI设计需求，且实现起来相对简单。

CSS3 新增内容

CSS3 是 CSS 的一个重要更新版本，引入了大量的新特性和模块，使得网页设计和开发更加灵活和强大。以下是 CSS3 中新增的一些主要功能和特性：

1. 选择器

CSS3 引入了更多强大的选择器，使得开发者可以更精确地选择 DOM 元素。

属性选择器：可以根据属性及其值来选择元素。
- [attr]：选择具有指定属性的元素。
- [attr=value]：选择具有指定属性且属性值等于某个值的元素。
- [attr^=value]：选择属性值以某个值开头的元素。
- [attr$=value]：选择属性值以某个值结尾的元素。
- [attr*=value]：选择属性值包含某个值的元素。
伪类选择器：
- :nth-child()：选择属于父元素的第 N 个子元素。
- :nth-of-type()：选择属于父元素的特定类型的第 N 个子元素。
- :first-child、:last-child：选择父元素的第一个或最后一个子元素。
- :not(selector)：选择所有不匹配某个选择器的元素。

2. 媒体查询

媒体查询使得响应式设计成为可能，允许根据不同的设备和视口尺寸应用不同的样式。

css
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

3. 动画与过渡

CSS3 引入了动画和过渡效果，使得网页交互更加生动和动态。

过渡（Transitions）：
- 允许属性值的变化在一定时间内平滑地过渡。
```
css
div {
  transition: background-color 0.5s ease;
}
```

动画（Animations）：

通过定义关键帧（@keyframes），可以实现复杂的动画效果。

css
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

div {
  animation: example 5s infinite;
}

4. 布局模块

CSS3 增加了几种强大的布局模型，使布局更加灵活和简便。

Flexbox：
- 用于一维布局，特别适合处理动态或未知大小的项目。
```
css
.container {
  display: flex;
  justify-content: space-between;
}
```

Grid Layout：

用于二维布局，允许在行和列之间创建复杂的布局。

css
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

5. 边框与背景

CSS3 提供了更多关于边框和背景的选项，使得设计更加多样化。

边框半径（border-radius）：
- 允许创建圆角边框。
```
css
div {
  border-radius: 10px;
}
```
背景图像（background-image）的增强：
- 允许设置多重背景。
```
css
div {
  background-image: url(image1.png), url(image2.png);
}
```

渐变（Gradients）：

允许创建线性渐变和径向渐变。

css
div {
  background: linear-gradient(to right, red, yellow);
}

6. 文本效果

CSS3 增加了许多新的文本样式和效果。

阴影（Text Shadow）：
- 允许给文本添加阴影效果。
```
css
h1 {
  text-shadow: 2px 2px 5px grey;
}
```

字体（@font-face）：

允许使用自定义字体。

css
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff');
}

body {
  font-family: 'MyFont', sans-serif;
}

7. 多列布局

CSS3 引入了多列布局，允许将文本分成多列排列。

css
div {
  column-count: 3;
  column-gap: 20px;
}

8. 用户界面样式

CSS3 提供了更多控制用户界面的样式选项。

box-sizing：控制如何计算元素的宽度和高度。
```
css
div {
  box-sizing: border-box;
}
```
resize：允许用户调整元素的大小。
```
css
textarea {
  resize: both;
}
```
outline：用于绘制围绕元素的轮廓线，与 border 不同，不占据空间。
```
css
div {
  outline: 2px solid blue;
}
```

9. 色彩和不透明度

CSS3 引入了 rgba() 和 hsla() 颜色模式以及 opacity 属性，支持更复杂的色彩和透明度效果。

rgba()：定义具有透明度的 RGB 颜色。

css
div {
  background-color: rgba(255, 0, 0, 0.5);
}

opacity：设置元素的不透明度。
```
css
div {
  opacity: 0.5;
}
```

10. 新伪类与伪元素

CSS3 引入了更多伪类和伪元素，增强了对 DOM 元素的选择和操作。

伪类：
- :nth-child()、:nth-last-child()、:first-of-type、:last-of-type 等。
伪元素：
- ::before、::after：可以在元素内容的前后插入内容。

z-index失效

以下情况会造成z-index失效：

父元素是relative
position是static
使用了float

CSS加载与阻塞

CSS加载不会阻塞dom树的解析
CSS加载会阻塞dom树的渲染
CSS加载会阻塞后面JS语句的执行

为了提高加载速度，可以有以下解决方法：

使用CDN
压缩CSS
合理使用缓存 cache-control expires e-tag
减少http请求数（合并CSS或者写成内联式）

浏览器渲染流程

HTML解析，生成DOM树。解析CSS文件，生成CSS DOM树
将DOM树和CSS DOM树结合生成RENDER树。
根据RENDER树进行渲染绘制。

DOM解析和CSS解析是两个并行的过程。RENDER树是依赖于CSS DOM树的，因此它会被CSS解析阻塞。

目录