CSS属性有哪些常见分类_CSS属性基础知识与作用详解

CSS属性分为文本字体、盒模型、布局定位、背景边框四类，分别用于控制文字样式、元素尺寸间距、页面布局定位及视觉美化效果，掌握这些有助于高效编写和调试网页样式。

CSS（层叠样式表）用于控制网页的外观和布局。掌握CSS属性的分类和作用，有助于更高效地编写样式代码。以下是常见的CSS属性分类及其基础作用详解。

1. 文本与字体属性

这类属性主要用于设置文字的显示效果，包括字体、大小、颜色、对齐方式等。

● color：设置文本颜色，如 color: #333; 或 color: red;
● font-family：定义字体类型，如 font-family: Arial, sans-serif;
● font-size：设置字体大小，常用单位有 px、em、rem
● font-weight：控制字体粗细，如 normal、bold 或 400、700
● text-align：设置文本对齐方式，如 left、center、right
● line-height：定义行高，影响段落的垂直间距
● text-decoration：添加下划线、删除线等，如 text-decoration: underline;

2. 盒模型相关属性

盒模型是CSS布局的核心概念，每个元素都被视为一个矩形盒子，包含内容、内边距、边框和外边距。

知我AI

一款多端AI知识助理，通过一键生成播客/视频/文档/网页文章摘要、思维导图，提高个人知识获取效率；自动存储知识，通过与知识库聊天，提高知识利用效率。

26

查看详情

● width / height：设置内容区域的宽高
● padding：内边距，内容与边框之间的空间
● border：边框，可设置宽度、样式和颜色，如 border: 1px solid #ccc;
● margin：外边距，盒子与其他元素之间的距离
● box-sizing：控制盒模型计算方式，border-box 包含边框和内边距，content-box 为默认值

3. 布局与定位属性

这些属性决定元素在页面中的位置和排列方式。

立即学习“前端免费学习笔记（深入）”；

● display：设置元素的显示模式，如 block、inline、flex、grid
● position：定义定位方式，常见值有 static、relative、absolute、fixed、sticky
● top / right / bottom / left：配合 position 使用，设定偏移量
● float：实现文字环绕或简单布局（现多被 Flex 和 Grid 替代）
● z-index：控制重叠元素的堆叠顺序，仅对定位元素有效
● flex：在 Flex 布局中控制子元素的伸缩行为
● grid：用于网格布局，定义行、列和区域

4. 背景与边框样式

用于美化元素的视觉外观。

● background-color：设置背景色
● background-image：添加背景图片，如 url('bg.jpg')
● background-repeat：控制背景图是否重复
● background-position：设定背景图的位置
● border-radius：创建圆角边框
● box-shadow：添加阴影效果，增强立体感
● background-size：调整背景图尺寸，常用值有 cover、contain
基本上就这些核心分类。理解每类属性的作用，能帮助你更灵活地控制页面样式。实际开发中，建议结合浏览器开发者工具调试，快速查看属性效果。