CSS 干货分享 | 知其然且知其所以然，方能功底深厚

前端

2023-11-12 13:35:37

在编程的世界里，实际编程水平往往是衡量一个人能力的重要标准。然而，夯实基础，如同为大厦奠基，决定了我们能走多远。

作为一名勤奋进取的程序员，笔者最近为准备面试，潜心钻研 CSS 相关知识，博览群书，整理数十万字资料，从中提炼出这些 CSS 干货，与君分享。

CSS 纵横

CSS，层叠样式表，是用来为 HTML 元素添加样式的一种语言。它使我们可以控制网页的外观和布局，从字体大小到背景颜色，无所不包。

1. 盒子模型

盒子模型是理解 CSS 布局的关键概念。它将每个 HTML 元素视为一个矩形盒子，由内容、内边距、边框和外边距四部分组成。掌握盒子模型，方能游刃有余地控制元素在页面上的位置和大小。

2. 浮动

浮动是一种让元素脱离正常文档流的布局技术。浮动元素就像漂浮在页面上的小船，可以左右移动，直到遇到另一个浮动元素或容器的边框。巧妙运用浮动，可以实现复杂而灵活的布局。

3. 定位

定位允许我们精确地控制元素在页面上的位置。我们可以使用绝对定位将元素固定在特定坐标上，或使用相对定位对其相对于父元素进行偏移。定位是创建复杂交互式界面的利器。

4. 弹性布局

弹性布局是一种现代布局技术，它允许元素根据可用空间自动调整大小和位置。弹性布局非常适合创建响应式设计，能够适应各种屏幕尺寸和设备。

5. 媒体查询

媒体查询允许我们根据屏幕尺寸、设备类型或其他条件来应用不同的 CSS 规则。这在创建自适应网站和应用程序时至关重要，确保内容在不同设备上都能得到最佳呈现。

代码实践

理论知识固然重要，但实践出真知。以下是一些示例代码，展示了 CSS 的实际应用：

/* 设置文本大小为 16px */
body {
  font-size: 16px;
}

/* 将元素浮动到右侧 */
.float-right {
  float: right;
}

/* 绝对定位元素在页面中央 */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 使用弹性布局创建两列布局 */
.row {
  display: flex;
  justify-content: space-between;
}