尺寸操作
| 属性/类别 | 描述 | 示例 |
|---|---|---|
| 元素大小 | ||
| width | 设置元素的宽度 | .element { width: 200px; } |
| height | 设置元素的高度 | .element { height: 100px; } |
| 边距（Margin） | 在元素外侧创建空间 | |
| margin | 同时设置所有四个方向的边距 | .element { margin: 20px; } |
margin: 0 auto; | 元素居中显示,最常用 | {margin: 0 auto;} |
| margin-top | 仅设置顶部边距 | .element { margin-top: 10px; } |
| 填充（Padding） | 在元素内容与边框之间创建空间 | |
| padding | 同时设置所有四个方向的填充 | .element { padding: 10px; } |
| padding-left | 仅设置左侧填充 | .element { padding-left: 20px; } |
| 边框（Border） | 设置元素的边框 | |
| border | 同时设置边框的样式、宽度和颜色 | .element { border: 2px solid black; } |
| border-width | 仅设置边框的宽度 | .element { border-width: 5px; } |
| box-sizing | 使得元素的宽度和高度能够包含内容、 内边距和边框在内 | box-sizing: border-box; |
| 字体大小（Font Size） | 设置元素中文本的字体大小 | .text { font-size: 16px; } |
| 最小/最大宽度和高度 | 确保元素大小在指定范围内 | |
| min-width | 设置元素的最小宽度 | .element { min-width: 100px; } |
| max-height | 设置元素的最大高度 | .element { max-height: 200px; } |
| 响应式设计 | 根据不同屏幕尺寸调整布局和样式 | |
| vw/vh | 视口宽度/高度单位，用于响应式设计 | .element { width: 50vw; height: 50vh; } |
| 媒体查询（Media Queries） | 根据屏幕尺寸应用不同的样式规则 | @media (max-width: 600px) { .element { width: 100%; } } |
圆角 border-radius | 设置元素圆角 | .box{ border-radius: 10px;} |
阴影 box-shadow | 设置元素阴影 | box-shadow: 5px 5px 5px rebeccapurple; |
字体操作
| 属性 | 描述 | 示例 |
|---|---|---|
color | 设置文本的颜色 | p { color: red; } |
font-family | 设置字体系列 | p { font-family: Arial, sans-serif; } |
font-size | 设置字体大小 | p { font-size: 16px; } |
font-weight | 设置字体粗细 | p { font-weight: bold; } |
font-style | 设置字体样式（如斜体） | p { font-style: italic; } |
text-align | 设置文本的水平对齐方式 | p { text-align: center; } |
text-decoration | 设置文本的装饰效果（如下划线） | a { text-decoration: none; } |
text-indent | 设置文本首行的缩进 | p { text-indent: 2em; } |
white-space | 设置空白字符的处理方式和是否自动换行 | p { white-space: nowrap; } |
overflow-wrap（或 word-wrap） | 设置单词的溢出和换行处理方式 | p { overflow-wrap: break-word; } |
text-overflow | 设置当文本溢出容器时的处理方式（如省略号） | div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }（注意：text-overflow通常与 overflow和 white-space属性结合使用） |
位置操作
CSS中用于控制元素位置的常用操作主要涉及定位（Positioning）和布局技术。以下是一些关键的CSS位置操作属性及其描述：
- 定位（Positioning）
定位属性允许你指定元素在页面上的确切位置。CSS中的position属性是控制定位的关键。
position：指定元素的定位方式。常见的值包括static（默认值，元素按照正常文档流进行定位）、relative（相对定位，元素相对于其在文档流中的原始位置进行偏移）、absolute（绝对定位，元素脱离文档流，相对于其最近的已定位祖先元素进行定位，如果没有则相对于<html>元素）、fixed（固定定位，元素脱离文档流，相对于浏览器窗口进行定位）、sticky（粘性定位，元素根据用户的滚动位置在relative和fixed定位之间切换）。
- 偏移量
与position属性一起使用的偏移量属性包括top、bottom、left和right，它们指定了元素相对于其定位上下文（即其最近的已定位祖先元素或包含块）的位置。
top、bottom、left、right：这些属性用于指定元素的位置偏移量。当position不是static时，这些属性有效。
- 堆叠顺序（Z-index）
z-index：用于指定元素的堆叠顺序（即哪个元素应该位于另一个元素之上）。只有定位元素（即position属性值不是static的元素）的z-index属性才有效。 - 浮动（Floats）
虽然浮动（float）主要用于文本环绕图像或创建多列布局，但它也可以影响元素的位置。
float：指定元素应该向左或向右浮动。浮动元素会脱离文档流，但不会脱离页面布局。它们仍然影响布局，但允许文本和其他元素环绕它们。
- 清除浮动（Clear）
clear：指定元素不允许在其左侧、右侧或两侧有浮动元素。这通常用于控制浮动元素周围的布局。 - 布局技术
除了上述定位属性外，CSS还提供了多种布局技术，这些技术也间接地影响元素的位置。
Flexbox：一种一维布局模型，允许容器内的项目能够灵活地填充可用空间。
Grid：一种二维布局系统，允许你将页面分割成网格，并在网格中放置元素。
多列布局：允许内容被组织成列，类似于报纸的布局。请注意，上述属性中的top、bottom、left和right属性仅在position属性值不是static时有效。此外，CSS布局技术的选择取决于你的具体需求和项目要求。
| 属性 | 描述 |
|---|---|
position | 指定元素的定位方式（如static(默认)、relative(相对定位)、 absolute(绝对定位)、fixed(固定定位)、sticky） |
top | 指定元素顶部偏移量 |
bottom | 指定元素底部偏移量 |
left | 指定元素左侧偏移量 |
right | 指定元素右侧偏移量 |
z-index | 指定元素的堆叠顺序 |
float | 指定元素向左或向右浮动 |
clear | 指定元素不允许在其左侧、右侧或两侧有浮动元素 |
