css

选择器用于选择 HTML 元素并为其应用样式。常见的选择器包括：

元素选择器：选择特定标签的元素。

css
复制
p {
color: blue;
}
类选择器：选择具有特定 class 属性的元素。

css
复制
.highlight {
background-color: yellow;
}
ID 选择器：选择具有特定 id 属性的元素。

css
复制

header {

font-size: 24px;

}
后代选择器：选择某个元素的后代元素。

css
复制
div p {
color: red;
}
伪类选择器：选择元素的特定状态（如悬停、点击等）。

css
复制
a:hover {
color: green;
}
(2) 盒模型（Box Model）
每个 HTML 元素都被视为一个矩形盒子，包括：

内容（Content）：元素的实际内容。

内边距（Padding）：内容与边框之间的空间。

边框（Border）：围绕内容和内边距的边框。

外边距（Margin）：盒子与其他元素之间的空间。

示例：
css
复制
div {
width: 200px; /* 内容宽度 /
padding: 20px; / 内边距 /
border: 5px solid black; / 边框 /
margin: 10px; / 外边距 */
}
(3) 布局技术
浮动（Float）：使元素向左或向右浮动，常用于实现文字环绕图片的效果。

css
复制
img {
float: left;
margin-right: 10px;
}
定位（Position）：通过 position 属性控制元素的位置。

static：默认定位。

relative：相对定位。

absolute：绝对定位。

fixed：固定定位。

css
复制
.box {
position: absolute;
top: 10px;
left: 20px;
}
弹性盒子（Flexbox）：用于创建灵活的布局，适合对齐和分布空间。

css
复制
.container {
display: flex;
justify-content: space-between; /* 水平对齐 /
align-items: center; / 垂直对齐 */
}
网格布局（Grid）：用于创建复杂的二维布局。

css
复制
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 三列 /
gap: 10px; / 间距 */
}