1、编程工具：
、Visual Studio Code
、快捷键：
补齐基础标签：!+Enter
单行注释、取消单行注释：Ctrl+/ 多行注释：Alt + Shift + A
2、HTML 基础标签
、HTML 的基本结构
<html></html>
<head></head>
<body></body>
、HTML5 的标题
<h1>至<h6>用来定义 6 个级别的章节标题，<h1>是一级标题，字体最大；<h6> 是六级标题，字体最小。
、HTML5 的段落标签
主要包括<p>、<br>、<hr>3 种
<p>标签：表示文本的一个段落。
<br>标签：在文本中产生换行符，用于段落的换行。
<hr>标签：被用来分割HTML 页面中的内容，并显示为一条水平线。
、HTML5 的文本格式化标签
主要包括：<b>、<i>、<em>、<strong>
<b>标签：显示加粗文本效果，表示相对于普通文本字体上的区别，不表示
任何特殊的强调。
<i>标签：显示斜体文本效果
<em>标签：把文本定义为强调的内容
<strong>标签：把文本定义为语气更强的强调的内容
、HTML5 的图片标签
<img>标签：标签用于向网页中添加相关图片。网页中常见的图片格式有JPG、PNG 和GIF。有两个必需的属性：
alt 属性：规定图像的替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。
src 属性：指定图像的插入路径。可以是相对路径，也可以是绝对路径。
<figure>标签：是HTML5 的新增标签，用来表示网页上一块独立的内容。内容可以是图片、统计图或代码示例。
<figure>标签和<img>标签的搭配用法
<figcaption>标签：定义figure 元素的标题。指元素应该被置于"figure" 元素的第一个或最后一个子元素的位置。
、HTML5 的列表标签
列表分为有序列表、无序列表和定义列表
有序列表<ol>：列表项符号默认为阿拉伯数字序列。列表项用<li>定义。
无序列表<ul>：列表项默认为黑色实心圆点。列表项用<li>定义。
定义列表<dl>：当页面上每个列表项都需要标题和内容时，需要使用<dl>定义列表。
、HTML5 的超链接标签
<a>标签定义超链接，用于从一个页面跳转到另一个页面，有两个重要属性href 和target：
href 属性：用于指定超链接目标
target 属性：规定在何处打开链接文档。
、HTML5 的表格标签
<table>标签:用于定义表格，是表格最外层的标签。.
<caption>标签:展示一个表格的标题。
<tr>标签:代表表格中的行。
<td>标签:代表表格中的单元格。
<th>标签:代表表格中的表头单元格。
<thead>标签:代表表格中的表头。
<tbody>标签:代表表格中的一块具体数据(表格主体)。
<tfoot>标签:代表表格中的表尾。
、传统的布局标签<div>和<span>
<div>标签是最常用的布局容器。<div>标签没有语义，相当于一个区块容器，可以容纳各种网页元素。区块容器有两大特点:
①区块元素必须独占一行，不允许本行的后面再有其他内容;
②区块容器默认情况下的宽度与它的父级标签的宽度相同。
因此，可以把<div>与</div>中的内容视为一个独立的对象，用于 CSS 的控制。在<div>标签中加上class 或id 属性可以应用额外的样式。
<span>标签用来组合文档中的行内元素。行内元素的特点刚好跟区块容器的特点相反。
①行内元素不需要独占一行,本行后面还允许有其他的内容。
②行内元素的宽度在默认情况下与它内部内容的宽度相同。
、表单
利用表单可以实现与用户的交互。表单在网页中主要负责数据采集功能，比如收集浏览者的信息或实现搜索等功能。单击表单中的提交按钮时，在表单中输入的信息就会被提交到服务器中，服务器的有关应用程序将对提交的信息进行处理，并将处理的结果返回到用户的客户端浏览器上。一个表单由以下3 个基本部分组成。
表单标签：这里面包含了处理表单数据所用CGI 程序的URL 以及数据提交到服务器的方法。
表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮：包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的 CGI 脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
用于描述表单对象的标签可以分为表单<form>标签和表单域标签两大类。
<form>用于定义一个表单区域，表单域标签用于定义表单中的各个元素。表单组成标签如表所示。
HTML5 新增的<inpu>类型
H5 中新增了一些类型。使用起来更加方便，包括:colcr、date、datetime、datetime-local、 emal、month、number、range. search、tel、time、url、week 等。语法：
color 类型：color 类型主要用于选取颜色。
date 类型：从一个日期选择器中选择一个日期。
datetirme 类型：从一个日期和时间控制器（本地时间）中选择一个日
期。
datetime-local 类型：从一个日期和时间控制器（本地时间)中选择一
个日期和时间（无时区)。
email 类型：用于输入一个 E-mail 地址，在提交表单时,会自动验证email 域的值是否合法有效。
month 类型：month 类型用于选择月份与年份（无时区)。
number 类型：用于包含数值的输入域，设定一个数值输入区域，格式
range 类型：range 类型用于包含一定范围内数字值的输入域，显示为滑动条。<inpu>使用下面的属性来规定对数字类型的限定。
max:规定允许的最大值。min:规定允许的最小值。step:规定合法的数字间隔。value:规定默认值。
search 类型：用于搜索域，比如站点搜索或Google 搜索。tel 类型：用于定义输入电话号码字段。
time 类型：用于输入时间控制器（无时区)。url 类型：用于应该包含URL 地址的输入域。week 类型：用于选择周和年（无时区)
、HTML5 的各种语义化分段元素
在 HTML5 出来之前，我们用div 来表示页面章节，但是这些div 都没有实际意义,只能表示网页的某些区域。HTML5 的革新之一就是引入了语义化标签。使用HTML5 语义化标签的优势如下：
去掉样式或样式丢失的时候能让页面呈现清晰的结构。
屏暮阅读器（如果访客有视障)会完全根据制作者的标记来“读”网页。
平板、手机等设备可能无法像普通计算机的浏览器一样来渲染网页(通常是因为这些设备对CSS 的支持较弱）
有利于搜索引擎优化(SEO)
代码结构清晰、方便阅读,有利于团队合作开发。
用于搭建网页框架结构的 HTML5 语义化标签。
<header>标签：代表“网页”或“section”的页眉，可以是网页或任意“section”的头部部分,其通常包含一些引导和导航信息。用法如下。
<footer>标签：代表“网页”或“section”的页脚，可以是“网页”或“section”的底部部分通常含有该节的一些基本信息,如作者、相关文档链接、版权资料。
<nav>标签：代表页面的导航链接区域,用于定义页面的主要导航部分。
<aside>标签：用在 artice 内表示主要内容的附属信息，用在artice 之处可作为侧边栏。
<section>标签：代表文档中的“节”或“段”。
<article>标签：一个在文档、页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用，譬如论坛的帖子、博客的文章、一篇用户的评论。<article>会有一个标题（通常会在header 里）和一个<footer>页脚。
3、DIV+CSS
、CSS 应用方式（1.10）
HTML 文档中使用 css 的方法分为外部样式、内部样式和行内样式
外部样式：当样式需要应用于很多页面时，外部样式表将是理想的选择。
内部样式：当单个文档需要特殊的样式时，就应该使用内部样式表。
行内样式：直接把CSS 代码添加到HTML 的标记中。
CSS 优先级规则：行内样式>内部样式>外部样式>浏览器默认样式
、css 规则的基本语法
CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。其中，选择器是连接HTML 元素与样式之间的纽带，它规定了样式作用在哪个HTML 元素上。每条声明由一个属性和一个属性值组成，属性和属性值被冒号分开，以分号结束。
、CSS 选择器
基本选择器：基本选择器分为标签选择器、类选择器和ID 选择器。
标签选择器：是指以网页中已有的HTML 标签名作为名称的选择器。
类选择器：使用class 自定义名称选择多个标签，选择器以“.”号开头。
ID 选择器：为标有特定id 的标签指定样式。选择器以“#”号开头。
三种基本选择器的优先级：ID 选择器 > 类选择器 > 标签选择器
高级选择器：高级选择器分为子选择器、后代选择器、属性选择器、通用选择器、伪类和伪元素选择器、分组选择器。
子选择器
作用：满足后一个选择器是前一个选择器的直接子代，样式生效。语法：选择器 1>选择器 2> >选择器 n{}。
后代选择器
作用：满足后一个选择器是前一个选择器的后代，样式生效语法：选择器 1 选择器 2 选择器 n{}。
属性选择器
作用：可以根据元素的属性及属性值来选择元素
通用选择器
作用：用*匹配HTML 文档中的所有标签元素。语法：*{}。
分组选择器
作用：为多个标签元素设置一个样式
语法：选择器 1,选择器 2, ,选择器 n{}，多个选择器之间用英文逗号分割。
、基础样式
文本样式
对齐文本：使用text-align 设置文本的对齐方式，值有start，end， left，right，center，justify。
处理空白：使用whitespace 属性来指定空白字符的处理方式，下面是whitespace 属性的值。
normal | 默认值，空白符被压缩，文本行自动换行 |
nowrap | 空白符被压缩，文本行不换行 |
pre | 空白符被保留，文本只在遇到换行符的时候换行 |
pre-line | 空白符被压缩，文本会在一行排满或遇到换行符时换行空白符被 保留 |
pre-wrap | 在一行排满或遇到换行符时换行 |
指定单词，字母，行之间的间距，首行缩进letter-spacing 设置字母间的间距；
word-spacing 设置单词之间的间距； line-height 设置行高；
text-indent 属性用于指定文本块的首行缩进。创建文本阴影
text-shadow 为文本创建阴影同创建元素阴影一样四个值分别是水平和竖直阴影，长度值，阴影颜使用字体font-family 设置字体
font-size 设置字体大小font-weight 设置字体的粗细
font-style 设置字体的样式属性值有bormal,italic（斜体），oblique（倾斜字体）
使用 font 属性可一次性简写上述属性。
链接样式
一般用<a>标签表示链接，可以嵌入<href>表示跳转地址，其中<href="#">表示跳转到自己，链接有如下四种状态：
a：link 普通的、未被访问的链接
a：visited 用户已访问的链接
a：hover 鼠标指针位于链接的上方
a：active 链接被点击的时刻
列表样式
无序列表：使用标签：<ul>、<li>；
list-style-type：disc(默认的实体圆)、circle（空心圆）、square（实体方块）、none（什么都没有）；
list-style-position: outside（默认值,表示标志在列表项之外）；inside:
（表示标志在列表项之内）；
列表项图片:list-style-image: url(图像路径)； list-style:列表标志 列表标志位置 列表项图像;
有序列表：使用标签：<ol>、<li>；属性（type）：A、a、I、i、start
自定义列表：使用标签：<dl>、<dt>、<dd>(<dialog>与<dt>、<dd>一起使用表示对话)
、伪类和伪元素（1.11）
伪类：元素不同状态表现不同样式，通常分为两类：静态伪类：只能用于超链接
:link：超链接点击之前的样式。
:visited：超链接点击之后的样式。动态伪类：能用于任何元素
:hover:鼠标放到元素上的状态，最常用的状态。
:active:点击时没有松开鼠标的状态。
:focus:输入框在获得焦点时的状态。
伪元素：文档结构中没有出现的元素，伪元素使用“::”
::first-letter：选择的是元素中第一个文字。
::first-line：选择的是元素中第一行文字，会根据浏览器的缩放自动调整。
::before：在元素内容之前添加新内容，必须配合 content 属性使用。
::after：在元素内容之后添加新内容，必须配合 content 属性使用。
注意：::before、::before 可以把伪元素当成元素来使用，可添加样式。作用：通过伪类和伪元素选择器可以灵活地选择元素和元素的状态，让开发速度更快，选择性更多。
:link | a:link | 超链接的默认样式 |
:visited | a:visited | 已经访问过的链接样式 |
:hover | a:hover | 鼠标指针悬停状态的链接样式 |
:active | a:active | 当鼠标左键按下时,被激活(鼠标按下去的瞬间)的链接
样式 |
:focus | input:focus | 选择获得焦点的输入字段 |
:checked | input:checked | 匹配已被选中的input 元素（只用于单选按钮和复选框) |
:not(selector) | :not(p) | 选择所有 p 以外的元素 |
:nth-child(n) | p:nth-child(2) | 选择所有 p 元素的父元素的第 2 个子元素 |
:first-child | p:first-child | 选择器匹配属于任意元素的第 1 个子元素的<p>元素 |
:last-child | p:last-child | 选择器匹配屈于任意元素的最后一个子元素的<p>元
素 |
:before | p:before | 在每个<p>元素之前插入内容 |
:after | p:after | 在每个<p>元素之后插入内容 |
:first-line | p:first-line | 选择 p 元素包含的第 1 行内容 |
:first-letter | p:first-letter | 选择 p 元素包含的第 1 个字母 |
、背景
背景颜色background-color:颜色值
颜色值:颜色名，16 进制颜色值，rgb 颜色值，rgba 颜色值。
如果没有设置背景颜色，那么背景就是透明。默认值: transparent。背景图片
background-image: url(图片路径)
图片路径:相对路径或者绝对路径
默认值:none 表示没有背景图片
背景颜色和背景图片可以同时设置背景重复
background-repeat:值
repeat:默认值表示重复
no-repeat:表示不重复
repeat-x:表示水平方向重复
repeat-y:表示垂直方向重复背景尺寸
background-size:宽度 高度
尺寸单位：背景图片的宽度和高度就是一个固定的值
百分比：以父元素的百分比来设置图片的宽度和高度
contain：把背景图片扩展至最大尺寸，使宽度或高度完全适应内容区域.保持原来的宽高比例
cover：把背景图片扩展至足够大，使背景图片完全覆盖背景区域。保持原来的宽高比例。背景图片的某些部分无法显示在元素区域中。
当只设置一个值时，第2 个值是auto。图片不会变形，会保持原来的宽高比例。
背景定位background-position:X(水平位置) Y(垂直位置)
当只设置一个值时，另一个值就是center(表示居中）。
方向定位:top（上） bottom（下） right（右） left（左） center（中)。
尺寸单位定位:参考位置是背景图片左上角与元素左上角水平垂直距离。设置一个值时，这个值一定是水平位，另一个值是center。
4) 定位:0%0%图片在左上角，50% 50%图片水平垂直居中，100% 100%图片在右下角。
5) 背景定位可以使用负值，方向与正值相反。背景固定（设置背景图片是否随页面滚动）
background-attachment:值
scroll：默认值，背景图片会随页面滚动而移动
fixed：背景图片不会随页面滚动而移动背景简写
background :颜色值 背景图片 背景重复 背景定位/背景尺寸 背景固定;
可以在一个属性中设置所有背景属性，用空格隔开。如果某个值不写，也不会出间题
使用背景简写，输入的代码最少，浏览器对背景简写支持度更高。
、盒子模型
页面元素的特点：
所有元素都可以有宽高所有元素都是一个矩形所有元素都看成一个盒子
盒子包括：外边距+边框+内边距+元素内容
外边距
外边距要素：
外边距的方向：top、bottom、left、right 外边距尺寸：像素值或百分比
外边距语法：margin-方向：外边距尺寸外边距可同时设置 4 个方向外边距
margin | : | 10px | 20px | 30px; | margin:上 左右 下; |
margin | : | 10px | 30px; |
| margin :上下 左右; |
margin | : | 30px; |
|
| 4 个方向一样的值 |
注意：
尺寸使用百分比时，参考的是父级尺寸；尺寸可使用正负值。
元素上下排列时，上下外边距会合并（上下外边距取最大值）。
元素左右排列时，左右外边距会叠加（左右外边距会相加）。
<span>行级元素只有左右外边距，没有上下外边距。
内边距
内边距要素：
内边距的方向：top、bottom、left、right 内边距尺寸：像素值或百分比
内边距语法：padding-方向：外边距尺寸内边距可同时设置 4 个方向外边距
注意：
尺寸使用百分比时，参考的是当前元素尺寸；
尺寸只能是正值，不可以设置为负值。
所有元素都可以设置内边距
边框
边框的四大要素：
边框宽度（border-width）：常用单位为像素（px），不能使用百分比边框颜色（border-color）：设置边框颜色
边框样式（border-style）：solid（实线），dashed（虚线），dotted
（点线），double（双实线）
边框方向：border-top （ 上边框） ，border-right （ 右边框） ，border-bottom（下边框），border-left（左边框），border（四边框）
语法：border-边框方向：边框宽度 边框颜色 边框样式；属性值之间有空格隔开。
圆角两大要素：
圆角方向：通过垂直和水平方向可以表示一个角，方向一：上下；方向二：左右，上左、上右、下左、下右。
圆角半径：水平半径和垂直半径
语法：border-top-left-radius:水平半径 垂直半径圆角边框可同时设置 4 个角边框阴影
box-shadow:值 1 值 2 值 3 值 4;
值1：水平阴影位置，必填。正值时，阴影在右；负值时，阴影在左。值2：垂直阴影位置，必填。正值时，阴影在下；负值时，阴影在上。值3：阴影模糊距离，可选值。
值 4：阴影尺寸，可选值。
值 5:阴影颜色，可选值。默认黑色。
、元素的宽高（1.12）
块级元素:
可以设置宽高
不能和其它元素呆在一行
当没有设置宽高时，宽度和父级宽度一样，高度由元素内容的高度决定
当设置有宽高时,元素的宽高就是设置的值
常见的块级元素：div、p、h1~h6、ul、ol、li、dl、dt、dd。
行级元素：
不可以设置宽高
可以和其他元素呆在一起
宽高由内容决定
常见的行内元素：a、span、em、i、del、label。
行内块级元素：
可以设置宽高
可以和其他元素呆在一行
当没有设置宽高时，宽度由元素内容决定
当设置有宽高时，元素的宽高就是设置的值
常见的行内块元素：input、img、td。
、元素类型转换
任何元素都可以进行类型转换，元素类型之间可以相互转换。语法：dispaly:值;
block：转块级元素
inline：转换成行级元素
inline-block：转成行内块级元素
none:隐藏元素，页面元素依然存在。
显示元素：block、inline、inline-block 注意：元素类型转换不会影响元素自身的功能
、浮动
浮动：让块级元素能在一行语法：float: 方向;
浮的特点：
浮动元素就像浮云一样浮起来了。浮动元素后面的正常元素会自动补位
浮动元素会脱离正常的文档流，并没有完全脱离文档流
浮动元素会被父元素宽度所约束，所以浮动元素并没有完全脱离文档流
浮动元素会对它下面正常元素中的文字产生影响（文字环绕效果）
动的特点：
当浮动元素上一行是正常元素，这个浮动元素只能待在当前行，不能跑到上一行
左浮动：元素会向左跑，会从上一行最右边出来继续往左跑，直到遇到有浮动属性的元素，才会停止。
右浮动：元素会向右跑，会从上一行最左边出来继续往右跑，直到遇到有浮动属性的元素，才会停止。
清除浮动:规定元素哪一侧不能有浮动元素
clear: left;元素左侧不能有浮动元素
clear: right;元素右侧不能有浮动元素
clear: both;元素左右两侧都不能有浮动元素
注意:设置清除浮动属性时，要考虑元素的加载顺序。
高度塌陷
由于父元素中的子元素设置了浮动属性，会造成父元素高度塌陷。防止高度塌陷:
直接给父元素设置高度。
在元素内容之后加一个块级元素，设置左右两侧不能有浮动元素。就可以防止父元素高度塌陷。
使用伪元素方法在元素内容之后加一个空内容，转成表格元素。设置左右两侧不能有浮动。（最合适的方法）
注意：父元素设置有高度时，不用清除浮动。父元素没有设置高度时，一定要清除浮动。
、定位
作用：规定元素的位置，定位用于没有规律的元素布局
定位的三种类型：相对定位、绝对定位、固定定位
定位使用方法：
规定是哪一个定位方式，position:定位方式。
指定在方向上的偏移量：top 和bottom；left 和right。上下只能设置一个，左右只能设置一个。上和左优先。
各种定位方式的特点
相对定位（relative）：
指定了相对定位后，元素就是一个定位元素，脱离文档流，但又没有完全脱离文档流。
相对定位元素脱离了文档流，但是原来的位置还得保留。
相对定位是相对于原来的位置进行定位。绝对定位（absolute）
指定了绝对定位后，元素就是一个定位元素，完全脱离文档流。
原来的位置不会保留。
绝对定位是相对于最近有定位属性的父元素进行定位，如果往上没有找到有定位元素的父元素，才会相对于body 元素定位。
固定定位（fixed）
指定了固定定位后，元素就是一个定位元素，完全脱离文档流。
原来的位置不会保留。
固定定位是相对于浏览器窗口进行定位，不是相对于body 元素定位。
定位偏移量
使用合法的尺寸单位，px、em、百分比等
可以使用负值，当使用负值时，元素的偏移方向与正值相反
元素相对于哪个元素进行定位，使用百分比时，就是哪个元素宽度或高度的百分比。
层级
语法：z-index：值；值不带单位，只是数字，代表所处层数。
每一个定位元素都会独占一层。
数字越大，层级越高。层级默认值为0。
当层级一样，后写元素会盖住先写元素。后来居上。
3.12、过渡（1.13）
元素从一种样式变换为另一种样式时为元素添加效果。必须要触发一个事件才能实现。
过渡四大要素：
要控制的css 属性名，默认值all，不是必需。
完成过渡需要的时间，单位可以时s、ms。必须值。
过渡的速度曲线
过渡开始延迟时间
过渡语法：
transition：属性1 过渡时间；
transition-property：属性1,属性2,属性3,...,属性n;
transition-duration：过渡时间1，过渡时间2，...；
transition-timing-function：速度曲线1,速度曲线2,...； 速度曲线的值：
ease：变速，慢—快—慢（默认）。linear：匀速，相同速度。
ease-in：慢—快。ease-out：快—慢。
ease-in-out：慢—快—慢。
cubic-bezier(n,n,n,n)：函数中定义自己的值。
transition-delay:延迟时间1，延迟时间2，... ;只设置一个值时，所有元素的延迟时间都是一样的。
过渡简写：
所有属性的过渡值都一样时的语法： transition：all 过渡时间速度曲线延迟开始时间;
不同属性的过渡值不一样时的语法：
transition：属性名 1 过渡时间 1 速度曲线 1 延迟开始时间 1,属性名 2 过
渡时间 2 速度曲线 2 延迟开始时间 2;
、动画：
通过改变元素的样式给元素添加动画效果。
使用@keyframes 创建动画：
/* 使用@keyframes 创建一个动画，动画名自己设置 */ @keyframes 动画名{
/* 动画初始样式 */ from{
width: 100px;height: 100px; background-color: brown;
}
/* 动画结束样式 */ to{
width: 500px;height: 500px; background-color: blue;
}
}
选中标签，使用animation 属性绑定动画
div{
animation: 动画名称 完成动画时间 速度曲线 延迟开始时间播放次数 反向播放 保持最后的状态;
}
要绑定的动画名称：必须要有；
完成动画时间：必须要有，单位s、ms；
速度曲线：默认是ease 变速，其他曲线值跟过渡完全一样；
延迟开始时间：单位s、ms；
播放次数：默认次数是1，infinite 设置无限播放；
反向播放：默认值normal 不反向，轮流反向播放alternate，必须要有播放次数；
保持最后的状态：forwards。
通过百分比创建动画（最常用，最好用，设置复杂动画可用）
动画播放和暂停
animation-play-state：paused（暂停）或者 running（播放）
过渡和动画的区别：
过渡需要事件触发，动画不需要事件触发
过渡只有开始—结束，动画可以设置多个关键帧
、转换
、位移转换
语法：transform：translateX（位移值）或者translateY（位移值）
注意：
参考点为自己本身元素的中心点。
位移设置成百分比后，是自身元素尺寸的百分比。元素的尺寸是否固定不会影响百分比的计算。
2D 位移简写：transform: translate(X 轴位移,Y 轴位移);
transform：translateZ（Z 轴位移值）；正值往前，负值往后。不能设置百分比。
视距：perspective：视距值。
视距属于transform 的前置属性，写在父级中。
视距值越大，离我们越远，视距越小，离我们越近。
视距值默认值是：无穷大。
视距值要大于Z 轴位移值。
3D 位移简写：transform: translate3d（X 轴，Y 轴，Z 轴）3.14.2、缩放转换
元素放大或缩小
X 轴放大或缩小：transform: scaleX(值); Y 轴放大或缩小：transform: scaleY(值); 缩写：transform: scale（X,Y）；
值：
缩放比例，参考自身尺寸。
默认值为1，小于1 表示缩小，大于1 表示放大。
可以是负值，元素会发生翻转。3.14.3、角度转换
2D 角度转换
语法：transform:rotateZ(-45deg);
注意：元素转一个角度，角度单位deg。可以是负值，正负值方向相反。默认的基点在元素中心点。
3D 角度转换
绕X 轴旋转，旋转的角度是与Y 轴的夹角语法：transform:rotateX(45deg);
正值元素上远离，元素下靠近。负值相反。
绕Y 轴旋转，旋转的角度是与X 轴的夹角语法：transform:rotateY(-45deg);
正值元素右远离，元素左靠近。负值相反。
同时设置三轴旋转
语 法 ： transform:rotateX(-45deg) rotateY(-45deg) rotateZ(-45deg)
哪个轴不旋转可以不写，没有顺序。3.14.4、倾斜转换
X 轴（水平方向）倾斜
语法：transform: skewX(30deg);
X 轴（水平方向）倾斜，倾斜后与Y 轴行成夹角，元素高度不变。
正值逆时针倾斜，负值顺时针倾斜。
Y 轴（垂直方向）倾斜
语法：transform: skewY(30deg);
Y 轴（垂直方向）倾斜，倾斜后与X 轴行成夹角，元素宽度不变。
正值顺势针倾斜，负值逆时针倾斜。
同时设置倾斜
语法：transform: skew(X 轴,Y 轴);
必须设置两个值，否则另一个值默认为0。
3.14.5、转换简写
语 法 ： transform ： translate(100px,50px) scale(0.5,0.8) rotateX(-45deg) skewX(30deg)
把需要的属性值依次写上就行。属性值书写有顺序，顺序不一样，效果不一样。
3.14.6、背面可见度
定义当元素不面向屏幕时是否可见
backface-visibility: hidden; 3.15、弹性盒子(1.16)
弹性盒子是一种布局方式
特点：改变元素的排列方式。采用flex 布局的元素，称为flex 容器(简称“容器”)。它的所有子元素自动成为容器成员，称为
flex 项目（简称“项目”）。所以弹性盒子必须设置在父元素
语法：display: flex;
定义弹性元素排列方向及顺序：语法：flex-direction: 值;
row：表示主轴是水平正向
row-reverse：表示主轴是水平反向。
column：表示主轴是垂直正向。
column-reverse：表示主轴是垂直反向。
定义弹性元素换行：语法：flex-wrap: 值;
nowrap：不换行，默认。
wrap：换行，交叉轴正向换行。
wrap-reverse：换行，交叉轴反向换行。
定义弹性元素主轴方向上的对齐方式：语法：justify-content: 值;
flex-start：开始方向对齐，默认值。
flex-end：结束方向对齐。
Center:居中对齐。
space-between:两端对齐，项目之间的间隔相等。
space-around:每个项目两侧的间隔相等。项目和项目之间的间隔会累加。
定义弹性元素交叉轴方向上的对齐方式：
语法：align-items: 值;
flex-start：开始方向对齐。
flex-end：结束方向对齐。
center：居中对齐。
baseline：项目的第一行文字的基线对齐。
stretch：如果项目未设置高度或设置为auto，将占满整个容器的高度。默认值。
多个子元素在交叉轴方向上的对齐方式语法：align-content: 值;
flex-start：开始方向对齐。
flex-end：结束方向对齐。
Center：居中对齐。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
space-between：会拉伸容器内每一个项目占用的空间，填充方式为给每个项目下方增加空白，占满整个交叉轴。
设置弹性元素的顺序语法：order:0。
元素按照order 属性值的增序进行布局。值越小排列越靠前，拥有相同order 值的元素按照他们在源代码中出现的顺序进行布局。默认值为0。
设置弹性元素的扩展比率来分配剩余空间
语法：flex-grow: 0;
默认值为0。把弹性盒子内所有元素的flex-grow 值加起来，剩余空间就平均分为多少份。flex-grow 的值就代表占剩余总空间的多少份。
定义元素的最大最小宽高
max-width：300px。定义元素的最大宽度。该属性值会对元素的宽度设置一个最高限制。因此，元素可以比指定值窄，但不能比其宽。不允许指定负值。
min-width：300px。定义元素的最小宽度。该属性值会对元素的宽度设置一个最小限制。因此，元素可以比指定值宽，但不能比其窄。不允许指定负值。
max-height：300px。定义元素的最大高度。该属性值会对元素的高度设置一个最高限制。因此，元素可以比指定值矮，但不能比其高。不允许指定负值。
min-height：300px。定义元素的最小高度。该属性值会对元素的高度设置一个最矮限制。因此，元素可以比指定值高，但不能比其矮。不允许指定负值。
3266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
