🚀 个人主页 极客小俊
✍🏻 作者简介：web开发者、设计师、技术分享
🐋 希望大家多多支持, 我们一起学习和进步！
🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注
CSS常用属性
使用CSS基本上能够处理的属性有：背景、文本、字体,边框、内边距、外边距,列表、表格、尺寸,定位、分类、伪类!
对于新手而言，我个人从里面挑选了一些最常用的CSS属性，大家可以先学习，熟练之后，再去深入学习其他的CSS属性!
CSS 背景（background）
该属性定义元素的背景效果。
元素的背景区包括前景之下直到边框边界的所有空间。因此，内容框与内边距都是元素背景的一部分，且边框画在背景上。
CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果,具体有如下:
Background 简写属性
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置
background-repeat 设置背景图像是否平铺及如何平铺。
CSS 文本
使用文本属性，你可以改变文本的颜色，增加或减少文本中的字符间距，对齐文本，装饰文本，对文本中的首行进行缩进等。
具体有如下属性:
Color 设置文本颜色
Direction 设置文本方向。
line-height 设置行高。(一般只作用于文字)
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-transform 处理文本的大小写。
letter-spacing 设置字符(字母)间距。
word-spacing 设置词(词组)间距。
text-indent 一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于
行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果
一块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
white-space 当 white-space 属性设置为 normal 时，会合并所有的空白符，并忽略换
行符.当 white-space 属性设置为 pre 时，浏览器不会合并空白符，也不会忽
略换行符.值是 nowrap，它会防止元素中的文本换行，除非使用了一个 br 元
素如果元素的 white-space 设置为 pre-wrap，那么该元素中的文本会保留空
白符序列，但是文本行会正常地换行。如果设置为这个值，源文本中的行分隔
符以及生成的行分隔符也会保留。pre-line 与 pre-wrap 相反，会像正常文本
中一样合并空白符序列，但保留换行符。
CSS 字体（font）
CSS 字体属性允许您设置字体系列 (font-family) 和字体加粗 (font-weight)，我们还可以设置字体的大小、字体风格（如斜体）和字体变形（如小型大写字母）
具体有如下属性:
Font 简写属性
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-style 设置字体风格。
font-variant 以小型小写字体或者正常字体显示文本。
font-weight 设置字体的粗细
CSS 边框(border)
CSS边框属性可以规定元素边框的粗细、样式和颜色。
具体如下:
border 简写属性
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 用于为元素的所有边框设置宽度，或者 单独地为各边边框设置宽度。
border-color 设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
Top(上) right(右) bottom(下) left(左)
CSS 外边距(margin)
CSS外边距属性定义元素周围的空间,设置外边距会在元素外创建额外的“空白”。“空白”通常指不能放其它元素的区域，而且在这个区域中看得到父元素的背景。
例如: h1 {margin : 10px 0px 15px 5px;}
这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：margin: top right bottom left
具体如下:
margin 简写属性
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。
CSS 内边距(padding)
CSS 内边距属性定义元素边框与元素内容之间的空白 。
例如： td {padding : 2px 2px 2px 2px;}
具体如下:
Padding 简写属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。
CSS 列表
CSS 列表属性可以放置、改变列表项标志，或者将图像作为列表项标志 。
使用方式如下属性:
list-style 简写属性。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
CSS 表格
CSS 表格属性允许你设置表格的布局。
使用方式如下属性:
border-collapse: 设置是否把表格边框合并为单一的边框。
border-spacing : 设置分隔单元格边框的距离。
empty-cells : 设置是否显示表格中的空单元格。
caption-side: 设置表格标题的位置。
table-layout : 设置显示单元、行和列的算法
CSS 尺寸(Dimension)
CSS 尺寸(Dimension)属性可以控制元素的高度和宽度及行间距。(单位为：px)
常见的使用方式如下属性:
Height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
Width 设置元素的宽度。
CSS 分类(Classification)
CSS 分类属性可以规定如何以及在何处显示元素, 这一块里面的属性几乎是CSS布局的核心
常见的使用方式如下属性:
Clear 设置一个元素的侧面是否允许其他的浮动元素。
Cursor 规定当指向某元素之上时显示的指针类型。
Display 设置是否及如何显示元素。
Float 定义元素在哪个方向浮动。
Position 把元素放置到一个静态的、相对的、绝对的、或 固定的位置中。
Visibility设置元素是否可见或不可见。
Display 的属性值:如下
None 此元素不会被显示。
Block 此元素将显示为块级元素，此元素 前后会带有换行符。
Inline 默认。此元素会被显示为内联元素， 元素前后没有换行符。
inline-block 行内块元素。
块元素默认独占一行的元素。例如：DIV、TABLE、PRE、H1..H6、UL、LI、OL、FORM等元素。
特点：
1）独占一行，
2）可以设置宽、高
内联元素（行内元素）：默认不独占一行的元素，它们可以放在一起。
例如：FONT、A、SPAN、INPUT、IMG等…
特点：
1）不独占一行，
2）宽度跟高度不可以控制。
块元素转换成行内元素：display:inline
行内元素转换成块元素：display:block
CSS浮动属性
Float 属性,用于让元素脱离文档流，进行浮动, 它的属性值如下:
left 文本或图像会移至父元素中的左侧。
right 文本或图像会移至父元素中的右侧。
none 默认。文本或图像会显示于它在文档中出现的位置。
clear 清除浮动元素属性, 它的可选值如下:
Left 在左侧不允许浮动元素
Right 在右侧不允许浮动元素
Both 在左右两侧均不允许浮动元素
None 默认。允许浮动元素出现在两侧。
float属性是个重点, 在 CSS 中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素, 且要指明一个宽度，否则它会尽可能地窄, 另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。
visibility 属性
visibility 属性设置元素是否可见或不可见。
即使不可见的元素也会占据页面上的空间。
如果不可见元素不占据页面空间则用display来控制
它们之间的区别: Visible 元素是可见的, Hidden 元素是不可见的。
CSS 定位(Positioning)
CSS 定位(Positioning)是我们在布局中经常会使用到的一个属性!
我们主要使用的定位属性有以下这几种:
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative 生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 inherit 规定应该从父元素继承 position 属性的值。
而只有使用了定位属性，那么以下这些值才管用!
Bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
Right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
Top 定义了一个定位元素的上外边距边界与其包含块上边界之间的 偏移。
z-index 设置元素的堆叠顺序 。
Overflow 溢出隐藏
设置当元素的内容溢出其区域时发生的事情。
我们一般设置的值为hidden
CSS 伪类(Pseudo-classes)
CSS 伪类(Pseudo-classes) 用于向某些选择器添加特殊的效果。
伪类的语法：
selector:xxx-class {property: value}
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
注意：在 CSS 定义中，a:hover 必须被置于a:link 和 a:visited之后，才是有效的。
a:active 必须被置于a:hover之后，才是有效的。
CSS 伪元素(Pseudo-elements)
CSS 伪元素用于将特殊的效果添加到某些选择器。
伪元素的语法：选择器 : 伪元素 { 属性: 值 }
伪元素有很多
例如:
:first-letter 将特殊的样式添加到文本的首字母
:first-line 将特殊的样式添加到文本的首行
更多伪元素大家可以去查看w3c文档!
CSS 盒子模型 (Box Model)
盒子模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式, 这也是CSS技术的核心之一!
元素框的最内部分是实际的内容，直接包围内容的是内边距。
内边距呈现了元素的背景, 内边距的边缘是边框。
边框以外是外边距，外边距默认是透明的,因此不会遮挡其后的任何元素。
为了方便理解请看以下图
如图
基本的CSS常用属性也就这些了，先把这些搞明白了之后，就可以尝试去做一些很简单的静态页面了，通过实际的练习加深代码记忆!
"👍点赞" "✍️评论" "收藏❤️"
欢迎一起交流学习❤️❤️💛💛💚💚
好玩 好用 好看的干货教程可以
点击下方关注❤️
微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇
![[密码学]Base64编码](https://img-blog.csdnimg.cn/direct/468ef1c610474b11977ef83b992d6e78.png)
