CSS 属性介绍及分类
CSS（层叠样式表）用于控制网页的布局和外观。CSS 属性可以分为多个类别，每个类别包含一系列相关的属性。以下是 CSS 属性的常见分类及其详细介绍：
1. 文本属性
color: 设置文本的颜色。
p {
color: black;
}
font-size: 设置字体的大小。
h1 {
font-size: 24px;
}
text-align: 设置文本的对齐方式。
- left：文本左对齐，默认值。
- right：文本右对齐。
- center：文本居中对齐。
div {
text-align: center;
}
font-family: 设置字体系列。
p {
font-family: Arial, sans-serif;
}
line-height: 设置行高。
- normal：默认值。文本的行高与字体大小相同。
- number/percentage：一个数字/百分比，表示行高。
- length：一个长度值，表示行高。
p {
line-height: 1.5;
}
2. 背景属性
background-color: 设置背景颜色。
body {
background-color: lightgray;
}
background-image: 设置背景图像。
- url()：从指定的 URL 加载图像。
- linear-gradient()：创建线性渐变。
- repeating-linear-gradient()：创建重复的线性渐变。
- repeating-radial-gradient()：创建重复的径向渐变。
header {
background-image: url('header.jpg');
background-image: linear-gradient(to right, red, blue);
background-image: repeating-radial-gradient(circle, red, blue);
background-image: repeating-linear-gradient(to right, red, blue);
}
background-size: 设置背景图像的大小。
- auto：默认值。背景图像的原始尺寸。
- length：如 100px 100px，可以分别指定宽度和高度。
- percentage：如 50% 50%，相对于背景定位区域的百分比。
- contain：保持图像的宽高比，使图像完全适应背景区域，但不会超出背景区域。
- cover：保持图像的宽高比，使图像完全覆盖背景区域，可能超出背景区域。
- initial：使用属性的初始值。
- inherit：继承父元素的 background-size 值。
header {
background-size: cover;
}
background-repeat: 设置背景图像是否重复。
- repeat：重复背景图像。
- repeat-x：重复背景图像，仅沿水平方向。
- repeat-y：重复背景图像，仅沿垂直方向。
- no-repeat：不重复背景图像。
body {
background-repeat: no-repeat;
}
background-position: 设置背景图像的位置。
- left：背景图像在容器的左侧。
- right：背景图像在容器的右侧。
- top：背景图像在容器的上方。
- bottom：背景图像在容器的下方。
- center：背景图像在容器的正中间。
- percentage：如 50%，相对于背景定位区域的百分比。
body {
/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
/* <percentage> values */
background-position: 25% 75%;
/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;
/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;
}
3. 边框属性
border: 设置边框的宽度、样式和颜色。
div {
/* style */
border: solid;
/* width | style */
border: 2px dotted;
/* style | color */
border: outset #f33;
/* width | style | color */
border: medium dashed green;
}
border-width: 设置边框的宽度。
div {
border-width: 2px;
}
border-style: 设置边框的样式。
div {
border-style: dashed;
}
border-color: 设置边框的颜色。
div {
border-color: red;
}
border-radius: 设置圆角边框。
button {
border-radius: 5px;
}
4. 内边距和外边距
padding: 设置内边距。
p {
/* Apply to all four sides */
padding: 1em;
/* top and bottom | left and right */
padding: 5% 10%;
/* top | left and right | bottom */
padding: 1em 2em 2em;
/* top | right | bottom | left */
padding: 5px 1em 0 2em;
}
margin: 设置外边距。
div {
/* Apply to all four sides */
margin: 1em;
margin: -3px;
/* top and bottom | left and right */
margin: 5% auto;
/* top | left and right | bottom */
margin: 1em auto 2em;
/* top | right | bottom | left */
margin: 2px 1em 0 auto;
}
padding-top, padding-right, padding-bottom, padding-left: 分别设置上、右、下、左的内边距。
p {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
margin-top, margin-right, margin-bottom, margin-left: 分别设置上、右、下、左的外边距。
div {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;
}
5. 盒模型属性
width: 设置元素的宽度。
div {
width: 200px;
}
height: 设置元素的高度。
div {
height: 100px;
}
max-width: 设置元素的最大宽度。
img {
max-width: 100%;
}
min-height: 设置元素的最小高度。
div {
min-height: 50px;
}
6. 显示和定位属性
display: 设置元素的显示方式。
- block：元素会作为块级元素显示，宽度会自动填充父容器。
- inline：元素会作为内联元素显示，宽度不会自动填充父容器。
- inline-block：元素会作为内联元素显示，宽度不会自动填充父容器，但可以设置高度。
- flex：元素会作为弹性盒子元素显示，宽度会自动填充父容器。
- grid：元素会作为网格布局元素显示，宽度会自动填充父容器。
div {
display: flex;
}
position: 设置元素的定位方式。
- static：默认值，元素不会被定位，默认位置是文档流中的位置。
- relative：元素会被定位，但相对于其正常位置。
- absolute：元素会被定位，相对于其最近的已定位父元素。
- fixed：元素会被定位，相对于浏览器窗口。
- sticky：元素会被定位，相对于其正常位置，直到遇到相关定位 ancestor 元素或窗口边缘。
div {
position: relative;
}
top, right, bottom, left: 设置定位元素的位置。
div {
position: absolute;
top: 10px;
right: 20px;
}
z-index: 设置元素的堆叠顺序。
div {
z-index: 10;
}
7. 布局属性
flex: 设置弹性盒子布局的属性。
container {
display: flex;
justify-content: center;
align-items: center;
}
grid: 设置网格布局的属性。
container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
8. 动画和过渡属性
transition: 设置过渡效果。
button {
transition: background-color 0.3s ease;
}
animation: 设置动画效果。
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
div {
animation: example 5s infinite;
}
9. 其他属性
overflow: 设置元素溢出容器的处理方式。
- visible：默认值，元素内容会显示在容器内。
- hidden：元素内容会超出容器隐藏。
- scroll：元素内容会超出容器显示滚动条。
- auto：元素内容会超出容器显示滚动条，但只有当内容超出容器时才显示滚动条。
div {
overflow: auto;
}
text-overflow: 设置文本溢出显示省略号。
p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 200px;
}
float: 设置元素浮动。
- left：元素向左浮动。
- right：元素向右浮动。
- none：元素不浮动。
img {
float: left;
}
当使用 float 属性时，可能会导致父元素的高度塌陷。可以通过以下几种方式清除浮动：
/* 父元素设置 overflow: hidden */
.container {
overflow: hidden;
}
/* 父元素添加伪元素 */
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* 添加clear标签 */
.clear {
clear: both;
}
