Web浏览器工作原理
CSS处理与布局
重要程度：7 分
### CSS处理与布局
CSS (层叠样式表) 是一种用来描述 HTML 或 XML (包括各种 XML 语言，如 SVG、XHTML 等) 文档呈现的语言。通过 CSS，我们可以控制网页的布局、颜色、字体等样式。
#### CSS的主要功能：
1. **选择器**：用于选取需要添加样式的元素。
2. **属性**：定义了要对元素应用什么样的样式。
3. **值**：为属性提供具体的值。
#### CSS的基本语法
css
选择器 {
属性: 值;
}
#### 布局方式
CSS提供了多种布局方式，包括但不限于：
1. **块级布局**：默认情况下，`<div>`、`<p>`、`<h1>`等是块级元素，它们会占据一整行。
2. **内联布局**：`<span>`、`<a>`等是内联元素，它们不会换行，并且只占据其内容所需的宽度。
3. **浮动布局**：`float` 属性可以让元素脱离正常文档流，向左或向右浮动。
4. **弹性布局**：使用 `display: flex;` 可以创建一个弹性容器，使子元素能够自动调整大小和位置。
### 例子说明
#### 示例1：块级布局
<div>这是第一个段落</div>
<div>这是第二个段落</div>
这里每个 `<div>` 都会独占一行。
#### 示例2：内联布局
<span>这是第一部分内容</span>
<span>这是第二部分内容</span>
两个 `<span>` 元素会显示在同一行上。
#### 示例3：浮动布局
<div style="width: 50%; float: left;">左侧内容</div>
<div style="width: 50%; float: right;">右侧内容</div>
这里左侧和右侧的内容会分别靠左和靠右排列。
#### 示例4：弹性布局
<div style="display: flex;">
<div style="flex: 1;">内容1</div>
<div style="flex: 1;">内容2</div>
</div>
这里两个子 `<div>` 会均分父容器的空间。
通过这些简单的例子，可以更好地理解如何使用 CSS 来控制和布局 HTML 元素。