1 412 779 字 - CSS

CSS（Cascading Style Sheets）是一种用于描述文档样式的语言。通过CSS，可以将文档中的结构和内容与它的表现（如布局、颜色、字体等）分离开来。

基础知识

语法

CSS 由选择器、属性和属性值组成。选择器用于选中要修改样式的元素，属性和属性值用于描述元素的样式。例如：

p {
    font-size: 16px;
    color: #333;
}

这个例子中，p 是选择器，font-size 和 color 是属性，16px 和 #333 是属性值。

盒子模型

CSS 中，每个元素都被视为一个矩形的盒子，这就是盒子模型。盒子模型包括四个部分：内容区域、内边距、边框和外边距。

样式可以应用到盒子模型的各个部分，例如给一个元素添加内边距：

div {
    padding: 10px;
}

浏览器渲染顺序

当浏览器渲染一个页面时，它会按照下面的顺序处理 HTML 和 CSS：

1. 解析 HTML，构建 DOM 树；
2. 解析 CSS，构建 CSSOM 树；
3. 将 DOM 树和 CSSOM 树合并，生成渲染树；
4. 根据渲染树生成布局，计算每个元素的大小和位置；
5. 进行绘制，将元素渲染成页面上的像素。

进阶知识

相对长度单位

CSS 中有很多相对长度单位，例如 em、rem、vw、vh 等等。相对长度单位可以帮助我们实现响应式布局，让页面在不同设备上显示更加一致。

h1 {
    font-size: 2em;
}

p {
    font-size: 1.2rem;
}

.container {
    width: 80vw;
    height: 50vh;
}

在上面的例子中，em 和 rem 是相对于元素本身的字体大小计算的，vw 和 vh 是相对于视口宽度和视口高度计算的。

Flexbox 布局

Flexbox 是一种用于在容器中进行弹性布局的 CSS 模块。它可以让我们轻松地实现水平居中、垂直居中和等高布局等特性。

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

.item {
    flex: 1;
}

在上面的例子中，.container 是一个 Flex 容器，justify-content 和 align-items 属性用于控制 Flex 元素在容器中的排列方式，flex 属性用于控制 Flex 元素的尺寸，从而实现等高布局。

CSS Grid 布局

CSS Grid 是一种二维布局系统，可以让我们快速实现复杂的网格布局。它可以让我们将容器划分为行和列，并让元素沿着这些行和列布局。

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

.item {
    grid-column: span 2;
}

在上面的例子中，.container 是一个 Grid 容器，grid-template-columns 属性用于定义容器的列数和列宽，grid-gap 属性用于定义列之间和行之间的间隔，grid-column 属性用于控制元素在列之间的跨度。通过这些属性的组合，我们可以轻松地实现任意复杂度的网格布局。

总结

CSS 是 Web 前端必备的技能之一，它可以让我们更好地掌控页面的样式和布局。无论是基础知识还是进阶技能，在实际项目中都有着广泛的应用。