介绍
CSS（层叠样式表）是一种用于描述网页样式的语言，它定义了网页的布局、颜色、字体、大小等外观效果。在开发网页时，熟悉各种 CSS 属性非常重要，因为它们可以帮助我们创建出漂亮的用户界面。
本篇博客将介绍各种常用的 CSS 属性，并为您提供代码示例。
1. 布局属性
display
display属性用于定义元素的显示方式，常见的取值包括：
none：隐藏元素block：将元素显示为块级元素inline：将元素显示为内联元素inline-block：将元素显示为内联块级元素
.my-element {
display: block;
}
position
position属性用于定义元素的定位方式，常见的取值包括：
static：默认定位方式，元素按文档流进行布局relative：相对于自身原来的位置进行定位absolute：相对于最近的已定位元素进行定位fixed：相对于浏览器窗口进行定位
.my-element {
position: relative;
top: 10px;
left: 20px;
}
float
float属性用于定义元素的浮动方式，常见的取值包括：
left：元素向左浮动right：元素向右浮动none：默认值，元素不浮动
.my-element {
float: left;
}
2. 字体属性
font-family
font-family属性用于定义元素的字体族，常见的取值包括：
"Arial", sans-serif：使用 Arial 字体，如果没有则使用系统默认的 sans-serif 字体"Arial", "Helvetica Neue", Helvetica, sans-serif：按优先级使用 Arial、Helvetica Neue、Helvetica 字体，如果没有则使用系统默认的 sans-serif 字体
.my-element {
font-family: "Arial", sans-serif;
}
font-size
font-size属性用于定义元素的字体大小，常见的取值包括：
12px：设置字体大小为 12 像素1rem：设置字体大小为根元素的字体大小
.my-element {
font-size: 16px;
}
font-weight
font-weight属性用于定义字体的粗细程度，常见的取值包括：
normal：普通字体bold：粗体字体bolder：更粗的字体
.my-element {
font-weight: bold;
}
3. 边框属性
border
border属性用于定义元素的边框样式，常见的取值包括：
1px solid #000：设置边框宽度为 1 像素，样式为实线，颜色为黑色2px dashed #f00：设置边框宽度为 2 像素，样式为虚线，颜色为红色
.my-element {
border: 1px solid #000;
}
border-radius
border-radius属性用于定义元素的边框圆角，常见的取值包括：
5px：设置边框圆角大小为 5 像素50%：设置边框圆角大小为元素宽度的一半
.my-element {
border-radius: 5px;
}
结论
本篇博客介绍了一些常用的 CSS 属性，包括布局属性、字体属性和边框属性。熟悉这些属性可以帮助您更好地控制网页的外观和布局。如果您想要进一步学习 CSS，请参考相关文档和教程，不断探索和实践，提升自己的前端技能。
本文来自极简博客，作者：冬日暖阳，转载请注明原文链接：CSS 属性（全）：了解各种样式属性
