HTML笔记总结
前端知识点总结
HTML5
超文本标记语言 Hyper Text Markup Language，是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 在浏览器上运行，由浏览器来解析代码。
<!DOCTYPE html> <!--声明当前HTML文档的类型-->
<html lang="en"> <!--整个HTML文档的根标签-->
<head> <!--HTML文档的头部标签,子标签可以引用脚本、样式表、提供元信息-->
<meta charset="UTF-8">
<title>Title</title> <!--网页的标题,显示在浏览器的标题栏或标签页上--->
</head>
<body> <!--HTML文档的主体，标签包含界面上的所有显示内容。-->
</body>
</html>
注释标签
注释是用来给开发人员看的，浏览器在解析时，会忽略注释里的内容，使用<!-- 注释内容 -->的格式来表示一个注释。
<!-- 我是HTML里的注释，浏览器在看到我的时候不会解析 -->
结构标签
h1~h6
包含h1~h6系列一共六个标签。被 h 系列标签修饰的文字，字体会加粗，大小会变化。h 系列标签具有标题的语义，搜索引擎在看到这些标签时，会特别留意这些标签。所以当你只是想把文字加粗变大，不要轻易使用h1标签，请使用CSS样式来完成
<h1>我是h1标题</h1> <!-- 字号默认2倍 32px -->
<h2>我是h2标题</h2>
<h3>我是h3标题</h3>
<h4>我是h4标题</h4>
<h5>我是h5标题</h5>
<h6>我是h6标题</h6>
p
p标签用来表示段落，它是一个行内元素，一个标签独占一行。
<p>
9月15日，苹果最新发布的iPhone11系列手机13日正式启动预约。
</p>
hr
hr标签用来显示一个分割线如下图。这是一个单标签，可以设置他的宽度、颜色、对齐方式
<hr width="" color="" align="" >
br
br标签是单标签，默认状态下段落文本里的换行和多个空白是会被解析成一个空格的！可以使用br来对文本进行强制换行。
<p>
我是第一行<br>
我是第二行
</p>
div
div标签是一个无语义的标签，独占一行，一般结合CSS进行界面布局，看做一个小盒子容器，容纳其他网页元素。
<div>
<p>
我是一段文字
</p>
</div>
span
span是一个无语义的标签，一般结合CSS来对段落文字中的一些特别项进行样式的设置。
<p>
我是很<span>特殊</span>的文字
</p>
特殊符号
1个受字体大小影响的空格 等于一个字大小的空格  
小于号 < 大于号 >
emoji表情：星星： ⭐
参考地址：https://www.runoob.com/charsets/ref-emoji.html
语义修饰标签
加粗： <b></b> <strong>范例1</strong>
倾斜： <i></i> <em>范例2</em>
下划线：<u>范例3</u>
删除线：<del>范例4</del>
上标： 范例<sup>5</sup>
下标： 范例<sub>6</sub>
范例1 范例2 范例3 范例4 范例5 范例6
超链接标签
在网页中经常会显示大量的可以用鼠标点击的元素，鼠标悬停在他们身上时，一般浏览器会在左下角给出他们的链接地址
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="#abc">点我去对应标题</a>
不同状态下的超链接，显示的效果也是不一样的，超链接的状态分为四种，如果想更改每种状态下超链接的样式，请点击此处:
- 未访问状态（超链接对应的URL从未访问过）
- 已访问状态（超链接对应的URL地址以前访问过，即历史记录里存在）
- 鼠标悬停 （鼠标放上去但不点击）
- 激活状态（鼠标点击超链接不松手）
| 属性 | 取值 | 含义 |
|---|---|---|
| href | 任意URL地址 | 点击标签后跳转的链接地址 |
| href | #abc | 点击标签后跳转到当前页面上id="abc"的元素，通常用来制作目录 |
| target | _self | 默认值，表示在浏览器的当前选项卡打开超链接 |
| target | _blank | 在浏览器中开启一个新的选项卡打开超链接 |
图片标签
<img src="" alt="" title="" width="" height="">
| 属性 | 取值 | 含义 |
|---|---|---|
| src | url | 加载时的图片URL地址，也可以用本地文件名 |
| alt | 文字 | 当图片加载失败时，图片会裂开并显示的文字 |
| title | 文字 | 当鼠标悬停到图片上时显示的文字 |
| width | 数字，单位像素px | 用来指定图片的宽度 |
| height | 数字，单位像素px | 用来指定图片的高度 |
图片的大小更改宽高其中一个时，另一条边会等比例缩放，如果同时设置两个，图片有可能比例不对会变形
img 标签如果需要多个注意中间不要有空格或换行，会让图片左右多出一个空格缝隙，而且由于英语4线3格的问题，欧洲人要给pjgy等字母书写时留下第四条线的空间，所以图片的下边默认对齐的是第三条线，会导致图片下方出现缝隙，下一行无法和上一行紧贴着，想解决这个问题请点击 元素显示类型转换 查看
列表标签
有序列表
有序列表使用 <ol> 标签来表示，里面每一个列表项使用 <li> 标签 (全称list item，列表项)来表示。
<ol type="" start="">
<li>起床</li>
<li>洗漱</li>
<li>吃饭</li>
<li>出门</li>
<li>上班</li>
</ol>
| 属性 | 取值 | 描述 |
|---|---|---|
| type | a | 表示小写字母编号 |
| type | A | 表示大写字母编号 |
| type | i | 表示小写罗马数字编号 |
| type | I | 表示大写罗马数字编号 |
| type | 1 | 表示数字编号（默认值） |
| start | 1,2,3.. | 指定序号的开始值 |
| reversed | 无 | 规定了列表的条目采用倒序 |
无序列表
无序列表使用 <ul> 标签来表示，和有序列表一样，无序列表里的列表项同样使用 <li> 标签来表示。
<ul type="">
<li>啤酒</li>
<li>咖啡</li>
<li>橙汁</li>
</ul>
| 属性 | 取值 | 描述 |
|---|---|---|
| type | disc | 显示实心圆（默认值） |
| type | circle | 显示空心圆 |
| type | square | 显示正方形 |
自定义列表
自定义列表使用 <dl> 标签来表示，用于术语定义以及描述，通常用来展示词汇表或者元数据 (键-值对列表)。定义列表里的每一个列表项使用<dt>表示，同时，每一个 <dt> 列表项一般都会再跟一个 <dd> 标签对 <dt> 进行说明。
<dl>
<dt>CPU</dt>
<dd>中央处理器作为计算机系统的运算和控制核心，是信息处理、程序运行的最终执行单元</dd>
<dt>内存</dt>
<dd>内存是计算机中重要的部件之一，它是与CPU进行沟通的桥梁</dd>
<dt>硬盘</dt>
<dd>电脑硬盘是计算机最主要的存储设备</dd>
</dl>
表格标签
使用<table>来显示一个表格，其他与表格相关的标签都需要作为<table>标签的子标签。<table> 标签下的常见子标签如下：
<caption>标签用来表示表格的标题。<tr>标签作为table标签的子标签，表示一行。<th>标签放在<tr>标签下，一般作为<table>标签的第一行，表示表头。<td>标签放在<tr>标签下，作为<tr>标签的子标签，表示单元格或者一列。- rolspan 属性属于
<td>标签，表示此单元格合并几行。不管合并几个都要删除被合并的<td>标签！ - colspan 属性属于
<td>标签，表示此单元格合并几列。不管合并几个都要删除被合并的<td>标签！见下方代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1px" cellspacing="0px" cellpadding="1px">
<caption>收入表</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>收入</th>
</tr>
<tr>
<td>丁一</td>
<td>25</td>
<td>300</td>
</tr>
<tr>
<td>王二</td>
<td>23</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>20</td>
<td>200</td>
</tr>
<tr>
<td colspan="2">50</td> <!--这一行本该有3个td，但是第一个被张三合并了，第三个被自己合并了-->
</tr>
</table>
</body>
</html>
| 属性 | 取值 | 含义 |
|---|---|---|
| border | 数字，单位像素px | 表格最外面的边框粗细，一般为1px |
| cellspacing | 数字，单位像素px | 每个单元格之间的间距，一般为0px |
| cellpadding | 数字，单位像素px | 单元格中的文字与单元格边界的距离 |
表单标签
<form>标签用来向服务器提交数据，所有需要被提交给服务器的数据，都可以放在 <form> 标签里，当点击 <form> 表单里的提交按钮时，会将 <form> 表单里用户输入的所有数据都提交给指定的服务器来处理。
<form action="" method="">
<!-- 在这里放入input/select/textarea等子标签，用来让用户输入内容 -->
<input type="" name="" value="">
<select>
<option></option>
</select>
</form>
| 属性 | 取值 | 含义 |
|---|---|---|
| action | url | 表示当点击提交按钮时，form表单里的数据要提交给的某一个服务器地址 |
| method | get或post | 表示向服务器提交数据时的方式，get一般用来提交想查询的内容，post一般用来提交账号密码 |
表单内的元素input/select/textarea标签必须添加 name 属性
下拉选择框标签
<select> 标签用来在 <form> 表单里显示一个下拉选择框，每个选项使用 <option> 标签表示。
<select name="select">
<option value="河北">河北</option>
<option value="河南" selected>河南</option> <!-- selected 属性用来将某个待选项设置为默认选中 -->
<option value="湖南">湖南</option>
<option value="湖北">湖北</option>
<option value="北京">北京</option>
</select>
输入标签
<input>标签是最常用的标签之一，经常出现在<form>表单里，让用户在页面上输入数据。根据属性值 type 的不同，<input>标签在界面上显示的样式和作用也不同。
| 属性 | 取值 | 描述 |
|---|---|---|
| type | text | 默认值，显示一个普通的文本输入框 |
| type | button | 显示一个普通按钮 |
| type | submit | 显示一个提交按钮，点击时，会提交所在form表单里的数据 |
| type | image | 根据src属性指定的图片路径，加载显示一张图片 |
| type | reset | 显示一个重置按钮，点击时，会重置所在form表单里的数据 |
| type | radio | 显示一个单选框，多个相关联的单选框name属性值要一样，否则无法实现单选 |
| type | checkbox | 显示一个复选框，多个相关联的复选框name属性值要一样 |
| type | file | 显示一个文件按钮，点击时可以选择电脑上的文件 |
| type | password | 显示一个密码输入框，当用户输入时，会显示成为密文*** |
| type | number | 显示一个输入框，用户只能输入数字、正负号和字母e,其他非数字无法输入 |
| type | 显示一个文本输入框，用户输入的内容要符合电子邮箱地址，否则点击提交按钮时会出现错误提示，无法提交数据 | |
| type | tel | 控制用户输入手机号，当用户使用手机访问网页，点击文本框时，会弹出拨号键盘 |
| type | date | 选择生日 |
| type | color | 选择一个颜色 |
| name | 任意文本 | 设置input的名称，当提交给服务器时，会作为key提交 |
| value | 任意文本 | 如果需要用户输入信息，则不需要设置value，如果是单选多选或者用户可以点击选择的则需要提前填给对应选项 |
| checked | 当type为radio或者checkbox时，用来设置默认选中 | |
| autofocus | 设置当打开页面时，文本输入框是否自动获取焦点 | |
| autocomplete | 设置是否自动补全，注意，只有input标签设置了name属性以后，autocomplete才有效 | |
| required | 表示该输入框必须要填写，否则无法提交 | |
| readonly | 表示该输入框里的数据不可修改 | |
| disabled | 表示禁用文本输入框，多用于按钮 | |
| max/min | 当type为number时，用来设置最大值和最小值区间 | |
| placeholder | 当input的类型为输入框时，用来在输入框中显示提示信息 |
label
想要将文本和选择框关联在一起 ( 点字也可以选择 ) ，你需要给 input 一个 id 属性。然后把 id 传递给 for 属性。
<label for="cheese">Do you like cheese?</label>
<input type="checkbox" name="peas" id="cheese" value="yes">
另外，你也可以将 input 直接放在 label 里，这种情况就不需要 for 和 id 属性了，因为这时关联是隐含的：
<label>
Do you like peas?
<input type="checkbox" name="peas" value="yes">
</label>
音视频标签
<audio src="" controls autoplay loop muted></audio>
<video src="" controls autoplay loop muted poster=""></video>
| 属性 | 取值 | 描述 |
|---|---|---|
| src | 文件路径 | 播放文件 |
| controls | 无 | 播放控件 |
| autoplay | 无 | 自动播放(chrome不支持) |
| loop | 无 | 循环播放 |
| muted | 无 | 静音播放 |
| poster | 文件路径 | 视频封面 |
CSS3
层叠样式表 Cascading Style Sheets ，用于渲染HTML元素标签的样式
使用方式
1.行内样式表
直接在HTML标签里使用style属性来给元素设置属性。
<!-- 使用style属性来设置标签的样式 -->
<span style="color:red;">我是文字</span>
2.内部样式表
在 <head>标签里，添加 <style>标签，通过选择器找到要操作的元素，再使用CSS属性给找到的元素添加样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
span {
color:red;
}
</style>
</head>
<body>
<span>我是内容</span>
</body>
</html>
3.外部样式表
将CSS样式写入到一个单独的.css文件，再在<head>标签里，使用 <link>标签，将 test.css 文件导入到HTML文档里。
test.css
span{
color:red;
}
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="test.css"> <!--引入上面的css文件里的样式-->
</head>
<body>
<span>我是内容</span>
</body>
</html>
对比
三种CSS的使用各有优缺点，可以根据各自的特点，结合实际情况选择适合的方式
| 方式 | 优点 | 缺点 |
|---|---|---|
| 行内样式 | 如果样式重复，行内样式的优先级要高于其他两种 | 只能手动的给每一个标签设置样式，不能一次性给多个标签设置样式 |
| 内部样式 | 通过选择器同时给多个标签设置相同的样式 | 只能在当前HTML文档里使用，不能够给其他文件使用 |
| 外部样式 | 同时让多个HTML文档使用同一份样式表利用率高 | 会产生新的文件，不便于项目管理 |
选择器
选择器的核心理念是只能由上往下查找！
通配符选择器
使用 * 表示通配符选择器，用来选择网页中的所有标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* { /*选择所有标签*/
color:blue;
}
</style>
</head>
<body>
<span>我是内容</span> <!--此时所有文字都会变成蓝色-->
<p>我是一个p</p>
<div>我是一个div</div>
</body>
</html>
标签选择器
使用标签的名字作为选择器，给相同名字的所有标签同时增加样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
color:red;
}
</style>
</head>
<body>
<p>我是一个p</p> <!--所有p标签文字变红色-->
<p>我也是一个p</p>
</body>
</html>
类选择器
使用 .类名 作为类选择器，使用前需要先给相同样式的标签，按照特点进行分类，样式相同的属性值 class 要相同！
类名可以不止一个，多个类名用空格隔开，如果样式冲突以优先级高的为准！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 使用 .类名 的形式找到对应类的标签，对同一类的标签设置同样的样式 */
.chinese {
color:red;
}
.english {
color:blue;
}
.number{
color:green;
}
</style>
</head>
<body>
<!-- 先把所有的标签按照特点进行分类 -->
<p class="chinese">我是中文</p>
<p class="english">I am English</p>
<p class="number">45</p>
<p class="english">hello</p>
<p class="number">100</p>
<p class="chinese">你好</p>
</body>
</html>
id选择器
使用 #id值 作为 id 选择器，使用前要给指定的元素添加全文档唯一的 id 值,。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 使用 #id值 的形式，给指定的元素设置样式 */
#three{
color:red;
}
</style>
</head>
<body>
<p>我是第一个p</p>
<p>我是第二个p</p>
<!-- 先给指定的标签设置 id 属性，注意 id 对应的值在全文档里应该是唯一的，不能重复 -->
<p id="three">我是第三个p</p>
<p>我是第四个p</p>
</body>
</html>
并集选择器
多个选择器之间使用 逗号 , 进行分隔，表示同时给多个选择器对应的元素设置样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 同时找到p标签和class=number的标签 */
.number,p{
color:red;
}
</style>
</head>
<body>
<p>我是一个p</p>
<span class="number">45</span>
<div class="number">100</div>
<span>我是一个普通的span</span>
</body>
</html>
交集选择器
多个选择器按照优先级由小到大，从左往右连写在一起，可以给同时满足所有条件的元素增加样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 找到标签名为span同时class=number的标签 */
span.number{
color:blue;
}
</style>
</head>
<body>
<p>我是一个p</p>
<span class="number">45</span>
<div class="number">100</div>
<span>我是一个普通的span</span>
</body>
</html>
后代选择器
1.选择器之间使用 空格 进行分隔，表示左边的元素包含右边的元素。
2.选择器之间使用大于号 > 连接，表示左右必须是父子关系。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 同时选择了father里的p和son里的p */
.father p{
color:blue;
}
/* 只能选择father里的p，不能选择son里的p，因为son里的p不是儿子，是孙子 */
.father>p{
color:red;
}
</style>
</head>
<body>
<div class="father">
<p>我是father里的p</p> <!--father的儿子-->
<div class="son">
<p>我是son里的p</p> <!--father的孙子-->
</div>
</div>
<p>我是father外面，和father同级的p</p> <!--father的兄弟-->
</body>
</html>
兄弟选择器
1.两个选择器之间使用加号 + 连接，表示与它相邻的并且在它后面的那个兄弟元素
2.两个选择器之间使用加号 ~ 连接，表示与它同级的并且在它后面的所有兄弟元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 与.number相邻在它后面的span */
.number+span{
color:blue;
}
/* 所有在.number后面的兄弟span */
.number~span{
color:red;
}
</style>
</head>
<body>
<span>我是span</span> <!--不在.number后面-->
<div class="number">234</div>
<span>我是span</span> <!--与.number相邻并且在它后面-->
<p>我是p</p>
<div class="number">456</div>
<p>我也是p</p>
<span>我是span</span> <!--与.number不相邻，但还是兄弟-->
</body>
</html>
伪类选择器
| 选择器 | 例子 | 描述 |
|---|---|---|
| :link | a:link | 选择所有未被访问过的链接。 |
| :visited | a:visited | 选择所有已访问的链接。 |
| :hover | a:hover | 选择鼠标悬停上方的链接。 |
| :active | a:active | 选择鼠标点击时的链接。 |
| :checked | input:checked | 选择每个被选中的 <input> 元素。 |
| :focus | input:focus | 选择获得焦点的 <input> 元素。 |
| :disabled | input:disabled | 选择每个被禁用的 <input> 元素。 |
| :enabled | input:enabled | 选择每个已启用的 <input> 元素。 |
| :in-range | input:in-range | 选择具有指定范围内的值的 <input> 元素。 |
| :out-of-range | input:out-of-range | 选择值在指定范围之外的 <input> 元素。 |
| :invalid | input:invalid | 选择所有具有无效值的 <input> 元素。 |
| :empty | p:empty | 选择没有子元素的 <p> 元素。 |
| :first-child | p:first-child | 选择作为同级元素中第一个元素的 <p> |
| :first-of-type | p:first-of-type | 选择作为同级<p>元素中的第一个 <p> |
| :last-child | p:last-child | 选择作为同级元素中最后一个元素的 <p> |
| :last-of-type | p:last-of-type | 选择作为同级<p>元素中的最后一个 <p> |
| :nth-child(n) | p:nth-child(2) | 选择作为同级元素中第二个元素的<p> |
| :nth-of-type(n) | p:nth-of-type(2) | 选择作为同级<p>元素中的第二个<p> |
| :only-child | p:only-child | 选择作为唯一子元素的<p> |
| :only-of-type | p:only-of-type | 选择作为同级元素中唯一的 <p> 元素 |
| :not(selector) | :not(p) | 选择每个非 <p> 元素的元素。 |
| :root | root | 选择元素的根元素。 |
选择器的权重/优先级
!important -10000 > 行内样式-1000 > id选择器-100 > 类选择器-10 > 标签选择器-1 > 通配符选择器
如果选择器的描述较多，多个选择器数值之间相加，以大的为准；如果最后数值一样，谁在css中靠后谁优先
! important 用来提高一个样式的优先级
元素显示类型
行内元素
例如：a b strong i em u del span
- 横向排列
- 不能设置宽高，没有自己的形状，它的大小只能根据包含的内容决定
- 基本遵循盒子模型，但是上下方向会失效
块级元素(盒子)
例如：div p h1 ul li table
- 竖向排列，每个元素独占一行
- 可以设置宽高，都为矩形
- 遵循盒子模型，一般作为其他元素的容器
行内-块元素
例如：img input
同时具备二者特点，既能横向排列，还能设置宽高
元素类型转换
| 属性 | 取值 | 描述 |
|---|---|---|
| display | inline | 转换为行内元素 |
| display | block | 转换为块级元素 |
| display | inline-block | 转换为行内块元素 |
| display | none | 让元素不显示 |
图片标签在显示时具备行内元素 横向排列 的特点，所以它所在的那一行是可以放置 qpgjy 等字母的，由于图片下边默认对齐的是英语4线3格的第三条线，所以图片下方会留有缝隙，如果不想要缝隙，只需要把 img 的类型转换为块级元素，让图片独占一行就可以解决这个问题，代码如下：
img{
display: block;
}
字体属性
| 属性 | 取值 | 描述 |
|---|---|---|
| font-family | 系统可用字体 | 设置文字的字体 |
| font-size | 像素 | 设置字体的大小，默认16px |
| font-style | italic | 设置字体倾斜 |
| font-weight | 数字，关键词 | 设置字体的粗细，一般用 bold加粗，lighter更细 |
| font | 设置所有与字体相关的属性 | 而且属性必须要按照顺序去写 |
| color | red ； #FF0000 ; | 设置文字的颜色 |
段落格式属性
| 属性 | 取值 | 描述 |
|---|---|---|
| text-align | center / left / right / justify | 水平居中 / 左对齐 / 右对齐 / 分散两端对齐 |
| text-indent | 像素 / 2em | 表示文字的缩进距离, 可以直接用像素或者用1em就是一个字的大小 |
| line-height | 像素 | 设置行高，如果行高和所处区域高度一样就是垂直居中 |
| text-decoration | underline / overline / line-through | 设置下划线 / 上划线 / 删除线 |
| text-transform | capitalize / uppercase / lowercase | 转换英文为 单词首字母大写 / 全部大写 / 全部小写 |
| letter-spacing | 像素 | 单个字母或汉字之间的间距 |
| word-spacing | 像素 | 每个单子之间的间距 ( 单词的判定以空格划分 ) |
背景属性
| 属性 | 取值 | 描述 |
|---|---|---|
| background-color | 颜色取值 | 设置背景颜色 |
| background-image | url(图片路径) | 设置一张背景图片 |
| background-size | 宽度 高度 ； cover / contain |
设置背景图片的大小，cover是图片的最短边刚好超出盒子(多余裁剪) contain是图片的最长边刚好超出盒子（覆盖不完整） |
| background-repeat | repeat / no-repeat | 设置背景图片是否重复 |
| background-position | 关键字或者px值 | 设置背景图片的位置 |
| background-attachment | fixed | 设置背景图片固定在浏览器窗口中 |
| background | 设置所有与背景相关的属性 | 设置所有的背景相关属性 |
阴影属性
| 属性 | 取值 | 描述 |
|---|---|---|
| text-shadow | 1px 1px 1px red | 文本阴影: x轴偏移 y轴偏移 影子模糊度 影子颜色 |
| box-shadow | 1px 1px 1px blue | 盒子阴影: x轴偏移 y轴偏移 影子模糊度 影子颜色 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 150px;
height: 50px;
text-shadow:5px 5px 2px green;
box-shadow: 3px 3px 1px gray;
}
</style>
</head>
<body>
<div>我是盒子里的文字</div>
</body>
</html>
列表属性
| 属性 | 取值 | 描述 |
|---|---|---|
| list-style-type | disc(实心圆) / circle(空心圆) / square(实心方块) / none(去掉符号) |
列表每一项前的符号样式 |
| list-style-image | url() [可以不写] | 用图片替换符号 |
| list-style-position | outside(默认) / inside | 如果是 outside 符号在内边距里，如果是 inside 符号在 li 里 |
| list-style | 前三个属性值简写 |
<!-- 案例一：符号为inside在li里 -->
<style type="text/css">
ul{
list-style: square inside;
}
li{
background-color: red;
}
</style>
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>
<!-- 案例二：取消每一项的符号 -->
<style type="text/css">
ul{
list-style: none;
}
</style>
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>
溢出属性
| 属性 | 取值 | 描述 |
|---|---|---|
| overflow | visible(默认) | 溢出时在父元素外正常显示 |
| overflow | hidden | 溢出部分隐藏 |
| overflow | scroll | 强制增加滚动条，即使不溢出 |
| overflow | auto | 溢出增加滚动条，不溢出不增加 |
| white-space | nowrap | 长文本溢出不换行，直到遇到br标签 |
| text-overflow | ellipsis | 溢出的文本变为省略号 |
<!--省略号案例-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
width: 200px;
height: 50px;
background-color: yellow;
white-space: nowrap; /* 1.先把文字变成1行 */
overflow: hidden; /* 2.隐藏溢出的部分 */
text-overflow: ellipsis; /* 3.变为省略号 */
}
</style>
</head>
<body>
<p>
华为新手机双11惊爆价998！华为新手机双11惊爆价998！
</p>
</body>
</html>
透明度属性
| 属性 | 取值 | 描述 |
|---|---|---|
| opacity | 0~1 的小数 | 让背景和其中的文字一同透明，0 是完全透明 ， 1 是不透明，搭配过渡动画可以实现逐渐显示或隐藏 |
浮动
所谓的标准流就是网页中的默认元素排列是垂直方向，每个元素独占一行，从上向下排列。如果想让盒子能够水平排列，就需要让他们浮动。
浮动的特性：
1.浮动元素会脱离标准流 (浮动的盒子不再保留原先的位置)
2.浮动的元素会在一行内显示并且元素顶部对齐
3.浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会在下一行对齐。
| 属性 | 取值 | 描述 |
|---|---|---|
| float | left / right / none( 默认 ) | 左浮动 / 右浮动 / 不浮动 ( 默认 ) |
清除浮动
如果一个盒子浮动后，与它位置相关的其它盒子不想受到这个浮动元素带来的影响，就可以选择清除浮动。
影响1：在下图中蓝盒子由于红盒子浮动，出现在红盒子的下方，让蓝盒子清除浮动后，蓝盒子会认为红色没有浮动，所以按照标准排列，放在红盒子下方第二行。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.a{
width:100px;
height:100px;
background-color:red;
float:left;
}
.b{
width:150px;
height:150px;
background-color:blue;
clear:left;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
影响2：当我们不写父元素的高度，想让子元素撑开父元素时，自动计算高度时，如果父元素里的子盒子全部浮动，那么子盒子就不在占用父元素里的位置，最后导致父元素的高度为 0 缩起来，父元素后面的标准流盒子会跟着向上移动。如图，红色线为父元素的边框，由于高度是0，所以边框合在了一起，黄色子盒子正在浮动，黑色是父元素下方的标准流盒子，已经紧挨父元素上来了。
解决方案 ：额外标签法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father {
width: 300px;
/*没有设置高度，以最后一个子元素的位置来决定里面高度*/
background-color: deepskyblue;
}
.son {
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
/*这个额外添加的标签没有大小不占空间，但是会清除浮动，所以一定会跟在son的后面*/
.extra {
clear: left;
}
.blackbox {
height: 150px;
background-color: black;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
<!--最后增加的空标签，它的位置决定父元素计算的高度，由于清除浮动所以前面的son会占第一行而它只能在第二行-->
<!--又因为它作为最后一个子元素本身没有高度，所以父元素计算完它前面的元素高度后就结束了-->
<div class="extra"></div>
</div>
<div class="blackbox"></div>
</body>
</html>
| 属性 | 取值 | 描述 |
|---|---|---|
| clear | left / right / both | 清除左浮动 / 清除右浮动 / 全部 |
盒子模型
盒子模型是css布局的基石，它规定了网页元素如何显示以及元素间的相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、内边距、外边距、内容，这就是盒模型。
| 属性 | 取值 | 描述 |
|---|---|---|
| padding | 1/2/3/4个数字 | 同时设置4个方向内边距，根据取值的数量，分别对应写法： 4周 --- 上下 | 左右 --- 上 | 左右 | 下 --- 上 | 右 | 下 | 左 |
| padding-left / right / top / bottom | 像素 | 单独设置一个方向内边距 |
| margin | 1/2/3/4个数字 | 同时设置4个方向外边距，根据取值的数量，分别对应写法： 4周 --- 上下 | 左右 --- 上 | 左右 | 下 --- 上 | 右 | 下 | 左 |
| margin-left / right / top / bottom | 像素 | 单独设置一个方向外边距 |
| border | 1px solid black | 同时设置4个方向边框的粗细、样式、颜色，更多样式请参考：边框特性 |
| border-left / right / top / bottom | 1px solid black | 单独设置一个方向的边框 |
| box-sizing | content-box border-box |
标准盒 content-box 宽高是内容空间，不计算内边距和边框； 怪异盒 border-box 宽高是最终大小，计算完内边距和边框的 |
内边距特性
内边距是 content 内容与 border 边框之间的距离，它的本质是通过在盒子外增加空间实现的，会改变盒子最终的大小！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
padding: 50px;
background-color: deepskyblue;
}
</style>
</head>
<body>
<div>我是里面的文字部分</div>
</body>
</html>
可以看到原来100px边长的盒子，增加了一圈50px内边距后，边长已经变为200px !
边框特性
边框与内边距一样，同样是在盒子外增加一圈线，也会改变盒子的大小！
| 属性 | 取值 | 描述 |
|---|---|---|
| border-style | solid | 实线 |
| border-style | dashed | 虚线 |
| border-style | dotted | 点状线 |
| border-style | double | 双实线 |
| border-radius | 像素 | 边框圆角弧度 |
外边距特性
外边距可以看作是盒子外的一圈空气墙，虽然不改变盒子的大小，但它和盒子绑定在一起是需要占用实际空间的，也就是说假如盒子边长50px，左右外边距10px，那么盒子的width就是70px，而剩余空间宽度是 60px 的话，这个盒子是放不进去的！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
width: 200px;
height: 150px;
background-color: yellow;
}
.box div {
width: 50px;
height: 50px;
background-color: red;
float: left;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
浮动带给外边距的影响
<!-- 外边距在默认状态下，取的是两者中的最大值-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.a {
width: 100px;
height: 100px;
background-color: red;
margin-bottom: 50px;
}
.b {
width: 100px;
height: 100px;
background-color: blue;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
<!-- 如果元素浮动了，那么外边距取两者之和-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.a {
width: 100px;
height: 100px;
background-color: red;
float: left;
margin-right: 50px;
}
.b {
width: 100px;
height: 100px;
background-color: blue;
float: left;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
网页初始化
网页中的 body 元素默认是带一圈 8px 的外边距，会让我们写的任何元素都无法贴紧浏览器窗口。
而且不少网页元素都是有默认内外边距的，比如：p h1 ul 我们利用 * 通配符选择器取消所有元素初始边距！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
</body>
</html>
盒子水平居中
目前的学习中，盒子只能水平居中，因为在网页默认设置中，如果 margin-top 或 margin-bottom 设置为 auto，则会自动被计算为0px，所以无法垂直居中。后面会开专题解决此问题！留坑~
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: yellow;
margin: 0px auto;
/* 上下为0px 左右auto自动计算 */
}
</style>
嵌套盒子中的外边距BUG
在元素嵌套中，如果子元素想利用 margin-top 向下移动，那么会触发外边距合并的BUG，导致子元素和父元素同时向下
正确效果：
触发BUG后的效果： 
<!--错误示范！！！-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.father {
width: 200px;
height: 200px;
background-color: yellow;
}
.son {
width: 100px;
height: 100px;
background-color: red;
margin-top: 50px; /* 问题在这！问题在这！问题在这！*/
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
解决方案一
既然子元素的 margin-top 不能用，还可以对父元素设置 padding-top 但是要注意内边距的特性，会让父盒子上方增加高度，如果想维持父盒子的最终大小不变，需要从父盒子的原有高度中减去增加的 padding-top , 代码如下：
<style type="text/css">
.father{
width: 200px;
height: 150px; /* 200px - 50px = 150px */
background-color: yellow;
padding-top: 50px;
}
.son{
width: 100px;
height: 100px;
background-color: red;
}
</style>
解决方案二
给父元素增加上边框 border-top ，但是要注意边框和内边距一样，会让父盒子上方增加高度，如果想维持父盒子的最终大小不变，需要从父盒子的原有高度中减去增加的 border-top ，代码如下：
<style type="text/css">
.father{
width: 200px;
height: 199px; /* 200px - 1px = 199px */
background-color: yellow;
border-top: 1px solid yellow; /* 增加的上边框也会增大盒子高度 */
}
.son{
width: 100px;
height: 100px;
background-color: red;
margin-top: 50px; /* 此时会从父元素上边框开始计算50px就不会让父元素向下移动 */
}
</style>
解决方案三
让子元素浮动，有可能导致父元素高度丢失，解决方案点击此处，代码如下：
<style type="text/css">
.father{
width: 200px;
height: 200px;
background-color: yellow;
}
.son{
width: 100px;
height: 100px;
background-color: red;
float: left; /*浮动后不占空间，父元素如果没有设置高度会出问题*/
margin-top: 50px;
}
</style>
定位
1.为什么使用定位
场景1：某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子.
场景2：当我们滚动窗口的时候，盒子是固定屏幕某个位置的。
定位也是用来布局的，它由两部分组成：
定位 = 定位模式 position + 偏移 (left right top bottom)
定位模式 用于指定一个元素在文档中的定位方式。偏移则决定了该元素的最终位置。
| 属性 | 取值 | 描述 |
|---|---|---|
| position | static （默认） | 静态定位，相当于无定位，元素框正常生成 |
| position | relative | 相对定位，元素原本所占的空间仍保留 |
| position | absolute | 绝对定位，元素框从标准文档流完全删除，并相对于其父元素定位 |
| position | fixed | 固定定位，让元素不随网页的滚动而移动，像小广告一样固定在浏览器中 |
| position | sticky | 粘性定位，css3新属性，随页面滚动后实现吸附效果 |
| left | 数字 | 设置和左边界的距离 |
| right | 数字 | 设置和右边界的距离 |
| top | 数字 | 设置和上边界的距离 |
| bottom | 数字 | 设置和下边界的距离 |
| z-index | 整数 | 设置显示优先级，谁的值大网页就优先显示谁 |
相对定位 relative
相对定位的特点：（务必记住）
1.偏移参考对象是自身原来所在的位置。
2.移动后原来的位置空间仍然是保留的，不允许后面的元素补上来。因此，相对定位没有脱离网页！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
}
.box1 {
background: red;
}
.box2 {
background: blue;
position: relative;
left: 80px;
top: 120px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box1"></div>
</body>
</html>
绝对定位 absolute
绝对定位的特点：（务必记住）
1.完全脱离网页标准流 （相比于浮动更加完全，浮动是盖不住文字的，而绝对定位会直接遮住下面的文字）
2.当父元素没有定位时，偏移的参考对象是浏览器窗口的第一屏四周边界
3.当父元素相对定位时，偏移的参考对象是==父元素的边界==
定位口诀 —— “子绝父相”—— 子元素是绝对定位的话，父元素要用相对定位
疑问：为什么在布局时，子元素使用绝对定位时，父元素就要用相对定位？为什么不也用绝对定位呢？
观察下图，思考一下在布局时，左右两个方向的箭头图片 以及 父盒子 的定位方式。
固定定位 fixed
固定定位的特点：（务必记住）
1.完全脱离文档流
2.不跟随页面的滚动条一起移动，经常用作页面中的导航栏或广告
3.固定位置的参考对象是浏览器窗口
粘性定位 sticky
粘性定位的特点：
1.吸附位置的参考对象是浏览器窗口
2.必须添加 top 、bottom 、left 、right 其中一个才有效果
3.粘性定位像相对定位一样，不脱离文档流，吸附后仍然占有原先位置
4.兼容性较差 IE 不支持
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.header {
background: yellow;
width: 100%;
height: 200px;
}
.nav {
background: red;
width: 500px;
height: 100px;
margin: 0 auto;
position: sticky;
/* 粘性定位到某一位置 */
top: 0px;
}
.footer {
height: 2000px;
background: green;
}
</style>
</head>
<body>
<div class="header"></div>``
<div class="nav"></div>
<div class="footer"></div>
</body>
</html>
过渡动画
transition 允许监控的css属性值在一定时间内平滑的过渡变换，这种效果可以在鼠标改变元素状态时触发，以过渡动画的效果逐渐改变这些css属性值。
| 属性 | 取值 | 描述 |
|---|---|---|
| transition-property | 任意单一属性或all | 需要增加过渡动画的css属性 |
| transition-duration | X s | 动画持续时间 |
| transition-delay | X s | 动画发生前延迟时间 |
| transition-timing-function | linear (匀速) | 动画类型，见下图 |
| transition | 复合属性 | 属性 持续时间 延迟时间 动画类型 |
<!--实操案例-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: yellow;
transition: all 2s 0.5s linear;
}
/* 鼠标悬停在div上时触发宽、高和背景色的变化 */
div:hover{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
关键帧动画
animation 动画可以设置多个时间节点来精确控制一组动画的变换，相比较过渡动画，本身是自动运行的不需要触发条件。
| 属性 | 取值 | 描述 |
|---|---|---|
| animatiion-name | @keyframes的名字 (必要) | 动画名称 |
| animatiion-duration | X s (必要) | 动画时间 |
| animatiion-delay | X s | 延迟时间 |
| animatiion-timing-function | linear (匀速) / ease (默认) | 动画类型 |
| animatiion-iteration-count | 整数 / inifinite(无限) | 循环次数 |
| animatiion-direction | normal 正常 / reverse 反向 alternate 交替 / alternate-reverse 反向交替 |
运动方向 |
| animatiion-play-state | running 播放 / paused 暂停 | 播放状态 |
| animatiion-fill-mode | none(默认) | 动画执行之前和之后不会应用动画中的任何一帧 |
| backwards | 动画在延迟等待时应用第一帧画面 | |
| forwards | 动画在结束后维持最后一帧画面 | |
| both | 二者兼顾 | |
| animation | 复合属性，除了play-state都可以写 |
animation-fill-mode 属性规定当动画未播放时元素显示的样式。
（动画不播放有两种情形：当动画完成后不播放时 或当 动画有设置延迟时间未开始播放时）
使用方式：
@keyframes 动画名称{
from{} /*动画开始*/
to{} /*动画结束*/
}
制作动画时我们需要关注的只有两点，1.是发生的变化 2.是每个变化之间所用的时间百分比
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: black;
animation: abc 4s; /* 动画总时间4s */
}
/* 动画刚开始由红色变为绿色耗时25%:1s,
由绿色变黄色耗时50%:2s,
由黄色变蓝色耗时25%:1s,
动画结束由蓝色 瞬间变为 默认黑色 */
@keyframes abc{
0%{background-color: red;} /*可以用from代替*/
25%{background-color: green;}
75%{background-color: yellow;}
100%{background-color: blue;} /*可以用to代替*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
案例1：轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.show {
width: 600px;
height: 336px;
border: 5px solid black;
border-radius: 10px;
margin: 100px auto;
overflow: hidden;
}
/* 让所有图片横向排列 */
img {
display: block;
width: 600px;
height: 336px;
float: left;
}
/* 装图片的超长盒子向左平移 */
.film {
width: 9999px;
height: 336px;
animation: abc 8s linear infinite;
}
/* 鼠标悬停轮播图区域暂停动画 */
.show:hover .film {
animation-play-state: paused;
}
/* 每张图片经历播放和切换两个过程，动画时长10s
20%:2s的时间位置不变用来观看，5%:0.5s的时间平移切换下一张 */
@keyframes abc {
0% {
transform: translateX(0px);
}
20% {
transform: translateX(0px);
}
25% {
transform: translateX(-600px);
}
45% {
transform: translateX(-600px);
}
50% {
transform: translateX(-1200px);
}
70% {
transform: translateX(-1200px);
}
75% {
transform: translateX(-1800px);
}
95% {
transform: translateX(-1800px);
}
100% {
transform: translateX(-2400px);
}
}
</style>
</head>
<body>
<!-- 轮播图展示框 -->
<div class="show">
<!-- 胶卷 -->
<div class="film">
<img src="code/img/1.jpg">
<img src="code/img/2.jpg">
<img src="code/img/3.jpg">
<img src="code/img/4.jpg">
<!--重复的图片是为了两次动画切换之间的衔接没有闪烁-->
<img src="code/img/1.jpg">
</div>
</div>
</body>
</html>
案例2：逐帧动画
需要在 animation属性中添加值 steps(n,[end|start] )
n 表示每次变化时使用的帧数，帧数越多画面越平滑； 但是需要选择动画的哪一帧看不到，
end 表示看不到动画的最后一个画面，start 表示看不到动画的第一个画面，比如下图中，steps(3,end)
代表两次变化之间用 50%:1.5s 切换3个画面，但是最后的绿色看不到，黄色→绿色只经过了2个画面，最后一帧消失了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
div {
width: 200px;
height: 300px;
background: black;
animation: abc 3s steps(3, end) infinite;
}
@keyframes abc {
0% {
background-color: red;
}
50% {
background-color: yellow;
}
100% {
background-color: green;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
div {
width: 200px;
height: 300px;
background: url(code/charector.png); /*精灵图：由7个小图组成，每个小图180px*/
animation: abc 1s steps(7, end) infinite; /*从0平移到-1260均分7步，那么每个移动的画面就是瞬移180px */
}
/* 本来从第1张开始想看到最后1张只需要向左平移-1080px，由于最后一帧看不到，所以要把背景再向左平移180px*/
/* 此时动画结束的最后一帧就是右边背景图(平铺)的第1张，而下次动画也从第1张开始，就正好衔接上了 */
@keyframes abc {
0% {
background-position: 0px;
}
100% {
background-position: -1260px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2D变换
transform可以实现元素的位移、旋转、缩放等效果。
平移
相比于 margin 和 position，使用 translate 不会影响其它元素的位置，而且浏览器不会重新加载，所以效率和实用性非常高。
<style>
div {
width: 200px;
height: 200px;
background-color: red;
transition: all 2s;
}
div:hover {
transform: translate(100px, 100px); /* 沿着x、y轴进行平移 左上为负，右下为正 */
}
</style>
旋转
<style>
div {
width: 200px;
height: 200px;
background-color: red;
transition: all 2s;
}
div:hover {
transform: rotateZ(90deg); /* 围绕Z轴旋转顺时针为正逆时针为负，deg是角度，Z轴垂直于电脑屏幕 */
}
</style>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
transition: all 2s;
}
div:hover {
transform: rotateZ(90deg);
transform-origin: right bottom; /* 改变旋转中心 */
}
</style>
缩放
<style>
div {
width: 200px;
height: 200px;
background-color: red;
transition: all 2s;
}
div:hover {
transform: scale(1.5,1.5); /* 把x轴、y轴放大1.5倍 如果为负数会颠倒*/
}
</style>
复合效果
<style>
div {
width: 200px;
height: 200px;
background-color: red;
margin: 100px;
transition: all 2s;
}
div:hover {
transform: translate(100px,100px) rotate(90deg) scale(-1);
}
</style>
3D变换
/* 3d平移就是沿着Z轴向眼睛平移,但是Z轴垂直于屏幕所以看不到效果，需要结合景深或者旋转观察 */
transform: translateZ(100px);
/* 景深：实现远小近大的效果，这条属性需要写给被平移元素的父盒子上，代表默认距离眼睛1000px，离眼睛越近越大 */
perspective: 1000px;
/* 3d旋转就是围绕x轴或y轴旋转 */
transform: rotateX(360deg);
transform: rotateY(360deg);
/* 3d缩放就是在Z轴上缩放，但是单独使用没有效果 */
transform: scaleZ(5) rotateX(45deg);
案例：旋转骰子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.box {
width: 500px;
height: 600px;
border: 5px solid gray;
margin: 100px auto;
transform-style: preserve-3d;
position: relative;
animation: dr 5s linear infinite alternate;
}
.box div {
width: 300px;
height: 300px;
margin: -150px;
position: absolute;
left: 50%;
top: 50%;
opacity: 0.9;
}
p {
font-size: 30px;
text-align: center;
height: 100px;
line-height: 100px;
word-spacing: 50px;
}
.box div:nth-child(1) {
background-color: red;
transform: translateZ(150px);
}
.box div:nth-child(2) {
background-color: orange;
transform: translateX(-150px) rotateY(-90deg);
}
.box div:nth-child(3) {
background-color: yellow;
transform: translateY(-150px) rotateX(90deg);
}
.box div:nth-child(4) {
background-color: green;
transform: translateY(150px) rotateX(-90deg);
}
.box div:nth-child(5) {
background-color: cyan;
transform: translateX(150px) rotateY(90deg);
}
.box div:nth-child(6) {
background-color: blue;
transform: translateZ(-150px) rotateY(180deg);
}
@keyframes dr {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(180deg)
}
}
</style>
</head>
<body>
<div class="box">
<div>
<p></p>
<p>⚫</p>
<p></p>
</div>
<div>
<p></p>
<p>⚫ ⚫</p>
<p></p>
</div>
<div>
<p>⚫</p>
<p>⚫</p>
<p>⚫</p>
</div>
<div>
<p>⚫ ⚫</p>
<p></p>
<p>⚫ ⚫</p>
</div>
<div>
<p>⚫ ⚫</p>
<p>⚫</p>
<p>⚫ ⚫</p>
</div>
<div>
<p>⚫ ⚫</p>
<p>⚫ ⚫</p>
<p>⚫ ⚫</p>
</div>
</div>
</body>
</html>
flex弹性布局
优势与对比
传统布局中我们通常使用浮动与定位解决问题
布局原理
采用 flex 属性布局的元素通常为父元素，我们把它叫做 container（容器）。当添加了 flex 属性后，它的子元素会自动变为容器里的 item（项目）。flex 布局给 item 带来的主要影响有以下几点：
- 子元素 item 类似于浮动既可以横向排列也可以纵向排列
- 行内元素会自动转变为块级元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
width: 400px;
height: 100px;
background-color: yellow;
/* 只需要给父元素增加此属性就可改变为弹性布局 */
display: flex;
}
.item {
width: 100px;
height: 30px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
</body>
</html>
容器属性
主轴方向
在 flex 布局中，分为主轴和侧轴两个方向，不同于平常的x轴、y轴，主轴侧轴是可以随时改变的，子元素 item 的排列顺序总是跟随主轴方向，确定了主轴以后，剩下的另一个方向就是侧轴。在默认情况下，主轴是横向水平向右 ， 侧轴是纵向垂直向下。
主轴的方向取值共有4种：
| 属性 | 取值 | 描述 |
|---|---|---|
| flex-direction | row (默认) | 水平从左向右 |
| flex-direction | column | 垂直从上向下 |
| flex-direction | row-reverse | 水平从右向左 |
| flex-direction | column-reverse | 垂直从下向上 |
子元素换行
默认情况下，子元素会在主轴方向上一直排列不会换行，如果放不下了，会自动压缩子元素的宽高，让子元素原来设置的宽高全部失效。换行后在不设置 align-content 的情况下，默认排列方式为：平分侧轴方向上的长度，以每一行为单位，项目在每一行中遵循 align-items 属性。
| 属性 | 取值 | 描述 |
|---|---|---|
| flex-wrap | nowrap (默认) | 不换行 |
| flex-wrap | wrap | 换行 |
复合属性
flex-flow 同时设置主轴方向 flex-direction 和是否换行 flex-wrap
flex-flow:row wrap;
主轴排列方式
justify-content 设置子元素 item 在主轴上的对齐方式，一定要确定好主轴的方向，不论是哪个方向起点都是 start , 终点都是 end
| 属性 | 取值 | 描述 |
|---|---|---|
| justify-content | flex-start (默认) | 从主轴起点开始，与起点对齐 |
| justify-content | flex-end | 从主轴终点开始，与终点对齐 |
| justify-content | center | 在主轴方向上居中 |
| justify-content | space-between | 在主轴方向上两端对齐 |
| justify-content | space-around | 空白环绕，中间空白大小相等，两侧空白是中间的一半 |
| justify-content | space-evenly | 空白环绕，每个空白大小相等 |
/* 弹性布局 */
display: flex;
/* 主轴方向 */
flex-direction: row;
/* 主轴排列方式 */
justify-content: flex-start;
观察下列图片理解不同的排列方式,主轴方向时,元素的顺序不会有变化,永远是123,如果主轴变为了row-reverse,就是321,
column同理,元素会变成竖着的123,但排列方式是不变的,只不过是纵向去看的,建议动手实战！
侧轴排列方式（单行或单列）
align-items 设置的是在侧轴方向上只有一行或一列元素时，项目的排列方式
| 属性 | 取值 | 描述 |
|---|---|---|
| align-items | flex-start (默认) | 在侧轴方向对齐起点 |
| align-items | flex-end | 在侧轴方向对齐终点 |
| align-items | center | 在侧轴方向居中 |
| align-items | stretch | 在不设置 item 大小时默认会拉伸元素撑满侧轴 |
侧轴排列方式（多行）
align-content 在没有项目换行时是无法生效的，它只能作用于已经换行的所有项目。
| 属性 | 取值 | 描述 |
|---|---|---|
| align-content | flex-start (默认) | 从侧轴起点开始，与起点对齐 |
| align-content | flex-end | 从主轴终点开始，与终点对齐 |
| align-content | center | 在主轴方向上居中 |
| align-content | space-between | 在主轴方向上两端对齐 |
| align-content | space-around | 空白环绕，中间空白大小相等，两侧空白是中间的一半 |
| align-content | space-evenly | 空白环绕，每个空白大小相等 |
项目属性
本文来自博客园，作者：不尽人意的K，转载请注明原文链接：https://www.cnblogs.com/duan-rui/articles/hcj.html
