学习视频链接：黑马程序员pink老师
CSS属性书写顺序
- 布局定位属性：display/position/float/clear/visibility/overflow（建议第一个写display，这个关系到显示模式）
- 自身属性：width/height/margin/padding/border/background
- 文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
- 其它属性：content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient…
CSS三大特性
CSS有三大特性，即层叠性、继承性、优先级。
层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠性原则：
- 样式冲突，遵循
就近原则。那个样式结构近，就执行那个样式。 - 样式不冲突，不会层叠。
继承性
子标签会继承父标签的某些样式，如文本颜色、字号和行高等。
- 恰当地使用继承可以简化代码，降低CSS样式的复杂性；
- 子元素可以继承父元素的样式（text-，font-，line-等元素开头以及color属性可以继承）。
/*行高的继承性*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<style>
body {
color: aqua;
/* font: 12px/24px 'Microsoft YaHei'; */
font: 12px/1.5 Microsoft YaHei; /*1.5 表示当前元素文字大小font-size的1.5倍*/
}
div {
/*子元素继承了父元素body的行高1.5倍*/
font-size: 12px;
/*div中的行高为12 * 1.5 */
}
p {
/*子元素继承了父元素body的行高1.5倍*/
font-size: 14px;
/* p中的行高为14 * 1.5 */
}
</style>
</head>
<body>
<div>这是一个div</div>
<p>这是一个段落标签</p>
<ul>
<!--
当前li标签未设置文字大小，则会继承父元素的文字大小
此时li标签文字大小为12px（继承body），行高为12 * 1.5
-->
<li>未指定文字大小</li>
</ul>
</body>
</html>
- 行高可以跟单位，也可不跟单位。
- body行高1.5的写法可以让子元素根据自己文字大小自动调整行高。
优先级
当同一个元素指定多个选择器，就会产生出现优先级。
- 若选择器相同，则执行层叠性；
- 若选择器不同，则根据选择器权重执行。
选择器权重
| 选择器 | 选择器权重 |
|---|---|
| 继承 或 * | 0，0，0，0 |
| 元素（标签）选择器 | 0，0，0，1 |
| 类选择器，伪类选择器 | 0，0，1，0 |
| ID选择器 | 0，1，0，0 |
| 行内样式 style="" | 1，0，0，0 |
| !important 重要的 | 无穷大 |
!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 继承 或 *
权重叠加
如果是复合选择器，则会出现权重叠加，需要计算权重。
复合选择器
在CSS中，根据选择器的类型将其分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对几倍呢选择器进行组合形成的。
- 复合选择器可以更准确、更高效地选择目标元素（标签）；
- 复合选择器是由两个或多个基础选择器通过不同的方式组合形成的；
- 常用的复合选择器包括后代选择器、子选择器、并集选择器、伪类选择器等。
后代选择器
后代选择器又称包含选择器，可以选择父元素里面的子元素。
其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
元素1 元素2 {
样式声明
}
上述语法表示选择元素1里面的所有元素2（后代元素）。
- 元素1和元素2中间用空格隔开；
- 元素1是父级，元素2是子级，最终选择的是元素2；
- 元素2只要是元素1的后代即可。
- 元素1和元素2可以是任意基础选择器。
子选择器
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。
元素1>元素2 {
样式声明
}
上述语法表示选择元素1里面的所有直接后代（子元素）元素2。
- 元素1和元素2中间用
>隔开； - 元素1是父级，元素2是子级，最终选择的是
元素2; - 元素2必须是元素1的直接后代，后代的后代不是直接后代。
并集选择器
并集选择器可以选择多组标签，同时为它们定义相同的样式。通常用于集体声明。
并集选择器是各选择器通过英文逗号链接而成，任何形式的选择器都可以作为并集选择器的一部分。
元素1,元素2,元素3 {
样式声明
}
- 元素之间使用
,隔开； - 并集选择器通常用于集体声明。
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是用:表示，例如：:hover、:first-child 。
链接伪类选择器
注意事项：为了确保生效，需按照LVHA的顺序声明：:link :visited :hover :active。
a {
color: blue;
}
/*未访问时的状态*/
a:link {
color: gray;
}
/*已访问过的状态*/
a:visited {
color: green;
}
/*鼠标经过时的状态*/
a:hover {
color: red;
}
/*鼠标按下去时的状态*/
a:active {
color: yellow;
}
:focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素。
元素显示模式
元素显示模式就是元素（标签）以什么方式进行显示。例如<div>自已占一行，一行可以放多个<span>。
HTML元素一般分为块元素和行内元素两种类型。
块元素
块级元素特点：
- 独占一行；
- 高度、宽度、外边距以及内边距都可以设置；
- 宽度默认为容器（父级宽度）的100%；
- 块级元素是一个容器和盒子，里面可以放行内或者块级元素。
行内元素
<span>标签是最典型的行内元素。
行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个；
- 高度、宽度直接设置是无效的；
- 宽度默认为本身内容的宽度；
- 行内元素只能容纳文本或其它行内元素。
注意
- 链接里不能在放链接；
- 特殊情况链接
<a>里面可以放块级元素，但是给<a>转换一下显示模式更为安全。
行内块元素
在行内元素中有几个特殊的标签：<img />、<input />、<td>，它们同时具有块元素和行内元素的特点。
行内元素的特点：
- 和相邻行内元素（行内块）在一行上，但是它们之间会有空白间隙。一行可以显示多个（行内元素特点）；
- 默认宽度就是它本身内容的宽度（行内元素特点）；
- 高度、宽度、外边距以及内边距都可以设置（块级元素特点）。
元素显示模式转换
特殊情况下，需要使用到元素模式的转换。
- 转换为块元素
display: block; - 转换为行内元素
display: inline; - 转换为行内块
display: inline-block;
字体属性
CSS Fonts（字体）属性用于定义字体系列、大小、粗细、和文字样式。
| 属性 | 表示 |
|---|---|
| font-size | 字号 |
| font-family | 字体 |
| font-weight | 字体粗细 |
| font-style | 字体样式 |
| font | 字体连写 |
字体系列
css使用font-family属性定义文本的字体系列。
- 各种字体之间必须使用英文状态下的逗号隔开；
- 一般情况下，如果有空格隔开的多个单词组成的字体，需要加引号。
常见的字体：
body {
font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';
}
字体大小
css使用font-size属性来定义字体大小。
- px（像素）大小是网页中常用的单位（谷歌浏览器默认的文字大小为16px）；
- 可给body指定整个页面文字的大小。
字体粗细
css使用font-weight属性设置文本字体的粗细。
| 属性值 | 描述 |
|---|---|
| normal | 默认值，不加粗 |
| bold | 粗体 |
| 100-900 | 400等同于normal，700等同于bold（数字属性后没有单位） |
文字样式
css使用font-style属性设置文本的风格。
| 属性值 | 作用 |
|---|---|
| normal | 默认值，标准的字体样式 |
| italic | 斜体 |
字体符合属性
字体属性可将上述样式综合来写。
body {
font: font-style font-weight font-size/line-height font-family;
}
- 使用font属性时，必须按照上述语法格式中的顺序书写，
不能更换顺序，并且每个属性间以空格隔开； - 不需要设置的属性可以省略（使用默认值），但必须要保留
font-size和font-family属性，否则font属性将不起作用。
文本属性
CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
文本颜色
color属性用于定义文本的颜色。
| 表示 | 属性值 |
|---|---|
| 预定义的颜色值 | 如red、green、blue等 |
| 十六进制 | 如#FF0000 |
| RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式。
div {
/*
left：左对齐（默认值；right：右对齐；center：居中对齐。
*/
text-align: cneter;
}
装饰文本
text-decoration属性规定添加到文本的装饰。可以给文本添加下划线、删除线、上划线等。
| 属性值 | 描述 |
|---|---|
| none | 默认，没有装饰线 |
| underline | 下划线 |
| overline | 上划线 |
| line-through | 删除线 |
文本缩进
text-indent属性用来指定文本的首行的缩进。
/*段落文字首行缩进10px*/
p {
text-indent: 10px;
}
/*段落文字首行缩进2字符*/
p {
text-indent: 2em;
}
em是一个相对单位，就是当前元素（font-size）1个文字的大小，若当前元素未设置大小，则会按照父元素的1个文字大小。
行间距
line-height属性用于设置行间的距离（行高）。
行间距由上间距、文本高度、下间距组成。当文本高度与行高相同时，上间距和下间距都为0。
p {
line-height: 20px;
}
背景
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
背景颜色
background-color属性定义了元素的背景颜色。
background-color: 颜色值;
一般情况下元素背景颜色默认值是transparent（透明），也可手动指定背景颜色为透明色。
background-color: transparent;
背景图片
background-image属性描述了元素的背景图像。
/*
url(图片路径)
括号里的路径不需要加引号
none 默认的 无背景图
*/
background-image: none | url(url)
背景平铺
background-repeat属性可以对背景图像进行平铺。
background-repeat: repeat | no-repeat | repeat-x | repeat-y
| 参数值 | 作用 |
|---|---|
| repeat | 默认，背景图像在纵向和横向上平铺 |
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像在横向上平铺 |
| repeat-y | 背景图像在纵向上平铺 |
背景图片位置
background-position属性可以改变图片在背景中的位置。
/*
x代表x坐标，y代表y坐标
可以使用方位名词或精确单位
*/
background-position: x y;
| 参数值 | 说明 |
|---|---|
| length | 百分数/由浮点数字和单位标识符组成的长度值 |
| position | top|center|bottom|left|right 方位名词 |
参数是方位名词
- 如果指定的两个值都是方位名词，则两个值前后顺序无关，例如left top与top left效果一样。
- 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。
参数是精确单位
- 如果参数是精确坐标，那么第一个是x坐标，第二个是y坐标；
- 如果只指定一个数值，那该数值一定是x坐标，另一个是垂直居中。
参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。
背景图像固定
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment: scroll | fixed
scroll：背景图像随对象内容滚动。
fixed：背景图像固定。
背景复合写法
/*
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
*/
background: transparent url(image.jpg) repeart-y fixed top;
背景色半透明
background: rgba(0,0,0,0.3);
- 最后一个参数是alpha透明度，取值范围在0-1之间；
- 最后一个参数可以把0省略掉，例如：
background: rgba(0,0,0,.3);； - 背景半透明是指盒子背景半透明，盒子里面的内容不受影响；
盒子模型
盒子模型组成
盒子模型（Box Model）就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个装东西的容器。
CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括边框、外边距、内边距和实际内容。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F8ATwZfW-1720397187624)(https://i-blog.csdnimg.cn/direct/9f5681196815477a8722740def1072f1.jpeg)]
边框
border可以设置元素的边框。边框由边框宽度（粗细）、边框样式、边框颜色三部分组成。
边框会影响盒子的大小。
border: border-width || border-style || border-color
border-width单位通常使用px。
border-style：none（无边框）|hidden（隐藏边框）|solid（实线）|dashed（虚线）|dotted（点线）|double（双线边框）|…
border: 1px solid blue; /*对于顺序没有要求*/
表格的细线边框
border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
border-collapse: collapse;
- collapse：合并。
- **border-collapse: collapse;**表示相邻边框合并在一起。
内边距
padding属性用于设置内边距，即边框与内容之间的距离。
| 值的个数 | 表达含义 |
|---|---|
| padding: 5px; | 上下左右都有5像素的内边距 |
| padding: 5px 10px; | 上下是5像素，左右是10像素 |
| padding: 5px 10px 20px; | 上5像素，左右10像素，下20像素 |
| padding: 5px 10px 20px 30px; | 上5像素，右10像素，下20像素，左30像素 |
设置内边距之后，也影响了盒子实际大小。如果盒子本身未指定width/height属性，则设置padding不会撑开盒子大小。
外边距
margin属性用于设置外边距，即控制盒子与盒子之间的距离。
margin属性简写的方式同内边距的表示一致。
外边距可以让块级盒子水平居中，但必须满足以下两个条件：
- 盒子必须指定了width；
- 盒子左右的外边距都设置为auto。
margin: 0 auto;
注：以上方式只适合与块级元素水平居中，行内块元素或行内元素水平居中给其父元素添加text-align: center;即可。
外边距合并
相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素存在下外边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直间距不是margin-bottom与margin-top之和，而是两个值中最大的一个。取两个值中较大的那个值这种现象被称为相邻块元素垂直外边距的合并。
所以尽量只给一个盒子添加margin值。
嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，父元素有上边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案
- 可以为父元素定义上边框；
- 可以为父元素定义上内边距；
- 可以为父元素添加
overflow: hidden。
清除内外边距
网页元素大多带有默认的内外边距，er’qie不同浏览器默认的也不一致。因此在布局前，需要清除网页元素的内外边距。
* {
margin: 0; /*清除外边距*/
padding: 0; /*清除内边距*/
}
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。
圆角边框
border-radius属性用于设置元素的外边框圆角。
border-radius: length;
radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果。
- 参数值可以是数值，也可以是百分比；
- 如果是正方形，想要设置为圆，把数值修改为高度或者宽度的一半即可，或者直接写成50%；
- 如果是个矩形，设置为高度的一半即可；
以上写法是一个简写属性，它可以跟四个值，分别表示左上角、右上角、右下角、左下角。
border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
盒子阴影
box-shadow属性可以为盒子添加阴影。
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必须，水平阴影的位置，允许为负值 |
| v-shadow | 必须，垂直阴影的位置，允许为负值 |
| blur | 可选，模糊距离 |
| spread | 可选，阴影的尺寸 |
| color | 可选，阴影的颜色 |
| inset | 可选，将外部阴影（outset）改为内部阴影 |
- 默认的是外阴影（outset），但是不可以写外阴影，否则导致阴影失效；
- 盒子阴影不占用空间，不会影响其它盒子的排列。
文字阴影
text-shadow属性将阴影应用于文本。
text-shadow: h-shadow v-shadow blur color;
| 值 | 描述 |
|---|---|
| h-shadow | 必须，水平阴影的位置，允许为负值 |
| v-shadow | 必须，垂直阴影的位置，允许为负值 |
| blur | 可选，模糊距离 |
| color | 可选，阴影的颜色 |
传统网页布局的三种方式
网页布局的本质：用CSS来摆放盒子，把盒子摆放到相应的位置。
CSS提供了三种传统布局方式（盒子如何进行排列顺序）；
- 普通流（标准流）
- 浮动
- 定位
标准流
标准流（普通流、文档流），所谓标准流，就是标签按照规定好默认方式排列。
-
块级元素会独占一行，从上向下顺序排列。
常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table
-
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则会自动换行。
常用元素：span、a、i、em等
标准流是最基本的布局方式。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
浮动
float属性用于创建浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或另一个浮动框的边缘。
选择器 {
float: 属性值;
}
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动（默认值） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
浮动的特性
- 浮动元素会脱离标准流（脱标）；
- 浮动的元素会一行显示并且元素顶部对齐；
- 浮动的元素会具有行内块元素的特性。
特性一
- 脱离标准普通流的控制（浮）移动到指定位置（动），俗称脱标。
- 浮动的盒子不再保留原先的位置。
特性二
如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。
注：浮动的元素是互相贴在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
特性三
浮动元素会具有行内块元素的特性。
任何元素都可以浮动，无论原来是什么模式的元素，添加浮动之后具有行内块元素相似的特性。
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。
- 浮动的盒子中间是没有缝隙的，是紧挨在一起的。
浮动元素经常和标准流父级搭配使用
为了约束浮动元素位置，网页布局一般采用的策略：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局的第一准则。
浮动布局注意点
1、浮动和标准流的父盒子搭配。
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。
2、一个元素浮动了，理论上其余的兄弟元素也要浮动。
一个盒子里面有多个盒子，如果其中一个盒子浮动了，那么其它兄弟也应该浮动，以防止引起问题。
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
清除浮动
选择器 {
clear: 属性值;
}
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
清除浮动的策略：闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其它盒子。
为什么需要清除浮动？
由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。
- 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。
清除浮动本质
- 清除浮动的本质是清除浮动元素造成的影响
- 如果父盒子本身有高度，则不需要清除浮动
- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
清除浮动方法
- 额外标签法也称为隔墙法，是W3C推荐的做法
- 父级添加overflow属性
- 父级添加after元素
- 父级添加双伪元素
额外标签法
额外标签法会在浮动元素末尾添加一个空的标签。例如：<div style="clear:both"></div>，或者其他标签（如<br/>等）。
父级添加overflow
给父级添加overflow属性，将其属性值设置为hidden、auto或scroll。
- 优点：代码简洁
- 缺点：无法显示溢出的部分
:after伪元素法
:after方式是额外标签法的升级版。是给父元素添加以下样式：
/*
假设clearfix为父元素的一个类名
*/
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /*IE6、7专有*/
*zoom: 1;
}
- 优点：没有增加标签，结构更简单
- 缺点：照顾低版本浏览器
双伪元素清除浮动
也是给父元素添加样式，样式如下：
/*
假设clearfix为父元素的一个类名
*/
.clearfix:before,.clearfic:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
定位
浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其它盒子。
定位组成
定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。
定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式。
边偏移则决定了该元素的最终位置。
定位模式
定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为以下四个：
| 值 | 语义 |
|---|---|
| static | 静态定位 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
边偏移
边偏移就是定位盒子移动到最终位置。有top、bottom、left和right 4个属性。
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
| top | top: 80px | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
| bottom | bottom: 80px | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | left: 80px | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | right: 80px | 右侧偏移量，定义元素相对于其父元素右边线的距离 |
静态定位
静态定位是元素的默认定位方式，勿定位的意思。
选择器 {
position: static;
}
- 静态定位按照标准流特性摆放位置，它没有边偏移
- 静态定位在布局时很少用到
相对定位
相对定位是元素在移动位置的时候，相对与它原来的位置来说的。
选择器 {
position: relative;
}
相对定位的特点
- 它是相对于自己原来的位置来移动的（移动位置时参照点是原来它本身的位置）
- 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）
绝对定位
绝对定位是元素在移动位置时，相对于它祖先元素而言的。
选择器 {
position: absolute;
}
绝对定位的特点
- 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
- 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素作为参考点来移动位置
- 绝对定位不再占有原先的位置
子绝父相
子级是绝对定位的话，父级要用相对定位。
- 子级绝对定位，不会占用位置，可以放到父盒子里面的任何一个地方，不会影响其它的兄弟盒子。
- 父盒子需要加定位限制子盒子在父盒子内显示。
- 父盒子布局时，需要占用位置，因此父盒子只能是相对定位。
相对定位经常用来作为绝对定位的父级。
因为父级需要占用位置，因此使用相对定位；子盒子不需要占用位置，则使用绝对定位。
子绝父相不是永远不变的，如果父元素不需要占用位置，子绝父绝也存在。
固定定位
固定定位是元素固定于浏览器可视区的位置。
主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
选择器 {
position: fixed;
}
固定定位特点
-
以浏览器的可视窗口为参照点移动元素
- 跟父元素没有任何关系
- 不随着滚动条的滚动而滚动
-
固定定位不再占有原来的位置
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。
固定定位小技巧：固定在版心右侧位置。
例如 回到顶部 样式，固定定位贴着版心（内容区域）右侧对齐。
- 让固定定位的盒子left: 50%，放到浏览器可视区（可看作版心）的一半位置。
- 让固定定位的盒子margin-left：版心宽度的一半距离。多走版心宽度的一半位置。
粘性定位
粘性（sticky）定位可以被认为是相对定位和固定定位的混合。
选择器 {
position: sticky;
top: 10px;
}
粘性定位的特点
- 以浏览器的可视窗口为参照点移动元素（固定定位特点）
- 粘性定位占有原先的位置（相对定位特点）
- 必须添加top、left、right、bottom中的一个才有效
与页面滚动搭配使用，兼容性较差，IE不支持。
定位叠放次序
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序（z轴）。
选择器 {
z-index: 1;
}
- 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越靠上
- 如果属性值相同，则按照书写顺序，后来居上
- 数字后面不能加单位
- 只有定位的盒子才有z-index属性
定位拓展
绝对定位的盒子居中
加了绝对定位的盒子不能通过margin: 0 auto;水平居中，但是可以通过以下计算方法实现水平和垂直居中。
left: 50%;让盒子的左侧移动到父级元素的水平中心位置。margin-left: -盒子本身宽度的一半px;让盒子向左移动自身宽度的一半。
定位特殊特性
绝对定位和固定定位类似于浮动。
- 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
- 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位（固定定位）元素的都不会出发外边距合并的问题。
绝对定位和固定定位会完全压住盒子
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住标准流盒子里面的文字（图片）。
但是绝对定位（固定定位）会压住下面标准流所有的内容。
浮动之所以不会压住文字，是因为浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素。
元素的显示与隐藏
本质：让一个元素在页面中隐藏或者显示出来。
- display显示隐藏，但是不保留原来位置
- visibility显示隐藏，但是保留原来的位置
- overflow溢出显示隐藏，但是只对于溢出的部分进行处理
display属性
display属性用于设置一个元素应如何显示。
- **display: none;**隐藏元素
- **display: block;**除了转换为块级元素之外，同时还有显示元素的意思
display隐藏元素后，不再占有原来的位置。
visibility可见性
visibility属性用于指定一个元素应可见还是隐藏。
- **visibility: visible;**元素可见
- **visibility: hidden;**元素隐藏
| 参数 | 说明 |
|---|---|
| inherit | 继承上一个父对象的可见性 |
| visible | 对象可视 |
| hidden | 对象隐藏 |
| collapse | 主要用来隐藏表格的行或列，隐藏的行或列可被其它内容使用 |
visibility隐藏元素后，继续占有原来的位置。
如果隐藏元素想要原来的位置，就用visibility: hidden
如果隐藏元素不想要原来的位置，就用display: none
overflow溢出
overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管超出内容否，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
一般情况下，溢出的内容都不显示出来，因为溢出的部分会影响布局。
但是如果有定位的盒子，需慎用overflow: hidden; ，因为它会隐藏多余的部分。
高级技巧
精灵图
为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。
精灵图的使用
使用精灵图核心：
- 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
- 这个大图片也称为sprites 精灵图 或者雪碧图。
- 移动背景图片位置，此时可以使用background-position。
- 移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同。
- 因为一般情况下都是往上往左移动，所以数值是负值。
- 使用精灵图时需要精确测量，每个小背景图片的大小和位置。
综上，使用精灵图核心总结：
- 精灵图主要针对小的背景图片使用。
- 主要借助于背景位置来实现（background-position）。
- 一般情况下精灵图都是负值。（网页中的坐标：x轴右边是正值，左边是负值；y轴下是正值，上是负值。）
字体图标
字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。
精灵图有诸多优点，但是缺点也很明显、
- 图片文件还是比较大的。
- 图片本身放大和缩小会失真。
- 一旦图片制作完毕，需要更换非常复杂。
字体图标（iconfont）的出现很好地解决了上述问题。
字体图标可以为前端提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。
字体图标的优点
- 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
- 灵活性：本质其实就是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等。
- 兼容性：几乎支持所有的浏览器。
注意：字体图标不能替代精灵图技术，只是对工作中图标部分技术的提升和优化。
总结：
-
若遇到一些结构和样式比较简单的小图标，就是字体图标。
若遇到一些结构和样式复杂一点的小图片，就用精灵图。
CSS三角
使用div标签实现一个red颜色的三角形。
div {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 10px solid transparent;
border-left-color: red;
}
鼠标样式
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
li {
cursor: pointer;
}
| 属性值 | 描述 |
|---|---|
| default | 箭头，默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
轮廓线 outline
给表单添加outline: 0;或者outline: none;样式之后，就可以去掉默认的蓝色边框。
input {
outline: none;
}
防止拖拽文本域 resize
实际开发中，文本域右下角是不可以拖拽的。
textarea {
resize: none;
}
文本域标签放在一行，不然文本域中会存在间隙。
vertical-align属性
vertical-align属性经常用于设置图片或者表单（行内块元素）和文字垂直对齐。（用于设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效）
vertical-align: baseline | top | middle | bottom
| 值 | 描述 |
|---|---|
| baseline | 默认，元素放置在父元素的基线上 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| middle | 把此元素放置在父元素的中部 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐 |
解决图片底部默认空白缝隙问题
图片和文字默认是基线对齐的，所以图片底部会存在空白缝隙。
解决方法
- 给图片添加
vertical-align: middle | top | bottom等。 - 把图片转换为块级元素
display: block;。
溢出的文字 省略号显示
单行文本溢出 省略号显示
单行文本溢出显示省略号，必须满足三个条件：
-
先强制一行内显示文本。
white-space: nowrap; /*默认normal自动换行*/ -
超出的部分隐藏。
overflow: hidden; -
文字用省略号替代超出的部分。
text-overflow: ellipsis;
多行文本溢出显示省略号
多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）
overflow: hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp: 2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient: vertical;
常见布局技巧
margin负值运用
- 让盒子margin往左侧移动-1px，此时正好压住相邻盒子边框。
- 鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位【保留位置】，如果有定位，则加z-index）。
CSS三角强化
width: 0;
height: 0;
/*只保留右边的边框有颜色*/
border-color: transparent red transparent transparent;
/*样式都是实现*/
border-style: solid;
/*上边框宽度要大，右边框宽度稍小，其余边框为0*/
border-width: 22px 8px 0 0;
CSS初始化
不同浏览器对一些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，需要对CSS进行初始化。
CSS初始化就是重设浏览器样式，也称为CSS reset。
/*把所有的标签内外边距清零*/
* {
margin: 0;
}
/*em 和 i 斜体的文字不倾斜*/
em,i {
font-style: normal;
}
/*去除li的小圆点*/
li {
list-style: none;
}
img {
/*border: 0; 兼容低版本浏览器，若图片外包含了链接存在边框的问题*/
border: 0;
/*消除图片底侧存在缝隙的问题*/
vertical-align: middle;
}
button {
/*当鼠标经过button按钮时，鼠标变成小手*/
cursor: pointer;
}
a {
color: #666;
text-decoration: none;
}
a:hover{
color: #c81623;
}
button,input {
font-family: Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif
}
body {
/*抗锯齿性，让文字显示更加清晰*/
-webkit-font-smoothing:antialiased;
background-color:#fff;
font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
color:#666
}
.hide,.none {
display:none
}
/*清除浮动*/
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0;
}
.clearfix {
*zoom: 1;
}
Unicode编码字体
把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时出现乱码的问题。
例如：
- 黑体
\9ED1\4F53 - 宋体
\5B8B\4F53 - 微软雅黑
5FAE\8F6F\96C5\9ED1
HTML5的新特性
新增的语义化标签
<header>头部标签<nav>导航标签<article>内部标签<section>定义文档某个区域<aside>侧边栏标签<footer>尾部标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FZDLccIw-1720397187627)(https://i-blog.csdnimg.cn/direct/ec3023c6da094ad89f5bcc5ee72bb266.png)]
注
- 这种语义化标准主要是针对搜索引擎的
- 这种新标签页面中可以使用多次
- 在IE9中，需要把这些元素转换为块级元素
新增的多媒体标签
视频<video>
当前<video>元素支持三种视频格式（mp4、webm、ogg），但尽量使用mp4格式。
<video src="文件地址" controls="controls"></video>
音频<audio>
当前<audio>元素支持三种音频格式（mp3、wav、ogg）。
<audio src="文件地址" controls="controls"></audio>
新增的input类型
| 属性值 | 说明 |
|---|---|
| type=“email” | 限制用户输入必须为Email类型 |
| type=“url” | 限制用户输入必须为url类型 |
| type=“date” | 限制用户输入必须为日期类型 |
| type=“time” | 限制用户输入必须为时间类型 |
| type=“month” | 限制用户输入必须为月类型 |
| type=“week” | 限制用户输入必须为周类型 |
| type=“number” | 限制用户输入必须为数字类型 |
| type=“tel” | 手机号码 |
| type=“search” | 搜索框 |
| type=“color” | 生成一个颜色选择表单 |
新增的表单属性
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 表单拥有该属性表示其内容不能为空，必填 |
| placeholder | 提示文本 | 表单的提示信息，存在默认值将不显示 |
| autofocus | autofocus | 自动聚焦属性，页面加载完成自动聚焦到指定表单 |
| autocomplete | off/on | 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示在字段中填写的选项。默认已经打开，如autocomplete=“on”，关闭autocomplete=“off”。需要放在表单内，同时加上name属性，同时成功提交。 |
| multiple | multiple | 可以多选文件提交 |
可以通过以下设置方式修改placeholder里面的字体颜色：
input::placeholder {
color: red;
}
CSS3的新特性
新增选择器
属性选择器
属性选择器可以根据元素特定属性的来选择元素，这样就可以不用借助类或id选择器。
| 选择符 | 简介 |
|---|---|
| E[alt] | 选择具有alt属性的E元素 |
| E[att=“val”] | 选择具有att属性且属性值等于val的E元素 |
| E[att^=“val”] | 匹配具有att属性且只以val开头的E元素 |
| E[att$=“val”] | 匹配具有att属性且值以val结尾的E元素 |
| E[att*=“val”] | 匹配具有att属性且值中含有val的E元素 |
结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素。
| 选择符 | 简介 |
|---|---|
| E:first-child | 匹配父元素中的第一个子元素E |
| E:last-child | 匹配父元素中最后一个E元素 |
| E:nth-child(n) | 匹配父元素中的第n个子元素E |
| E:first-of-type | 指定类型E的第一个 |
| E:last-of-type | 指定类型E的最后一个 |
| E:nth-of-type(n) | 指定类型E的第n个 |
**nth-child(n)**选择某个父元素的一个或多个特定的子元素。
- n可以是数字、关键字和公式
- n如果是数字，就是选择第n个子元素，里面数字
- n可以是关键字：even偶数，odd奇数
- n可以是公式：常见的公式如若n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略
| 公式 | 取值 |
|---|---|
| 2n | 偶数 |
| 2n+1 | 奇数 |
| 5n | 5 10 15… |
| n+5 | 从第5个开始（包含第5个）到最后 |
| -n+5 | 前5个（包含第5个）… |
nth-child(n)会把所有的盒子都排列序号。执行时先看第一个:nth-child(1)，之后回去看前面。
nth-of-type(n)会把指定元素的盒子排列序号，执行顺序也是先看:前面指定的元素，之后回去看:nth-of-type(n)。
- 结构伪类选择器一般用于选择父级里面的第几个孩子
- nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
- nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后在根据E找第n个孩子
- 关于nth-child(n)里的n是从0开始计算的
- 若是无序列表，使用nth-child较多
- 类选择器、属性选择器、伪类选择器权重为10
伪元素选择器
伪元素选择器可以利用CSS创建新标签元素，而不需要HTML，从而简化HTML结构。
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
注：
- before和after创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树中是找不到的，故称之为伪元素
- 语法：
element::before {} - before和after必须有content属性
- before在父元素内容的前面创建元素，after在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样，权重为1
CSS3盒子模型
CSS3中可以通过box-sizing来指定盒模型，有2个值：context-box、border-box，这样计算盒子大小的方式就发生了改变。
- **box-sizing: content-box; **盒子大小为width+padding+border（之前默认的计算方式）
- **box-sizing: border-box;**盒子大小为width
如果盒子模型修改为box-sizing: border-box;，那padding和border就不会撑大盒子（前提padding和border不会超过width宽度）。
图片变模糊
CSS3滤镜filter
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。
filter: 函数();
例如：
filter: blur(5px); /*blur模糊处理，数值越大越模糊*/
CSS3 calc函数
**calc()**此CSS函数在声明CSS属性值时执行一些计算。
width: calc(100% - 80px);
括号里面可以使用+ - * /来进行计算。
CSS3过渡
过渡（transition）是CSS3中具有颠覆性的特征之一，在不使用Flash或Javascript的情况下，当元素从一种样式变化为另一种样式时为元素添加效果。
过渡动画：是从一个状态 渐渐的过渡到另外一个状态。
经常同:hover一起搭配使用。
transition: 要过度的属性 花费时间 运动曲线 何时开始;
- 属性：想要变化的css属性，宽度高度 背景颜色 内外边距皆可。若想要所有的属性都过度，使用all即可
- 花费时间：单位是秒（必须有单位），例如0.5s
- 运动曲线：默认是ease（可以省略）
- 何时开始：单位是秒（必须有单位）可以设置延迟触发时间，默认0s（可省略）
div {
width: 100px;
height: 100px;
background-color: red;
/*多属性过渡，用逗号隔开*/
transition: width .5s ease 1s,htight .5s ease 1s;
}
div:hover {
width: 200px;
height: 200px;
}
2D转换
转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。
转换可以简单理解为变形。
- 移动：translate
- 旋转：rotate
- 缩放：scale
2D转换是改变标签在二维平面上的位置和形状的一种技术。
移动translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。
transform: translate(x,y);
/*可分开写*/
transform: translateX(n);
transform: translateY(n);
- 定义2D转换中的移动，沿着X和Y轴移动元素
- translate最大的优点：不会影响到其它元素的位置
- translate中的百分比单位是相对于自身元素 translate: (50%,50%);
- 对行内标签没有效果
旋转rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
transform: rotate(度数);
- rotate里面是度数，单位是deg，例如 rotate(45deg)
- 角度为正时，顺时针；为负时，逆时针
- 默认旋转的中心点时元素的中心点
转换中心点transform-origin
transform-origin: x y;
- 参数x和y用空格隔开
- x、y默认转换的中心点时元素的中心点(50% 50%)
- 可给x、y设置像素或方位名词（top、bottom、left、right、center）
缩放scale
transform: scale(x,y);
- 参数x、y用逗号隔开
transform: scale(1,1);宽和高都放大一倍，相对于没有放大transform: scale(2,2);宽和高都放大了2倍transform: scale(2);只写一个参数，第2个参数则和第一个参数一样，相当于scale(2,2)transform: scale(0.5,0.5);缩小- scale缩放最大的优势是可以设置转换中心点缩放，默认以中心点缩放，而且不影响其它盒子
2D转换综合写法
同时使用多个转换，其格式如下：
transform: translate() rotate() scale() ...;
- 上述顺序的写法会影响转换的效果。（先旋转会改变坐标轴方向）
- 同时有位移和其它属性时，需将位移放到最前
动画
动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
基本使用
制作动画分为两步：
- 先定义动画
- 在使用（调用）动画
1、用keyframes定义动画（类似定义类选择器）
@keyframes 动画名称 {
/*开始状态*/
0% {
transform: translateX(0);
}
/*结束状态*/
100% {
transform: translateX(480px);
}
}
动画序列
- 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列
- 在
@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果 - 动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数
- 用百分比来规定变化发生的时间，或用关键词
from和to，等同于0%和100%
2、元素使用动画
div {
width: 200px;
height: 200px;
background-color: red;
/*调用动画*/
animation-name: 动画名称;
/*持续时间*/
animation-duration: 2s;
}
常用属性
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画 |
| animation | 所有动画属性的简写属性，除了animation-play-state属性 |
| animation-name | 规定@keyframes动画的名称（必须） |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒，默认是0（必须） |
| animation-timing-function | 规定动画的速度曲线，默认是ease |
| animation-delay | 规定动画何时开始，默认是0 |
| animation-direction | 规定动画是否在下一个周期逆向播放，默认是normal，alternate逆播放 |
| animation-iteration-count | 规定动画被播放的次数，默认是1，还有infinite |
| animation-play-state | 规定动画是否正在运行或暂停，默认是正在运行running，暂停pause |
| animation-fill-mode | 规定动画结束后状态，保持forwards回到起始backwards |
属性简写
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态
- 简写属性里面不包含
animation-play-state - 暂停动画：
animation-play-state: puased; 经常和鼠标经过等其它配合使用 - 想要动画返回来，不是直接跳回来：
animation-direction: alternate; - 盒子动画结束后，停在结束位置：
animation-fill-mode: forwards;
速度曲线细节
animation-timing-function：规定动画的速度曲线，默认是ease。
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是相同的，匀速 |
| ease | 默认，动画以低速开始，然后加快，在结束前变慢 |
| ease-in | 动画以低速开始 |
| ease-out | 动画以低速结束 |
| ease-in-out | 动画以低速开始和结束 |
| steps() | 指定了时间函数中的间隔数量（步长） |
3D转换
- 3D位移（移动）：translate3d(x,y,z)
- 3D旋转：rotate3d(x,y,z)
- 透视：perspective
- 3D呈现：transfrom-style
特点
- 近大远小
- 物体后面遮挡不可见
三维坐标系
三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-APB9wTRZ-1720397187628)(https://i-blog.csdnimg.cn/direct/8d285bdca4a445ed8acfc8023bb539cb.png)]
- x轴：水平向右 x右边是正值，左边是负值
- y轴：垂直向下 y下面是正值，上面是负值
- z轴：垂直屏幕 往外面是正值，往里面是负值
3D移动translate3d
3D移动是在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。
translform: translateX(100px)：仅仅在x轴上移动transform: translateY(100px)：仅仅在y轴上移动transform: translateZ(100px)：仅仅在z轴上移动（一般使用px单位）transform: translate3d(x,y,z)：其中x、y、z分别指要移动的轴的方向上的距离
透视perspective
在2D平面产生近大远小视觉立体，但是只是效果二维。
- 如果想在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）。
- 透视，也称为视距：视距就是人的眼睛到屏幕的距离。
- 距离视觉点越近的，在电脑平面成像越大，越远成像越小。
- 透视的单位是像素。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VCzB0HeS-1720397187628)(https://i-blog.csdnimg.cn/direct/d5f18b07abc546648d3c38b82642a2a2.png)]
透视写在被观察元素的父盒子上面的
d：就是视距，视距就是一个距离人的眼睛到屏幕的距离。
z：就是z轴，物体距离屏幕的距离，z轴越大（正值），看到的物体就越大。
translateZ
transform: translateZ(100px)：仅仅是在z轴上移动。有了透视，就能清楚地看到translateZ引起的变化了。
3D旋转rotate3d
3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转。
transform: rotateX(45deg)：沿着x轴正方向旋转45度transform: rotateY(45deg)：沿着y轴正方向旋转45度transform: rotateZ(45deg)：沿着z轴正方向旋转45度transform: rotate3d(x,y,z,deg)：沿着自定义轴旋转，deg为旋转的角度；x、y、z表示旋转轴的矢量，是表示是否希望沿着该轴旋转
/*沿着x轴旋转45度*/
transform: rotate3d(1,0,0,45deg);
/*沿着x轴和y轴的对角线旋转45度*/
transform: rotate3d(1,1,0,45deg);
左手准则
x轴 rotateX
- 左手的手拇指指向x轴的正方向
- 其余手指的弯曲方向就是该元素沿着x轴旋转的（正）方向
y轴 rotateY
- 左手的手拇指指向y轴的正方向
- 其余手指的弯曲方向就是该元素沿着y轴旋转的方向（正值）
z轴 rotateZ（不需要透视，平面上旋转）
- 左手的手拇指指向z轴的正方向
- 其余手指的弯曲方向就是该元素沿着z轴旋转的方向（正值）
3D呈现transform-style
- 控制子元素是否开启三维立体环境
transform-style: flat;默认，子元素不开启3d立体空间transform-style: preserve-3d;子元素开启立体空间- 代码写给父级，但是影响的是子盒子
浏览器私有前缀
浏览器私有前缀是为了兼容老版本的写法，新版本的浏览器无须添加。
私有前缀
- -moz-：代表Firefox浏览器私有属性
- -ms-：代表IE浏览器私有属性
- -webkit-：代表safari、chrome私有属性
- -o-：代表Opera私有属性
/*圆角边框*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;