2021-04-06

2023-12-31 08:26:58

<div id="article_content" class="article_content clearfix">
<link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-b5506197d8.css">
<div id="content_views" class="markdown_views prism-atom-one-dark">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
</svg>

<div class="toc">
<h3><a name="t0"></a><a name="t0"></a>普歌-HTML5+CSS3复习总结</h3>
<ul><li><a href="#HTML_1" target="_self">一.HTML基础</a></li><li><ul><li><a href="#1_2" target="_self">1.网页开发工具</a></li><li><a href="#2_32" target="_self">2.常用基本标签</a></li><li><ul><li><a href="#1_33" target="_self">（1）文本标签</a></li><li><a href="#2_114" target="_self">（2）表格标签</a></li><li><a href="#3_138" target="_self">（3）列表标签</a></li><li><a href="#4_166" target="_self">（4）表单标签</a></li></ul>
</li><li><a href="#3HTML5_333" target="_self">3.HTML5新增</a></li><li><ul><li><a href="#1HTML5__334" target="_self">(1)HTML5 新增的语义化标签</a></li><li><a href="#2_341" target="_self">(2）新增的多媒体标签</a></li><li><a href="#3input__347" target="_self">(3)新增的input 类型</a></li><li><a href="#4_349" target="_self">(4)新增的表单属性</a></li></ul>
</li></ul>
</li><li><a href="#CSS_352" target="_self">二.CSS</a></li><li><ul><li><a href="#1css_353" target="_self">1.css选择器</a></li><li><ul><li><a href="#1css_355" target="_self">（1）css基础选择器</a></li><li><a href="#2css_395" target="_self">（2）css复合选择器（引用选择器）</a></li></ul>
</li><li><a href="#2css_402" target="_self">2.css字体属性</a></li><li><a href="#3css_404" target="_self">3.css文本属性</a></li><li><a href="#4css_449" target="_self">4.css的引入方式</a></li><li><a href="#5css_471" target="_self">5.css元素显示模式</a></li><li><a href="#6css_477" target="_self">6.css背景</a></li><li><a href="#7css_523" target="_self">7.css三大特性</a></li><li><a href="#8_533" target="_self">8.页面布局</a></li><li><ul><li><a href="#1_534" target="_self">（1）盒子模型</a></li><li><a href="#2_571" target="_self">（2）浮动</a></li><li><a href="#3_576" target="_self">（3）定位</a></li></ul>
</li><li><a href="#9css_601" target="_self">9.css用户界面样式</a></li><li><a href="#10_verticalalign__620" target="_self">10. vertical-align 属性应用</a></li><li><a href="#11_629" target="_self">11.溢出的文字省略号显示</a></li><li><a href="#12CSS3__633" target="_self">12.CSS3 的新特性</a></li><li><ul><li><a href="#1_634" target="_self">（1）属性选择器</a></li><li><a href="#2_639" target="_self">（2）结构伪类选择器</a></li><li><a href="#3_646" target="_self">（3）伪元素选择器</a></li><li><a href="#42D_649" target="_self">（4）2D转换</a></li><li><a href="#5_684" target="_self">（5）动画</a></li><li><a href="#63D_740" target="_self">（6）3D转换</a></li><li><a href="#7_787" target="_self">（7）浏览器私有前缀</a></li></ul>
</li></ul>
</li></ul>
</div>

<h1><a name="t1"></a><a name="t1"></a><a id="HTML_1"></a>一.HTML基础</h1>
<h2><a name="t2"></a><a name="t2"></a><a id="1_2"></a>1.网页开发工具</h2>
<pre class="prettyprint"><code class="prism language-html has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"><!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>Document</title>
</head>
<body>

</body>
</html>
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li></ul></pre>
（1）<！DOCTYPE >标签
<blockquote>
<ul><li>它是文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。</li><li>声明位于文档中的最前面的位置，处于< html> 标签之前。</li><li>它不是一个HTML 标签，是文档类型声明标签。</li></ul>
</blockquote>
（2）lang语言
<blockquote>
<ul><li>用来定义当前文档显示的语言。</li><li>en定义语言为英语 , zh-CN定义语言为中文</li><li>对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文</li></ul>
</blockquote>
（3）charset 字符集
<blockquote>
<ul><li>字符集(Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。</li><li>上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码。</li></ul>
</blockquote>
<h2><a name="t3"></a><a name="t3"></a><a id="2_32"></a>2.常用基本标签</h2>
<h3><a name="t4"></a><a name="t4"></a><a id="1_33"></a>（1）文本标签</h3>
<ul><li>标题</li></ul>
<pre class="prettyprint"><code class="prism language-html has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"><h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>

<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li></ul></pre>
<img src="https://www.icode9.com/i/ll/?i=20210402201341276.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述">
<pre class="prettyprint"><code class="prism language-html has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"><h1 align="对齐方式">文本内容</h1>
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
<pre class="prettyprint"><code class="has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">三种对齐方式：left，center，right
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
<ul><li>文本</li></ul>
<img src="https://www.icode9.com/i/ll/?i=20210402202301513.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述">
上标与下标：
<pre class="prettyprint"><code class="prism language-html has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"><sup>上标标记内容</sup>
<sub>下标标记内容</sub>
例：
x<sup>3</sup></br>
2x<sub>2</sub>
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre>
<img src="https://www.icode9.com/i/ll/?i=20210402203318923.png" alt="在这里插入图片描述">
<ul><li>段落，水平线</li></ul>
<pre class="prettyprint"><code class="prism language-html has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"><p>段落标签</p> //有较大空白缝隙
<br>换行标签 //强制换行，单标签
<hr> //水平线标记
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre>
<ul><li>div和span标签</li></ul>
<pre class="prettyprint"><code class="prism language-html has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"><div> </div> // 用来布局，但是现在一行只能放一个div。大盒子
<span> </span> //用来布局，一行上可以多个span。小盒子
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre>
<ul><li>图像标签和路径</li></ul>
<pre class="prettyprint"><code class="prism language-html has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"><img src="图片的位置" >
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
<div class="table-box"><table><thead><tr><th>属性</th><th>属性值</th><th>说明</th></tr></thead><tbody><tr><td>src</td><td>图片路径</td><td>必须属性</td></tr><tr><td>alt</td><td>文本</td><td>替换文本，图片不能显示的文字</td></tr><tr><td>title</td><td>文本</td><td>提示文本鼠标放到图像上，显示文字</td></tr><tr><td>width</td><td>像素</td><td>设置图片的宽度</td></tr><tr><td>height</td><td>像素</td><td>设置图像的高度</td></tr><tr><td>border</td><td>像素</td><td>设置图片的边框粗细</td></tr></tbody></table></div>
<pre class="prettyprint"><code class="has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"> *相对路径*：以引用文件所在位置为参考基础，图片相对于HTML页面的位置
*绝对路径*：是指目录下的绝对位置，直接到达目标位置，通常是从**盘符**开始的路径。
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre>
<img src="https://www.icode9.com/i/ll/?i=20210402210817501.png" alt="在这里插入图片描述">
<ul><li>超链接标签</li></ul>
<pre class="prettyprint"><code class="prism language-html has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"><a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
<img src="https://www.icode9.com/i/ll/?i=20210402211436940.png" alt="在这里插入图片描述"> 链接分类：
<ul><li>1.外部链接</li><li>2.内部链接</li><li>3.空链接:如果当时没有确定链接目标时，< a href="#"> 首页< /a > 。</li><li>4.下载链接</li><li>5.网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.</li><li>6.锚点链接: 点击链接,可以快速定位到页面中的某个位置。</li></ul>
<h3><a name="t5"></a><a name="t5"></a><a id="2_114"></a>（2）表格标签</h3>
<pre class="prettyprint"><code class="prism language-html has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"> <table> //是用于定义表格的标签
<tr> //定义表格中的行，必须嵌套在<table> </table>标签中。
<th> </th> // 表格的表头部分,加粗显示
<td>单元格内的文字</td> // 定义表格中的单元格，必须嵌套在<tr></tr>标签中。
...
</tr>
...
</table>
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li></ul></pre>
表格结构标签
<pre class="prettyprint"><code class="prism language-html has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"><thead></thead>： //用于定义表格的头部。
<tbody></tbody>： //用于定义表格的主体。
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre>
合并单元格 跨行合并：rowspan=“合并单元格的个数” 跨列合并：colspan=“合并单元格的个数”
表格相关属性： <img src="https://www.icode9.com/i/ll/?i=20210402214251794.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述">
<h3><a name="t6"></a><a name="t6"></a><a id="3_138"></a>（3）列表标签</h3>
无序列表
<pre class="prettyprint"><code class="prism language-html has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"> <ul>
<li></li>
</ul>
//最常用，没有固定的顺序，默认有小圆点
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre>
有序列表
<pre class="prettyprint"><code class="prism language-html has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"> <ol>
<li></li>
</ol>
//有先后顺序，默认有数字
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre>
自定义列表
<pre class="prettyprint"><code class="prism language-html has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"> <dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
//1. 一个名称对应一个值 2.一个名称对应多个值 3.多个名称对应一个值
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre>
<h3><a name="t7"></a><a name="t7"></a><a id="4_166"></a>（4）表单标签</h3>
表单的组成
提示信息,表单域,表单控件（表单元素)
<ul><li>表单域</li></ul>
<pre class="prettyprint"><code class="prism language-html has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"> <form action=“url地址” method=“提交方式” name=“表单域名称”>
各种表单元素控件
</form>
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre>
<img src="https://www.icode9.com/i/ll/?i=20210402221058991.png" alt="在这里插入图片描述">
<pre class="prettyprint"><code class="has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">- 在我们写表单元素之前,应该有个表单域把他们进行包含.
- 表单域是form标签.
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre>
<ul><li> 表单控件（1.input表单元素2.select表单元素3.textarea元素） input 输入表单元素<img src="https://www.icode9.com/i/ll/?i=20210403091529202.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"> <pre class="prettyprint"><code class="has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">1. 刚打开页面就默认显示几个文字：可以给这些表单元素设置value 属性=“值”
2.一打开就让某个单选按钮或者复选框是选中状态：checked 属性：表示默认选中状态。添加checked="checked"
3.radio (或者checkbox）如果是一组，我们必须给他们命名相同的名字
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre> </li></ul>
<pre class="prettyprint"><code class="prism language-html has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"><input type="radio" name="sex" />男
<input type="radio" name="sex" />女
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre>
<pre class="prettyprint"><code class="has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"> < label> 标签
作用：点击区域内就可以选择
代码：< label for = "id"> < /label>
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre>
select下拉表单元素
<pre class="prettyprint"><code class="prism language-html has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"> <select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre>
<pre class="prettyprint"><code class="has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"> 1.< select> 中至少包含一对< option>
2. 在<option> 中定义selected =“selected " 时，当前项为默认选中项。
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre>
textarea文本域元素
语法：
<pre class="prettyprint"><code class="prism language-html has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"> <textarea rows="3" cols="20">
文本内容
</textarea>
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre>
<pre class="prettyprint"><code class="has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">1.通过<textarea> 标签可以轻松地创建多行文本输入框。
2.cols=“每行中的字符数”，rows=“显示的行数”，我们在实际开发中不会使用，都是用CSS 来改变大小。
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre>
简历案例：
<pre class="prettyprint"><code class="prism language-html has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"><!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人信息注册</title>
</head>

<body>
<h4 align="center">个人介绍 </h4>
<table align="center">
<tr>
<td>姓名</td>
<td>
<input type="text" value="请输入您的姓名">
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" id="nan" checked="checked"><label for="nan"><img src="images/up.jpg"
width="10" />男
<input type="radio" name="sex" id="nv"><label for="nv"><img src="images/down.jpg" width="10" />女
</td>
</tr>
<tr>
<td>出生日期：</td>
<td>
<select>
<option>--请选择年份--</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
</select>
<select>
<option>--请选择月份--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select> <select>
<option>--请选择日--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select>
<option>北京</option>
<option>重庆</option>
<option selected="selected">山西</option>
<option>山东</option>
</td>
</select>
</tr>
<tr>
<td>个人爱好：</td>
<td>
<input type="checkbox" name="love">唱歌
<input type="checkbox" name="love">画画
<input type="checkbox" name="love">跳舞
</td>
</tr>

<tr>
<td>了解更多</td>
<td><a href="#">关注公司</a> </td>
</tr>
<tr>
<td>附件</td>
<td>
<h5>选拔标准</h5>
<ul>
<li>态度认真</li>
<li>阳光开朗</li>
<li>专业技能突出</li>
</ul>
</td>
</tr>
</table>
</body>

</html>
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li><li style="color: rgb(153, 153, 153);">48</li><li style="color: rgb(153, 153, 153);">49</li><li style="color: rgb(153, 153, 153);">50</li><li style="color: rgb(153, 153, 153);">51</li><li style="color: rgb(153, 153, 153);">52</li><li style="color: rgb(153, 153, 153);">53</li><li style="color: rgb(153, 153, 153);">54</li><li style="color: rgb(153, 153, 153);">55</li><li style="color: rgb(153, 153, 153);">56</li><li style="color: rgb(153, 153, 153);">57</li><li style="color: rgb(153, 153, 153);">58</li><li style="color: rgb(153, 153, 153);">59</li><li style="color: rgb(153, 153, 153);">60</li><li style="color: rgb(153, 153, 153);">61</li><li style="color: rgb(153, 153, 153);">62</li><li style="color: rgb(153, 153, 153);">63</li><li style="color: rgb(153, 153, 153);">64</li><li style="color: rgb(153, 153, 153);">65</li><li style="color: rgb(153, 153, 153);">66</li><li style="color: rgb(153, 153, 153);">67</li><li style="color: rgb(153, 153, 153);">68</li><li style="color: rgb(153, 153, 153);">69</li><li style="color: rgb(153, 153, 153);">70</li><li style="color: rgb(153, 153, 153);">71</li><li style="color: rgb(153, 153, 153);">72</li><li style="color: rgb(153, 153, 153);">73</li><li style="color: rgb(153, 153, 153);">74</li><li style="color: rgb(153, 153, 153);">75</li><li style="color: rgb(153, 153, 153);">76</li><li style="color: rgb(153, 153, 153);">77</li><li style="color: rgb(153, 153, 153);">78</li><li style="color: rgb(153, 153, 153);">79</li><li style="color: rgb(153, 153, 153);">80</li><li style="color: rgb(153, 153, 153);">81</li><li style="color: rgb(153, 153, 153);">82</li><li style="color: rgb(153, 153, 153);">83</li><li style="color: rgb(153, 153, 153);">84</li><li style="color: rgb(153, 153, 153);">85</li><li style="color: rgb(153, 153, 153);">86</li><li style="color: rgb(153, 153, 153);">87</li><li style="color: rgb(153, 153, 153);">88</li><li style="color: rgb(153, 153, 153);">89</li><li style="color: rgb(153, 153, 153);">90</li><li style="color: rgb(153, 153, 153);">91</li><li style="color: rgb(153, 153, 153);">92</li><li style="color: rgb(153, 153, 153);">93</li><li style="color: rgb(153, 153, 153);">94</li><li style="color: rgb(153, 153, 153);">95</li><li style="color: rgb(153, 153, 153);">96</li><li style="color: rgb(153, 153, 153);">97</li><li style="color: rgb(153, 153, 153);">98</li><li style="color: rgb(153, 153, 153);">99</li><li style="color: rgb(153, 153, 153);">100</li><li style="color: rgb(153, 153, 153);">101</li><li style="color: rgb(153, 153, 153);">102</li><li style="color: rgb(153, 153, 153);">103</li><li style="color: rgb(153, 153, 153);">104</li><li style="color: rgb(153, 153, 153);">105</li><li style="color: rgb(153, 153, 153);">106</li><li style="color: rgb(153, 153, 153);">107</li><li style="color: rgb(153, 153, 153);">108</li><li style="color: rgb(153, 153, 153);">109</li><li style="color: rgb(153, 153, 153);">110</li></ul></pre>
<img src="https://www.icode9.com/i/ll/?i=20210403093517417.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述">
<h2><a name="t8"></a><a name="t8"></a><a id="3HTML5_333"></a>3.HTML5新增</h2>
<h3><a name="t9"></a><a name="t9"></a><a id="1HTML5__334"></a>(1)HTML5 新增的语义化标签</h3>
<ul><li>< header>：头部标签</li><li>< nav>：导航标签</li><li>< article>：内容标签</li><li>< section>：定义文档某个区域</li><li>< aside>：侧边栏标签</li><li>< footer>：尾部</li></ul>
<h3><a name="t10"></a><a name="t10"></a><a id="2_341"></a>(2）新增的多媒体标签</h3>
<ul><li> 音频：< audio> <img src="https://www.icode9.com/i/ll/?i=20210404114206359.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"> </li><li> 视频：< video> <img src="https://www.icode9.com/i/ll/?i=20210404114248160.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"> </li></ul>
<h3><a name="t11"></a><a name="t11"></a><a id="3input__347"></a>(3)新增的input 类型</h3>
<img src="https://www.icode9.com/i/ll/?i=2021040411451230.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述">
<h3><a name="t12"></a><a name="t12"></a><a id="4_349"></a>(4)新增的表单属性</h3>
<img src="https://www.icode9.com/i/ll/?i=2021040411472395.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述">
<h1><a name="t13"></a><a name="t13"></a><a id="CSS_352"></a>二.CSS</h1>
<h2><a name="t14"></a><a name="t14"></a><a id="1css_353"></a>1.css选择器</h2>
<pre class="prettyprint"><code class="has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">在CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
<h3><a name="t15"></a><a name="t15"></a><a id="1css_355"></a>（1）css基础选择器</h3>
标签选择器、类选择器、id 选择器、通配符选择器
<ul><li>1.标签选择器</li></ul>
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">p {
属性：属性值;
}
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre>
<ul><li>2.类选择器</li></ul>
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">.red {
color: red;
}
（1）结构需要用class属性来调用class 类
（2）可以在标签class 属性中写多个类名
（3）多个类名中间必须用空格分开
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre>
<ul><li>3.id选择器</li></ul>
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">#nav {
color:red;
}
(1)HTML 元素以id 属性来设置id 选择器，CSS 中id 选择器以“#" 来定义。
(2)id 属性只能在每个HTML 文档中出现一次。
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre>
<ul><li>4.通配符选择器</li></ul>
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">* {
margin: 0;padding: 0;
}
它表示选取页面中所有元素（标签）。
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre>
<div class="table-box"><table><thead><tr><th>基础选择器</th><th>作用</th><th>特点</th><th>使用情况</th><th>用法</th></tr></thead><tbody><tr><td>标签选择器</td><td>可以选出所有相同的标签</td><td>不能差异化选择</td><td>较多</td><td>p{}；</td></tr><tr><td>类选择器</td><td>可以选出1个或多个标签</td><td>可以根据需求选择</td><td>非常多</td><td>.p{}；</td></tr><tr><td>id选择器</td><td>一次只能选择1个标签</td><td>id属性只能在每个HTML文档出现一次</td><td>一般和js搭配</td><td>#nav{}；</td></tr><tr><td>通配符选择器</td><td>选出所有的标签</td><td>选择的太多，有部分不需要</td><td>特殊情况使用</td><td>*{}；</td></tr></tbody></table></div>
<h3><a name="t16"></a><a name="t16"></a><a id="2css_395"></a>（2）css复合选择器（引用选择器）</h3>
<img src="https://www.icode9.com/i/ll/?i=20210403205733194.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"> 注意：
<blockquote>
链接伪类选择器按照LVHA的循顺序声明:link－:visited－:hover－:active。记忆法：love hate 或者lv 包包hao。
</blockquote>
<img src="https://www.icode9.com/i/ll/?i=20210403211002819.png" alt="在这里插入图片描述">
<h2><a name="t17"></a><a name="t17"></a><a id="2css_402"></a>2.css字体属性</h2>
<img src="https://www.icode9.com/i/ll/?i=20210403113547897.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述">
<h2><a name="t18"></a><a name="t18"></a><a id="3css_404"></a>3.css文本属性</h2>
(1)文本颜色
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">div {
color：red;
}
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre>
<img src="https://www.icode9.com/i/ll/?i=20210403115509564.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"> （2）装饰文本
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">div {
text-decoration：underline；
}
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre>
<img src="https://www.icode9.com/i/ll/?i=20210403113851704.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"> （3）文本缩进 首行缩进:
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">div {
text-indent: 10px;
}
p {
text-indent: 2em;
}
1.px像素相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
2.em是一个相对单位，就是当前元素1个文字的大小, 如果当前元素没有设置大小，则会按照父元素的1 个文字大小。
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li></ul></pre>
(4) 行间距
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">p {
line-height: 26px;
}
控制行高
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre>
（5）对齐方式
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">div {
text-align: center; 居中
}
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre>
<img src="https://www.icode9.com/i/ll/?i=20210403115843334.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述">
<h2><a name="t19"></a><a name="t19"></a><a id="4css_449"></a>4.css的引入方式</h2>
<ul><li>（1）内部样式表（嵌入式）</li></ul>
<pre class="prettyprint"><code class="prism language-html has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"><style>
div {
color: red;
}
</style>
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li></ul></pre>
<ul><li>（2）行内样式表（行内式）</li></ul>
<pre class="prettyprint"><code class="prism language-html has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"><div style="color: blue; font-size: 12px;">王俊凯</div>
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
<ul><li>（3）外部样式表（链接式）</li></ul>
<pre class="prettyprint"><code class="prism language-html has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"><link rel="stylesheet" href="css文件路径">
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
<img src="https://www.icode9.com/i/ll/?i=20210403205538780.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述">
<h2><a name="t20"></a><a name="t20"></a><a id="5css_471"></a>5.css元素显示模式</h2>
<img src="https://www.icode9.com/i/ll/?i=20210403211039115.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述">
<ul><li>转换为块元素：display:block;</li><li>转换为行内元素：display:inline;</li><li>转换为行内块：display: inline-block;</li></ul>
<h2><a name="t21"></a><a name="t21"></a><a id="6css_477"></a>6.css背景</h2>
（1）背景颜色
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">background-color:颜色值;
background-color:transparent; //透明色
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre>
（2）背景图片
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">background-image : none； //无背景
background-image : url（../images/1.jpg); //图片地址
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre>
（3）背景平铺
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">background-repeat: repeat | no-repeat | repeat-x | repeat-y;
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
<img src="https://www.icode9.com/i/ll/?i=20210403212552289.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"> (4)背景图片位置
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">background-position:x y; //参数代表的意思是：x 坐标和y 坐标。可以使用方位名词或者精确单位
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
<img src="https://www.icode9.com/i/ll/?i=20210403215649294.png" alt="在这里插入图片描述">
(5)背景图像固定（背景附着）
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">background-attachment :scroll; //随对象内容滚动
background-attachment :fixed; //图像固定
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre>
（6）背景图像复合写法
<pre class="prettyprint"><code class="has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"> background: -背景颜色 -背景图片地址 -背景平铺 -背景图像滚动 -背景图片位置;
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">background: transparent url(image.jpg) repeat-y fixed top ;
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
（7）背景颜色半透明
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">background: rgba(0, 0, 0,.3);
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
最后一个参数是alpha 透明度，取值范围在0~1之间。 <img src="https://www.icode9.com/i/ll/?i=20210404081345563.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述">
<h2><a name="t22"></a><a name="t22"></a><a id="7css_523"></a>7.css三大特性</h2>
（1）层叠性
<ul><li> <pre class="prettyprint"><code class="has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"> 样式冲突，遵循就近原则
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> </li></ul>
（2）继承性
<ul><li> <pre class="prettyprint"><code class="has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">行高可以跟单位也可以不跟单位
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> </li><li> <pre class="prettyprint"><code class="has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">没有手动指定文字大小，则会继承父亲的文字大小
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> </li></ul>
（3）优先级 <img src="https://www.icode9.com/i/ll/?i=20210404083843990.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述">
<h2><a name="t23"></a><a name="t23"></a><a id="8_533"></a>8.页面布局</h2>
<h3><a name="t24"></a><a name="t24"></a><a id="1_534"></a>（1）盒子模型</h3>
CSS 盒子模型本质上是一个盒子，封装周围的HTML 元素，它包括：边框、外边距、内边距、和实际内容。
<ul><li>边框</li></ul>
<img src="https://www.icode9.com/i/ll/?i=20210404085554612.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述">
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">border-style:solid; //实线
border-style:dashed; //虚线
border-style:dotted; //点线
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre>
<ul><li>内边距 padding属性用于设置内边距，即边框与内容之间的距离。 <img src="https://www.icode9.com/i/ll/?i=20210404090318975.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"> padding属性（简写属性）可以有一到四个值。</li></ul>
<img src="https://www.icode9.com/i/ll/?i=20210404090252924.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述">
<ul><li>外边距 margin属性用于设置外边距，即控制盒子和盒子之间的距离。 <img src="https://www.icode9.com/i/ll/?i=20210404090706465.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></li></ul>
<blockquote>
外边距可以让块级盒子水平居中，但是必须满足两个条件： ①盒子必须指定了宽度（width）。 ②盒子左右的外边距都设置为auto 。margin: 0 auto;
</blockquote>
<ul><li> 注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-align:center 。 </li><li> 圆角边框 </li></ul>
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">border-radius:length;
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
<ul><li>参数值可以为数值或百分比的形式。</li><li>分开写为：border-top-left-radius（左上角）、border-top-right-radius（右上角）、border-bottom-right-radius（右下角）和border-bottom-left-radius(左下角)</li><li>盒子阴影 <img src="https://www.icode9.com/i/ll/?i=20210404092615514.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></li><li>文字阴影 <img src="https://www.icode9.com/i/ll/?i=20210404093019986.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></li></ul>
<h3><a name="t25"></a><a name="t25"></a><a id="2_571"></a>（2）浮动</h3>
<ul><li> 为什么需要清除浮动？ ①父级没高度。②子盒子浮动了。③影响下面布局了。 <img src="https://www.icode9.com/i/ll/?i=20210404093225269.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"> </li></ul>
<h3><a name="t26"></a><a name="t26"></a><a id="3_576"></a>（3）定位</h3>
<ul><li>总结 <img src="https://www.icode9.com/i/ll/?i=20210404093443330.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"></li><li>定位叠放次序</li></ul>
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">选择器{ z-index: 1; }
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
<blockquote>
1.如果属性值相同，则按照书写顺序，后来居上。 2.数字后面不能加单位 3.只有定位的盒子才有z-index 属性
</blockquote>
<ul><li>元素的显示与隐藏</li></ul>
1.display 属性
<blockquote>
display: none ；隐藏对象 display：block ；除了转换为块级元素之外，同时还有显示元素的意思。 隐藏元素后，不占有原来的位置。
</blockquote>
2.visibility 可见性
<blockquote>
visibility：visible ; 元素可视 visibility：hidden; 元素隐藏 隐藏元素后，继续占有原来的位置。
</blockquote>
3.overflow 溢出显示隐藏 <img src="https://www.icode9.com/i/ll/?i=20210404105858800.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述">
<h2><a name="t27"></a><a name="t27"></a><a id="9css_601"></a>9.css用户界面样式</h2>
（1）鼠标样式cursor
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">li {cursor: pointer; }
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
<img src="https://www.icode9.com/i/ll/?i=20210404110645589.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述"> （2）轮廓线outline
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">input {outline: none; }
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
<blockquote>
给表单添加outline: 0; 或者outline: none; 样式之后，就可以去掉默认的蓝色边框。
</blockquote>
(3)防止拖拽文本域resize
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">textarea{ resize: none;}
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
<h2><a name="t28"></a><a name="t28"></a><a id="10_verticalalign__620"></a>10. vertical-align 属性应用</h2>
<blockquote>
vertical-align 属性经常用于设置图片或者表单(行内块元素）和文字垂直对齐。 官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。
</blockquote>
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">vertical-align : baseline | top | middle | bottom ;
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
<img src="https://www.icode9.com/i/ll/?i=20210404113003296.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述">
<blockquote>
vertical-align 属性设置为middle 就可以让文字和图片垂直居中对齐了。
</blockquote>
<h2><a name="t29"></a><a name="t29"></a><a id="11_629"></a>11.溢出的文字省略号显示</h2>
<blockquote>
(1). 先强制一行内显示文本*/white-space: nowrap; （默认normal 自动换行） (2). 超出的部分隐藏overflow: hidden; (3). 文字用省略号替代超出的部分text-overflow: ellipsis;
</blockquote>
<h2><a name="t30"></a><a name="t30"></a><a id="12CSS3__633"></a>12.CSS3 的新特性</h2>
<h3><a name="t31"></a><a name="t31"></a><a id="1_634"></a>（1）属性选择器</h3>
<blockquote>
属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。
</blockquote>
<img src="https://www.icode9.com/i/ll/?i=20210404115530298.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述">
<h3><a name="t32"></a><a name="t32"></a><a id="2_639"></a>（2）结构伪类选择器</h3>
<blockquote>
结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素
</blockquote>
<img src="https://www.icode9.com/i/ll/?i=20210404115721794.png?,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81Mjc5MTI1Ng==,size_16,color_FFFFFF,t_70" alt="在这里插入图片描述">
<blockquote>
<ul><li>nth-child（n）选择某个父元素的一个或多个特定的子元素（重点）</li><li>n 可以是数字，关键字和公式</li></ul>
</blockquote>
<h3><a name="t33"></a><a name="t33"></a><a id="3_646"></a>（3）伪元素选择器</h3>
<img src="https://www.icode9.com/i/ll/?i=20210404120352292.png" alt="在这里插入图片描述">
<h3><a name="t34"></a><a name="t34"></a><a id="42D_649"></a>（4）2D转换</h3>
移动：translate
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">transform: translate(x,y); //沿着X 和Y 轴移动元素
transform: translateX(n);
transform: translateY(n);
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li></ul></pre>
<blockquote>
<ul><li>translate最大的优点：不会影响到其他元素的位置</li><li>translate中的百分比单位是相对于自身元素的translate:(50%,50%);</li><li>对行内标签没有效果</li></ul>
</blockquote>
旋转：rotate
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">transform:rotate(度数);
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
<blockquote>
<ul><li>rotate里面跟度数，单位是deg 比如rotate(45deg)</li><li>角度为正时，顺时针，负时，为逆时针</li><li>默认旋转的中心点是元素的中心点</li></ul>
</blockquote>
缩放：scale
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">transform:scale(x,y);
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
<blockquote>
默认以中心点缩放的，而且不影响其他盒子
</blockquote>
2D 转换中心点
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">transform-origin: x y;
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
2D 转换综合写法
<blockquote>
1.同时使用多个转换，其格式为：transform: translate() rotate() scale() …等， 2. 其顺序会影转换的效果。（先旋转会改变坐标轴方向） 3. 同时有位移和其他属性的时候，记得要将位移放到最前面
</blockquote>
<h3><a name="t35"></a><a name="t35"></a><a id="5_684"></a>（5）动画</h3>
动画的基本使用
<ul><li>用keyframes 定义动画</li></ul>
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">@keyframes 动画名称{
0%{ width:100px;
}
100%{ width:200px;
}
}
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li></ul></pre>
<ul><li>再使用（调用）动画</li></ul>
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">div {
width: 200px;
height: 200px;
background-color:blue;
/*调用动画*/
animation-name: 动画名称;
/*持续时间*/
animation-duration: 持续时间;
}
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li></ul></pre>
动画常用属性
<div class="table-box"><table><thead><tr><th>属性</th><th>描述</th></tr></thead><tbody><tr><td>@keyframes</td><td>规定动画。</td></tr><tr><td>animation</td><td>所有动画属性的简写属性，除了 animation-play-state 属性。</td></tr><tr><td>animation-name</td><td>规定 @keyframes 动画的名称。</td></tr><tr><td>animation-duration</td><td>规定动画完成一个周期所花费的秒或毫秒。默认是 0。</td></tr><tr><td>animation-timing-function</td><td>规定动画的速度曲线。默认是 “ease”。</td></tr><tr><td>animation-delay</td><td>规定动画何时开始。默认是 0。</td></tr><tr><td>animation-iteration-count</td><td>规定动画被播放的次数。默认是 1。</td></tr><tr><td>animation-direction</td><td>规定动画是否在下一周期逆向地播放。默认是 “normal”，alternate逆播放</td></tr><tr><td>animation-play-state</td><td>规定动画是否正在运行或暂停。默认是 “running”。</td></tr><tr><td>animation-fill-mode</td><td>规定当动画结束后状态，保持forwards回到起始backwards</td></tr></tbody></table></div>
动画简写属性
<blockquote>
animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;
</blockquote>
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;"> animation: myfirst 5s linear 2s infinite alternate;
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
速度曲线细节
<blockquote>
animation-timing-function：规定动画的速度曲线，默认是“ease”
</blockquote>
<div class="table-box"><table><thead><tr><th>值</th><th>描述</th></tr></thead><tbody><tr><td>linear</td><td>动画从头到尾的速度是相同的。</td></tr><tr><td>ease</td><td>默认。动画以低速开始，然后加快，在结束前变慢。</td></tr><tr><td>ease-in</td><td>动画以低速开始。</td></tr><tr><td>ease-out</td><td>动画以低速结束。</td></tr><tr><td>ease-in-out</td><td>动画以低速开始和结束。</td></tr><tr><td>steps()</td><td>指定了时间函数中的间隔数量（步长）</td></tr></tbody></table></div>
<h3><a name="t36"></a><a name="t36"></a><a id="63D_740"></a>（6）3D转换</h3>
3D位移: translate3d(x,y,z)
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">translform:translateX(100px); //在x轴上移动,水平向右
translform:translateY(100px); //在Y轴上移动,垂直向下
translform:translateZ(100px); //在Z轴上移动,垂直屏幕
transform:translate3d(x,y,z);
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li></ul></pre>
3D旋转: rotate3d(x,y,z)
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg);
transform: rotate3d(x,y,z);
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre>
透视: perspective
透视写到被观察元素的父盒子上面
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">perspective：500px;
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre>
3D呈现 transfrom-style
<pre class="prettyprint"><code class="prism language-css has-numbering" οnclick="mdcp.copyCode(event)" style="position: unset;">transform-style :flat; //默认值，子元素将不保留其 3D 位置。
transform-style :preserve-3d; //子元素将保留其 3D 位置,在父级元素定义，但是影响的是子元素。
<div class="hljs-button {2}" data-title="复制" data-report-click="{"spm":"1001.2101.3001.4259"}"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li></ul></pre>
3D转换方法
<div class="table-box"><table><thead><tr><th>函数</th><th>描述</th></tr></thead><tbody><tr><td>matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)</td><td>定义 3D 转换，使用 16 个值的 4x4 矩阵。</td></tr><tr><td>translate3d(x,y,z)</td><td>定义 3D 转化。</td></tr><tr><td>translateX(x)</td><td>定义 3D 转化，仅使用用于 X 轴的值。</td></tr><tr><td>translateY(y)</td><td>定义 3D 转化，仅使用用于 Y 轴的值。</td></tr><tr><td>translateZ(z)</td><td>定义 3D 转化，仅使用用于 Z 轴的值。</td></tr><tr><td>scale3d(x,y,z)</td><td>定义 3D 缩放转换。</td></tr><tr><td>scaleX(x)</td><td>定义 3D 缩放转换，通过给定一个 X 轴的值。</td></tr><tr><td>scaleY(y)</td><td>定义 3D 缩放转换，通过给定一个 Y 轴的值。</td></tr><tr><td>scaleZ(z)</td><td>定义 3D 缩放转换，通过给定一个 Z 轴的值。</td></tr><tr><td>rotate3d(x,y,z,angle)</td><td>定义 3D 旋转。</td></tr><tr><td>rotateX(angle)</td><td>定义沿 X 轴的 3D 旋转。</td></tr><tr><td>rotateY(angle)</td><td>定义沿 Y 轴的 3D 旋转。</td></tr><tr><td>rotateZ(angle)</td><td>定义沿 Z 轴的 3D 旋转。</td></tr><tr><td>perspective(n)</td><td>定义 3D 转换元素的透视视图。</td></tr></tbody></table></div>
<h3><a name="t37"></a><a name="t37"></a><a id="7_787"></a>（7）浏览器私有前缀</h3>
<div class="table-box"><table><thead><tr><th>内核</th><th>私有前缀</th><th>应用浏览器</th></tr></thead><tbody><tr><td>Gecko内核</td><td>前缀为 -moz-</td><td>火狐浏览器</td></tr><tr><td>Webkit内核(谷歌内核)</td><td>前缀为 -webkit-</td><td>chrome浏览器、safari浏览器、360极速、猎豹、世界之窗</td></tr><tr><td>Trident内核</td><td>前缀为 -ms-</td><td>IE浏览器</td></tr><tr><td>Presto内核</td><td>前缀 -o-</td><td>opera浏览器</td></tr></tbody></table></div>
~ 喜欢的小伙伴点个赞呗，评论区留下宝贵的意见-谢谢呐♥~
<ul><li>如果文章当中有问题，或者有什么好的意见，大家可以指出来，一起学习。</li><li>本文版权归作者所有，欢迎转载。</li></ul>
</div><div><div></div></div>
<link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-d7a94ec6ab.css" rel="stylesheet">
<link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-f1c5feb645.css" rel="stylesheet">
</div>

码农公寓

相关文章