CSS基础样式详解：字体、边距、内填充与定位

"CSS基础样式归纳，包括常用的字体、边距、内边距、背景、列表、尺寸、定位以及打印样式" 在CSS（层叠样式表）中，掌握基础样式对于创建美观且功能完善的网页至关重要。以下是一些常用的基础样式： 1. 字体样式（Font）： - `font-family`：定义字体系列，可以指定多个备选字体以防浏览器不支持。 - `font-size`：设置字体大小，可以用绝对值（如像素、pt）或相对值（如百分比、em）。 - `font-size-adjust`：保持字体的行高比例，适用于不同字体大小的调整。 - `font-stretch`：控制字体的宽度，可选择窄、正常、宽等。 - `font-style`：设置字体风格，如正常、斜体或-oblique。 - `font-variant`：用于小型大写或特殊字体效果。 - `font-weight`：定义字体的粗细，如normal、bold或数值100-900。 2. 边距样式（Margin）： - `margin`：设置元素四周的空白区域，可以单独设置上下左右的值。 - `margin-bottom`、`margin-left`、`margin-right`、`margin-top`：分别定义各边缘的空白。 3. 内边距样式（Padding）： - `padding`：设置元素内部的空白区域，同样可以单独设置各边。 - `padding-bottom`、`padding-left`、`padding-right`、`padding-top`：定义各内边距。 4. 背景样式（Background）： - `background`：简写属性，用于设置背景颜色、图像、位置和重复方式。 - `background-attachment`：定义背景图是否随滚动条移动。 - `background-color`：设置背景颜色。 - `background-image`：设置背景图像。 - `background-position`：定义背景图像的位置。 - `background-repeat`：控制背景图像的重复方式。 5. 列表样式（List）： - `list-style`：简写属性，用于设置列表的类型、位置和图像。 - `list-style-image`：用图像替换列表项符号。 - `list-style-position`：定义列表项符号的位置，内或外。 - `list-style-type`：设置列表项的默认符号。 6. 生成内容（Generated Content）： - `content`：用于在元素前后插入内容，如`:before`和`:after`伪元素。 - `counter-increment`：增加计数器的值。 - `counter-reset`：初始化或重置计数器。 - `quotes`：定义引用的起始和结束引号。 7. 尺寸样式（Dimension）： - `height`、`max-height`、`min-height`：控制元素的高度限制。 - `width`、`max-width`、`min-width`：控制元素的宽度限制。 8. 定位样式（Positioning）： - `position`：设置元素的定位模式，如static、relative、absolute或fixed。 - `bottom`、`left`、`right`、`top`：定义元素相对于其定位上下左右的距离。 - `clear`：防止元素被浮动元素覆盖。 - `clip`：剪裁绝对定位元素的显示部分。 - `cursor`：设置鼠标指针的形状。 - `display`：控制元素的显示方式，如block、inline、none等。 - `float`：使元素浮动到左侧或右侧。 - `overflow`：处理内容溢出元素的情况，如hidden、scroll、auto。 - `vertical-align`：设置元素的垂直对齐方式。 - `visibility`：控制元素是否可见。 - `z-index`：设置元素的堆叠顺序，决定哪个元素覆盖另一个。 9. 打印样式（Print）： - `orphans` 和 `widows`：控制页面断行，避免孤儿行或寡妇行的出现。 - `page-break-after`、`page-break-before` 和 `page-break-inside`：控制页面分页位置，优化打印效果。 这些基础样式是CSS中不可或缺的部分，熟练掌握它们能帮助你更有效地设计网页布局和交互。