css设置基础知识大全（Web前端入门到精通必会的CSS样式和属性大全）

单词

描述

width

设置元素的宽度

height

设置元素的高度

padding-top

设置元素上内边距

padding-right

设置元素右内边距

padding-bottom

设置元素内边距

padding-left

设置元素左内边距

padding

设置元素四个方向的内边距

margin-top

设置盒子与上方盒子的距离

margin-right

设置盒子与右方盒子的距离

margin-bottom

设置盒子与下方盒子的距离

margin-left

设置盒子与左方盒子的距离

margin

设置在上、右、下和左四个方向的外边距

box-sizing

规定计算一个元素实际宽高的方式

display

设置元素表现的类型，例如： display:block;设置元素表现为块元素

visibility

设置元素是否是可见的

单词

描述

color

规定字体的颜色，也称为前景色

font-size

设置字体大小

font-weight

设置字体粗细

font-style

设置字体样式

text-decoration

设置添加到文本的装饰线

单词

描述

ont-family

设置元素的字体

@font-face

定义字体，例如：阿里巴巴普惠体

单词

描述

text-indent

设置首行文本的缩进

line-height

设置文本行间的距离（行高）

text-align

设置文本对齐方式

font

设置所有字体属性

单词

描述

style

1、内嵌式，书写在head标签对中，使用<style></style>标签对，里面书写css样式。例如：

单词

描述

!important

提升权重（不常用，了解即可）

单词

描述

::before

作为匹配选中元素的第一个子元素，必须设置content属性

::after

作为匹配选中元素的最后一个子元素，必须设置content属性

::selection

设置文档中被用户高亮的部分，即使用鼠标圈选的部分（不常用，了解即可）

::first-letter

选择块元素中的第一个字母设置样式（不常用，了解即可）

::first-line

选择块元素中的第一行全部文字设置样式（不常用，了解即可）

单词

描述

:link

选择所有未被访问的超级链接

:visited

选择所有访问过的超级链接

:active

选择被用户激活的元素

:hover

选择鼠标悬停的元素

单词

描述

:empty

选择没有任何子级的元素

:focus

选择当前获得焦点的元素

:enabled

选择已启用的元素

:disabled

选择禁用的元素

:checked

选择选中的输入元素（仅适用于单选按钮或复选框）

:root

选择根元素，即标签

单词

描述

element

标签选择器，直接使用元素的标签名，表示选择指定元素名称的所有元素

示例：p{color:red;}选择所有的p标签

#id

id选择器，使用井号#作为前缀，表示选择指定id的元素

示例：#firstname{color:yellow;} 选择id=firstname" 的元素

单词

描述

.class

class选择器，使用点.作为前缀， 表示选择指定类名的元素

p示例：.intro{color:red;} 选择class="intro" 的元素

单词

描述

element1 element2

后代选择器，使用空格分隔两个元素

示例：.box p{} 表示选择类名为box的标签的后代元素p标签

element1.class

交集选择器

示例：h3.spec{} 表示选择有.spec类的<h3>标签

element1 element2

并集选择器，也叫分组选择器，使用逗号隔开

示例：ul ol{} 表示同时选择<ul>标签和<ol>标签

单词

描述

element>element

子选择器，使用 > 符号分隔两个元素

示例： div > p {} 选择<div>下的所有子级<p>元素

element element

相邻兄弟选择器，使用 分隔两个元素

示例：div p {}选择所有紧接着 <div> 元素之后的第一个<p>元素

element1~element2

通用兄弟选择器，使用 ~ 分隔两个元素

示例：p~ul {}选择同一父元素下的 p 元素之后的每一个 ul 元素

单词

描述

:first-child

匹配其父元素中的第一个子元素

示例：p:first-child{}匹配<p>的父元素的第一个<p>元素

:last-child

匹配父元素中最后一个子元素

示例：p:last-child{}匹配<p>的父元素下最后一个<p>元素

:nth-child(n)

