#前端 CSS、CSS3 核心样式和属性
# 前端 CSS、CSS3 核心样式和属性 TIP
Web 前端入门到精通必会
# 1、盒模型 属性名称 描述 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 设置元素是否是可见的 # 2、常用文本样式属性 属性名称 描述 color 规定字体的颜色，也称为前景色 font-size 设置字体大小 font-weight 设置字体粗细 font-style 设置字体样式 text-decoration 设置添加到文本的装饰线 # 3、字体属性 属性名称 描述 font-family 设置元素的字体 @font-face 定义字体，例如：阿里巴巴普惠体 # 4、段落和行相关属性 属性名称 描述 text-indent 设置首行文本的缩进 line-height 设置文本行间的距离（行高） text-align 设置文本对齐方式 font 设置所有字体属性 # 5、CSS 的书写位置 属性名称 描述 style ① 内嵌式，书写在 head 标签对中，使用标签对，里面书写 css 样式。例如：
② 行内式，直接在标签上书写 style 属性设置 css 样式。这种方式不常用，了解即可示例：这是一个标题
link 链接外部样式文件，例如： @import 导入样式规则 （不常用，了解即可）例如：@import url('css 文件') # 6、层叠性和选择权重 属性名 描述 !important 提升权重（不常用，了解即可） # 7、伪元素 属性名 描述 ::before 作为匹配选中元素的第一个子元素，必须设置 content 属性 ::after 作为匹配选中元素的最后一个子元素，必须设置 content 属性 ::selection 设置文档中被用户高亮的部分，即使用鼠标圈选的部分（不常用，了解即可） ::first-letter 选择块元素中的第一个字母设置样式（不常用，了解即可） ::first-line 选择块元素中的第一行全部文字设置样式（不常用，了解即可） # 8、伪类 属性名 描述 :link 选择所有未被访问的超级链接 :visited 选择所有访问过的超级链接 :active 选择被用户激活的元素 :hover 选择鼠标悬停的元素 # 9、css3 新增伪类 注：不常用，了解即可
属性名 描述 :empty 选择没有任何子级的元素 :focus 选择当前获得焦点的元素 :enabled 选择已启用的元素 :disabled 选择禁用的元素 :checked 选择选中的输入元素（仅适用于单选按钮或复选框） :root 选择根元素，即标签 # 10、标签选择器、id、class 选择器 属性名 描述 element 标签选择器，直接使用元素的标签名，表示选择指定元素名称的所有元素示例：p{color:red;}选择所有的 p 标签 #id id 选择器，使用井号#作为前缀，表示选择指定 id 的元素示例：#firstname{color:yellow;} 选择 id=firstname" 的元素 .class class 选择器，使用点.作为前缀， 表示选择指定类名的元素p 示例：.intro{color:red;} 选择 class="intro" 的元素 # 11、复合选择器 属性名 描述 element1 element2 后代选择器，使用空格分隔两个元素示例：.box p{} 表示选择类名为 box 的标签的后代元素 p 标签 element1.class 交集选择器示例：h3.spec{} 表示选择有.spec 类的
标签 element1,element2 并集选择器，也叫分组选择器，使用逗号隔开示例：ul, ol{} 表示同时选择标签和标签 # 12、元素关系选择器 属性名 描述 element>element 子选择器，使用 > 符号分隔两个元素示例： div > p {} 选择下的所有子级元素 element+element 相邻兄弟选择器，使用 + 分隔两个元素示例：div + p {}选择所有紧接着
元素之后的第一个元素 element1~element2 通用兄弟选择器，使用 ~ 分隔两个元素示例：p~ul {}选择同一父元素下的 p 元素之后的每一个 ul 元素 # 13、序号选择器 属性名 描述 :first-child 匹配其父元素中的第一个子元素示例：p:first-child{} 匹配
的父元素的第一个
元素 :last-child 匹配父元素中最后一个子元素示例：p:last-child{}匹配
的父元素下最后一个
元素 :nth-child(n) 匹配父元素中的第 n 个子元素示例：p:nth-child(2)匹配
的父元素中第 2 个子元素
标签 :nth-of-type(n) 匹配同类型中的第 n 个同级兄弟元素 （不常用，了解即可）示例：p:nth-of-type(2){}指定每个
元素匹配同类型中的第 2 个同级兄弟元素 :nth-last-child(n) 匹配属于其父元素的第 n 个子元素的所有元素，从最后一个子元素开始计数 （不常用，了解即可）示例：p:nth-last-child(2){}指定每个
元素匹配同类型中的倒数第 2 个同级兄弟元素 :nth-last-of-type(n) 匹配同类型中的倒数第 n 个同级兄弟元素，从最后一个子元素开始计数（不常用，了解即可）示例：p:nth-last-of-type(2){}指定每个
元素匹配同类型中的倒数第 2 个同级兄弟元素 # 14、属性选择器 注：
不常用，了解即可
属性名 描述 [attribute] 选择指定属性的元素 [attribute=value] 选择指定了属性和值的元素 [attribute^=value] 选择属性值带指定的值开始的元素 [attribute$=value] 选择属性值带指定的值结尾的元素 [attribute*=value] 选择元素属性值包含指定值的元素 [attribute~=value] 选择属性值包含一个指定单词的元素 [attribute|=value] 选择属性值以指定值开头的元素 # 15、浮动 属性名 描述 float 设置元素浮动 BFC 块级格式化上下文，它是页面上一个独立的容器 overflow 溢出隐藏：溢出盒子边框的内容会被隐藏，也可以让盒子形成 BFC（块级格式上下文） clear 清除元素的浮动 # 16、定位 属性名 描述 position 规定元素的定位类型 relative 定义相对定位 top 设置定位元素距离顶部的距离 bottom 设置定位元素距离底部的距离 left 设置定位元素距离左侧的距离 right 设置定位元素距离右侧的距离 absolute 定义绝对定位 z-index 设置定位元素的堆叠顺序，数值大的会盖住数值小的 fixed 定义固定定位 # 17、鼠标样式 属性名 描述 cursor 设置光标的形状 # 18、边框 属性名 描述 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 定义点状线边框 # 19、圆角 属性名 描述 border-top-left-radius 设置左上方的圆角 border-top-right-radius 设置右上方的圆角 border-bottom-left-radius 设置左下方的圆角 border-bottom-right-radius 设置右下方的圆角 border-radius 设置圆角的复合写法 # 20、盒子阴影 属性名 描述 box-shadow 给元素添加阴影效果 # 21、背景 属性名 描述 background-color 设置背景颜色 background-image 设置盒子的背景图片、设置线性渐变背景、设置径向渐变背景 background-repeat 设置背景图像是否重复 background-size 设置背景图片大小 background-clip 设置背景的绘制区域（不常用，了解即可） background-origin 设置背景图片显示区域的位置（不常用，了解即可） background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动（不常用，了解即可） background-position 设置背景图像的位置 background 设置背景样式的复合写法 # 22、浏览器前缀 属性名 描述 -webkit- 谷歌浏览器的私有前缀 -moz- 火狐浏览器的私有前缀 -ms- IE、Edge 浏览器的私有前缀 -o- 欧朋浏览器的私有前缀 # 23、2D/3D 转换 属性名 描述 transform 对元素进行旋转、缩放、移动或倾斜 transform-origin 设置元素变换的原点 （不常用，了解即可） scale 设置缩放变形（不常用，了解即可） skew 设置斜切变形（不常用，了解即可） translate 设置位移变形 perspective 设置透视强度，即“人眼到舞台的距离”
友情链接
- 标签 # 12、元素关系选择器 属性名 描述 element>element 子选择器，使用 > 符号分隔两个元素示例： div > p {} 选择
元素 element+element 相邻兄弟选择器，使用 + 分隔两个元素示例：div + p {}选择所有紧接着
元素 element1~element2 通用兄弟选择器，使用 ~ 分隔两个元素示例：p~ul {}选择同一父元素下的 p 元素之后的每一个 ul 元素 # 13、序号选择器 属性名 描述 :first-child 匹配其父元素中的第一个子元素示例：p:first-child{} 匹配
的父元素的第一个
元素 :last-child 匹配父元素中最后一个子元素示例：p:last-child{}匹配
的父元素下最后一个
元素 :nth-child(n) 匹配父元素中的第 n 个子元素示例：p:nth-child(2)匹配
的父元素中第 2 个子元素
标签 :nth-of-type(n) 匹配同类型中的第 n 个同级兄弟元素 （不常用，了解即可）示例：p:nth-of-type(2){}指定每个
元素匹配同类型中的第 2 个同级兄弟元素 :nth-last-child(n) 匹配属于其父元素的第 n 个子元素的所有元素，从最后一个子元素开始计数 （不常用，了解即可）示例：p:nth-last-child(2){}指定每个
元素匹配同类型中的倒数第 2 个同级兄弟元素 :nth-last-of-type(n) 匹配同类型中的倒数第 n 个同级兄弟元素，从最后一个子元素开始计数（不常用，了解即可）示例：p:nth-last-of-type(2){}指定每个
元素匹配同类型中的倒数第 2 个同级兄弟元素 # 14、属性选择器 注：
不常用，了解即可
属性名 描述 [attribute] 选择指定属性的元素 [attribute=value] 选择指定了属性和值的元素 [attribute^=value] 选择属性值带指定的值开始的元素 [attribute$=value] 选择属性值带指定的值结尾的元素 [attribute*=value] 选择元素属性值包含指定值的元素 [attribute~=value] 选择属性值包含一个指定单词的元素 [attribute|=value] 选择属性值以指定值开头的元素 # 15、浮动 属性名 描述 float 设置元素浮动 BFC 块级格式化上下文，它是页面上一个独立的容器 overflow 溢出隐藏：溢出盒子边框的内容会被隐藏，也可以让盒子形成 BFC（块级格式上下文） clear 清除元素的浮动 # 16、定位 属性名 描述 position 规定元素的定位类型 relative 定义相对定位 top 设置定位元素距离顶部的距离 bottom 设置定位元素距离底部的距离 left 设置定位元素距离左侧的距离 right 设置定位元素距离右侧的距离 absolute 定义绝对定位 z-index 设置定位元素的堆叠顺序，数值大的会盖住数值小的 fixed 定义固定定位 # 17、鼠标样式 属性名 描述 cursor 设置光标的形状 # 18、边框 属性名 描述 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 定义点状线边框 # 19、圆角 属性名 描述 border-top-left-radius 设置左上方的圆角 border-top-right-radius 设置右上方的圆角 border-bottom-left-radius 设置左下方的圆角 border-bottom-right-radius 设置右下方的圆角 border-radius 设置圆角的复合写法 # 20、盒子阴影 属性名 描述 box-shadow 给元素添加阴影效果 # 21、背景 属性名 描述 background-color 设置背景颜色 background-image 设置盒子的背景图片、设置线性渐变背景、设置径向渐变背景 background-repeat 设置背景图像是否重复 background-size 设置背景图片大小 background-clip 设置背景的绘制区域（不常用，了解即可） background-origin 设置背景图片显示区域的位置（不常用，了解即可） background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动（不常用，了解即可） background-position 设置背景图像的位置 background 设置背景样式的复合写法 # 22、浏览器前缀 属性名 描述 -webkit- 谷歌浏览器的私有前缀 -moz- 火狐浏览器的私有前缀 -ms- IE、Edge 浏览器的私有前缀 -o- 欧朋浏览器的私有前缀 # 23、2D/3D 转换 属性名 描述 transform 对元素进行旋转、缩放、移动或倾斜 transform-origin 设置元素变换的原点 （不常用，了解即可） scale 设置缩放变形（不常用，了解即可） skew 设置斜切变形（不常用，了解即可） translate 设置位移变形 perspective 设置透视强度，即“人眼到舞台的距离”