CSS中常用参数及含义

在 CSS（层叠样式表）中，常用的参数可以分为几大类，包括 布局、盒模型、文本、背景、边框、动画等。下面是常见的 CSS 参数及其含义：

1. 盒模型（Box Model）

CSS 属性	说明	示例
width	设置元素的宽度	width: 200px;
height	设置元素的高度	height: 100px;
margin	外边距（元素与其他元素的距离）	margin: 10px auto;
padding	内边距（元素内容与边框之间的距离）	padding: 10px;
border	边框	border: 1px solid #000;
box-sizing	盒模型计算方式（content-box、border-box）	box-sizing: border-box;

---

2. 背景（Background）

CSS 属性	说明	示例
background-color	背景颜色	background-color: #f0f0f0;
background-image	背景图片	background-image: url('bg.jpg');
background-size	背景图片尺寸（cover、contain）	background-size: cover;
background-position	背景图片位置	background-position: center center;
background-repeat	背景重复方式	background-repeat: no-repeat;

---

3. 文本（Text）

CSS 属性	说明	示例
color	文字颜色	color: red;
font-size	字体大小	font-size: 16px;
font-weight	字体粗细（normal、bold、100-900）	font-weight: bold;
font-family	字体	font-family: Arial, sans-serif;
text-align	文本对齐方式（left、right、center）	text-align: center;
text-decoration	文本装饰（underline、none）	text-decoration: none;
line-height	行高	line-height: 1.5;

---

4. 布局（Layout）

CSS 属性	说明	示例
display	定义元素的显示模式（block、inline、flex、grid）	display: flex;
position	定位方式（static、relative、absolute、fixed）	position: absolute;
top / right / bottom / left	用于 position 绝对定位	top: 50px; left: 100px;
z-index	控制元素的层级	z-index: 10;
overflow	内容溢出处理（hidden、scroll、auto）	overflow: hidden;
visibility	可见性（visible、hidden）	visibility: hidden;

---

5. Flex 布局

CSS 属性	说明	示例
display: flex;	启用 Flex 布局	display: flex;
justify-content	主轴对齐方式	justify-content: center;
align-items	交叉轴对齐方式	align-items: center;
flex-direction	轴方向（row、column）	flex-direction: row;
flex-wrap	是否换行（nowrap、wrap）	flex-wrap: wrap;

---

6. 边框（Border）

CSS 属性	说明	示例
border	设置边框	border: 1px solid #000;
border-radius	圆角	border-radius: 10px;
box-shadow	盒子阴影	box-shadow: 5px 5px 10px rgba(0,0,0,0.5);

---

7. 过渡与动画

CSS 属性	说明	示例
transition	过渡动画	transition: all 0.3s ease-in-out;
transform	变换（rotate、scale）	transform: rotate(45deg);
animation	定义动画	animation: fadeIn 1s infinite;

---

8. CSS 选择器

选择器	说明	示例
*	选中所有元素	* { margin: 0; }
.class	选中 class	.btn { color: red; }
#id	选中 ID	#header { background: blue; }
element	选中 HTML 标签	p { font-size: 14px; }
element, element	选中多个元素	h1, h2 { color: green; }
element element	选中子元素	div p { color: black; }
element > element	选中直接子元素	div > p { color: blue; }
element + element	选中相邻元素	h1 + p { font-style: italic; }

如果还有什么补充的，欢迎大家进行补充。