# 前端 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 标签对中，使用<style></style>标签对，里面书写 css 样式。例如：<head><style type="text/css">h1 {color:red;}p {color:blue;}</style></head>② 行内式，直接在标签上书写 style 属性设置 css 样式。这种方式不常用，了解即可 示例： <h1 style="color:blue;text-align:center">这是一个标题</h1> |
| link | 链接外部样式文件，例如：<head><link rel="stylesheet" href="css文件"></head> |
| @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 类的<h3>标签 |
| element1,element2 | 并集选择器，也叫分组选择器，使用逗号隔开 示例： ul, ol{} 表示同时选择<ul>标签和<ol>标签 |
# 12、元素关系选择器
| 属性名 | 描述 |
|---|---|
| element>element | 子选择器，使用 > 符号分隔两个元素 示例： div > p {} 选择<div>下的所有子级<p>元素 |
| element+element | 相邻兄弟选择器，使用 + 分隔两个元素 示例： div + p {}选择所有紧接着<div>元素之后的第一个<p>元素 |
| element1~element2 | 通用兄弟选择器，使用 ~ 分隔两个元素 示例： p~ul {}选择同一父元素下的 p 元素之后的每一个 ul 元素 |
# 13、序号选择器
| 属性名 | 描述 |
|---|---|
| :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 个同级兄弟元素 |
# 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 | 设置透视强度，即“人眼到舞台的距离” |
大厂最新技术学习分享群
微信扫一扫进群，获取资料
X