匹配父元素中的第 n 个子元素

示例：p:nth-child(2)匹配<p>的父元素中第2个子元素<p>标签

:nth-of-type(n)

匹配同类型中的第n个同级兄弟元素 （不常用，了解即可）

示例：p:nth-of-type(2){}指定每个<p>元素匹配同类型中的第2个同级兄弟元素

:nth-last-child(n)

匹配属于其父元素的第n个子元素的所有元素，从最后一个子元素开始计数 （不常用，了解即可）

示例：p:nth-last-child(2){}指定每个<p>元素匹配同类型中的倒数第2个同级兄弟元素

:nth-last-of-type(n)

匹配同类型中的倒数第n个同级兄弟元素，从最后一个子元素开始计数（不常用，了解即可）

示例：p:nth-last-of-type(2){}指定每个<p>元素匹配同类型中的倒数第2个同级兄弟元素

单词

描述

[attribute]

选择指定属性的元素

[attribute=value]

选择指定了属性和值的元素

[attribute^=value]

选择属性值带指定的值开始的元素

[attribute$=value]

选择属性值带指定的值结尾的元素

[attribute*=value]

选择元素属性值包含指定值的元素

[attribute~=value]

选择属性值包含一个指定单词的元素

[attribute|=value]

选择属性值以指定值开头的元素

单词

描述

float

设置元素浮动

BFC

块级格式化上下文，它是页面上一个独立的容器

overflow

溢出隐藏：溢出盒子边框的内容会被隐藏，也可以让盒子形成BFC（块级格式上下文）

clear

清除元素的浮动

单词

描述

position

规定元素的定位类型

relative

定义相对定位

top

设置定位元素距离顶部的距离

bottom

设置定位元素距离底部的距离

left

设置定位元素距离左侧的距离

right

设置定位元素距离右侧的距离

absolute

定义绝对定位

z-index

设置定位元素的堆叠顺序，数值大的会盖住数值小的

fixed

定义绝对定位

单词

描述

cursor

设置光标的形状

单词

描述

border-width

设置边框的宽度

border-style

设置边框线的形状

border-color

设置边框的颜色

border-top-width

设置上边框宽度

border-right-width

设置右边框宽度

border-bottom-width

设置下边框宽度

border-left-width

设置左边框宽度

border-top-style

设置上边框样式

border-right-style

设置右边框样式

border-bottom-style

设置下边框样式

border-left-style

设置左边框样式

border-top-color

设置上边框颜色

border-right-color

设置右边框颜色

border-bottom-color

设置下边框颜色

border-left-color

设置左边框颜色

border-top

上方向边框样式的复合写法

border-bottom

下方向边框样式的复合写法

border-right

右方向边框样式的复合写法

border-left

左方向边框样式的复合写法

border

边框的复合写法，设置所有的边框属性

solid

定义实线边框

dashed

定义虚线边框

dotted

定义点状线边框

单词

描述

border-top-left-radius

设置左上方的圆角

border-top-right-radius

设置右上方的圆角

border-bottom-left-radius

设置左下方的圆角

border-bottom-right-radius

设置右下方的圆角

border-radius

设置圆角的复合写法

单词

描述

box-shadow

给元素添加阴影效果

单词

描述

background-color

设置背景颜色

background-image

设置盒子的背景图片

设置线性渐变背景

设置径向渐变背景

background-repeat

设置背景图像是否重复

background-size

设置背景图片大小

background-clip

设置背景的绘制区域（不常用，了解即可）

background-origin

设置背景图片显示区域的位置（不常用，了解即可）

background-attachment

设置背景图像是否固定或者随着页面的其余部分滚动（不常用，了解即可）

background-position

设置背景图像的位置

background

设置背景样式的复合写法

单词

描述

-webkit-

谷歌浏览器的私有前缀

-moz-

火狐浏览器的私有前缀

-ms-

IE、Edge浏览器的私有前缀

-o-

欧朋浏览器的私有前缀

单词

描述