学习html&css这一篇就够了五万字超详细笔记（建议收藏）

最新推荐文章于 2023-10-24 21:52:11 发布

风向会画瓢

最新推荐文章于 2023-10-24 21:52:11 发布

阅读量1k

点赞数 3

分类专栏：前端初学小白文章标签： html html5 css3 css 前端

本文链接：https://blog.csdn.net/m0_64274971/article/details/126206823

版权

小白同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

初学

1 篇文章 0 订阅

订阅专栏

文章目录

1.HTML
2.CSS

1.HTML

1.1 标题段落换行标签

标题标签：h1~h6 六个标题
段落标签：p
换行标签：br

	<h1>英雄联盟</h1>
    <h4>疾风剑豪</h4>
    <p>死亡如风，常伴吾身</p>
    <h4>影流之主</h4>
    <p>无形之刃，最为致命</p>
    <p>作者：朱sir</br>日期：22.03.16</p>片

注意：标签分为单标签和双标签

1.2 常用的文本格式化标签

字体加粗标签：strong/b
字体倾斜标签：em/i
字体删除线：del/s
下划线：ins/u

1.3 盒子标签div和span

div：可以理解为一个大盒子自己独占一行属于块级元素。
span：可以理解为一个小盒子一行可以放多个属于行内元素。

1.4 图像标签

img：输入图片路径即可，alt替换文本：图片显示不出来一般为图片损坏或者路径错误就会替换。
title提示文本，鼠标放上去会有提示信息。

注意：1.图像可以拥有多个属性必须写在标签名后面。2.属性之间不分先后顺序，不过属性与标签之间，属性与属性之间要有空格分开。3.属性采取键值对的格式，即key=“value”，属性=“属性值”。

1.5 路径问题

引用下一级：/
引用上一级：…/

相对路径：无论上一级还是下一级，平级，都是相对于自身文件来说的。
绝对路径：可以直接复制自己电脑文件绝对路径，也可以复制网上的图片地址。

1.6 超链接标签

a：可以是：

1.外部链接：直接输入网址，链接网页如百度小米等。

2.内部链接：可以链接本文件里面的其他页面。

3.空链接：填入#号，即是空链接。

4.下载链接：地址链接是，.exe文件或者.zip压缩包。

5.网页元素链接：a里面可以填文字，图像，音频等都可以作为超链接元素。

6.锚点链接（有点意思）：如在文章里面设置id=xx，目录链接设置a链接#xxx，点击即可跳转。

一个属性：target=“” self是在当前页面打开， _blank是在新页面打开

综合案例

<h1>英雄联盟</h1>
    <h3 id="mulu">目录</h3>
    <p>
        <a href="#LOL"> 1.英雄联盟简介</a> <br>
        <a href="#yasuo">2.疾风剑豪</a> <br>
        <a href="#jie">3.影流之主</a> <br>
        <a href="#jinfu">4.腕豪</a> <br>

    </p>
    <h3 id="LOL">英雄联盟介绍</h3>
    《英雄联盟》（League of Legends，简称LOL）是由美国拳头游戏（Riot Games）开发、中国内地由腾讯游戏代理运营的英雄对战MOBA竞技网游。<br>
    游戏里拥有数百个个性英雄，并拥有排位系统、符文系统等特色系统。<br>
    《英雄联盟》致力于推动全球电子竞技的发展，除了联动各赛区发展职业联赛、打造电竞体系之外，每年还会举办“英雄联盟季中冠军赛”“英雄联盟全球总决赛”“英雄联盟全明星赛”三大世界级赛事，形成了自己独有的电子竞技文化 [1] 。<br>
    2018年5月14日，《英雄联盟》加入“亚洲运动会”，成为表演项目之一 [85]
    。2021年11月5日，《英雄联盟》入选为第19届“亚洲运动会”电竞比赛项目，这是电竞首次成为亚运会的正式竞赛项目，向全世界展现电竞运动的魅力，项目所获得的奖牌将计入国家奖牌榜 [99] 。<br>
    2019年9月17日，拳头游戏值《英雄联盟》十周年之际发布了其全新的LOGO，并公布每一天全世界都有超过八百万玩家同时在线，这意味着英雄联盟依然是全球玩家数最大的电脑游戏。 <a href="#mulu">目录</a>
    <img src="https://img.crawler.qq.com/lolwebschool/0/JAutoCMS_LOLWeb_690a4a7b490471fbfc59ac106c956804/0" alt="">
    <h3 id="yasuo">疾风剑豪介绍</h3>
    亚索是一个百折不屈的艾欧尼亚人，<br> 也是一名身手敏捷的御风剑客。<br> 这位生性自负的年轻人，<br> 被误认为杀害长老的凶手——由于无法证明自己的清白，<br> 他出于自卫而杀死了自己的哥哥。<br>
    虽然长老死亡的真相已然大白，<br> 亚索还是无法原谅自己的所作所为。<br> 他在家园的土地上流浪，<br> 只有疾风指引着他的剑刃。<a href="#mulu">目录</a>
    <img src="https://img2.baidu.com/it/u=880568482,3286484011&fm=253&fmt=auto&app=138&f=JPEG?w=891&h=500" alt=""
        width="100%">
    <h3 id="jie">影流之主介绍</h3>
    彻底抛弃了仁慈与怜悯的劫，<br> 是影流教派的领袖。<br> 他创立影流的目标是将艾欧尼亚的传统武术用于实战，<br> 驱逐诺克萨斯侵略者。<br> 在战争中，<br> 绝望指引他开启了神秘的暗影形态。<br>
    这是一种恶灵魔法，<br> 虽然强大，<br> 但同时非常危险且有腐化之力。<br> 劫已经完全掌握了这种禁忌之术，<br> 用它摧毁自己眼中的威胁，<br> 维护自己的国家，<br> 以及自己的教派。<a
        href="#mulu">目录</a>
    <img src="https://img0.baidu.com/it/u=2425781796,3990281903&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=295" alt=""
        width="100%">
    <h3 id="jinfu">腕豪介绍</h3>
    在与诺克萨斯的战争结束之后，<br> 艾欧尼亚的地下王国日渐兴起，<br> 瑟提在其中脱颖而出，<br> 成为了一方霸主。<br> 虽然他一开始只是纳沃利的搏击场里的无名小卒，<br> 但他有着一身蛮力，<br>
    而且极其耐打，<br> 很快就名声鹊起。<br> 等到当地的搏击手尽数被他击败之后，<br> 瑟提靠着一腔勇武，<br> 掌控了自己曾经浴血奋战的搏击场。<a href="#mulu">目录</a>
    <img src="https://img2.baidu.com/it/u=3004893290,1440367340&fm=253&fmt=auto&app=138&f=JPEG?w=806&h=500" alt=""
        width="100%">
    <p>更多精彩尽在<a href="http://www.baidu.com" target="_self">百度</a></p>

1.7 表格标签

table为整个表格，整个表格由table这个双标签包括。

tr：就是表格里的一行。

th：th就是tablehead，表示头标签的意思，会将表头加粗，居中。往往用来写第一行表格。

td：一个td就是一个表格。

thead：表示表格头部。

tbody：表示表格主体。

合并单元格：

1.先确定要行合并还是列合并

2.找到目标单元格，加上合并方式=合并单元，rowspan是列，colspan是行。

3.删除多余单元格。

table相关属性：

align：即表格位置可选 left center right
border：边框
cellpadding：表格内边框与内容的距离
cellspacing：表格与表格之间的距离，这两个值一般为0
width/height：控制大小

案例

<table align="center" border="1" cellpadding="0" cellspacing="0" width="100%">
        <!-- thead标签表示的是标签的 头部 区域 -->
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <!-- tbody标签表示的是表格的 主体 区域 -->
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td>up</td>
                <td>5441</td>
                <td>33266</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>2</td>
                <td>三国演义</td>
                <td>up</td>
                <td>2568</td>
                <td>33244</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>3</td>
                <td>雪中悍刀行</td>
                <td>down</td>
                <td>589</td>
                <td>3321</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>4</td>
                <td>亡灵杀手</td>
                <td>down</td>
                <td>246</td>
                <td>3021</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <tr>
                <td>5</td>
                <td>东游记</td>
                <td>up</td>
                <td>5644</td>
                <td>332</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
            </tr>
            <!-- 头部和主体区域标签都在table标签里面 -->
        </tbody>
    </table>

1.8 列表标签

1.8.1无序列表

ul：无序列表标签，无序列表的父元素。
li：列表用li表示，里面的项无顺序。

注意：里面只有li标签，li标签也是一个盒子，里面可以放任何东西。

1.8.2 有序列表

属性与无序列表一致，不过父盒子标签为ol。

1.8.3 自定义列表

dl：大盒子标签为dl。
dt：头标签。
dd：解释标签。

1.9 表单标签

form：单标签，标签内就是表单域。

1.9.1 input

text：文本框
passwor：密码框
radio：单选按钮实现多选一
checkbox：复选框实现多选
submit：提交按钮将表单域的所有元素提供给后台服务器
reset：重置按钮重置表单域还原初始默认状态
button：普通按钮
file：文件域
input属性：
maxlength：用户最多可以在表单输入多少字符。
minlength：相反。
name：表格元素的名字，这里性别单选按钮或者复选框必须有相同的name，才能实现多选一。
value：属性，取值。

1.9.2 label标签

label：是与input标签搭配使用的，点击label标签里面的文字时候即可跳转到对应表单上，以此来增加用户体验。

用法：为input创建一个id：xxx，然后在创建一个label标签输入解释，然后for给该input表单id。

1.9.3 select下拉表单元素

select：主要用于页面中可供用户多个选择，且想要节约表单空间，折叠式机制。

option：select里面至少包括一对option，在option里面定义selected会默认该选项为默认选项。

1.9.4 textarea文本域表签

textarea：当用户输入内容较多时，我们就不能用文本框表单了，这时候可以用该标签（可以理解为特大号文本框-一般用于留言板）。

属性：

cols：用来表示每行可以写多少个字。

rows：表示可以展示的行数。

这两个属性实际开发不会用到了。

案例

<h3>因为热爱，所以联盟</h3>
    <table>
        <!-- 第零行内容 -->
        <tr>
            <td>你的ID：</td>
            <td>
                <input type="text" value="请输入你的ID">
            </td>
        </tr>
        <!-- 第一行内容 -->
        <tr>
            <td>你的性别：</td>
            <td>
                <input type="radio" name="sex" id="nan"> <label for="nan"> 男</label>
                <input type="radio" name="sex" id="nv"> <label for="nv"> 女</label>
            </td>
        </tr>
        <!-- 第二行内容 -->
        <tr>
            <td>成为召唤师的那天：</td>
            <td>
                <select>
                    <option>--请输入年份--</option>
                    <option>2010</option>
                    <option>2011</option>
                    <option>2012</option>
                    <option>2013</option>
                    <option>2014</option>
                    <option>2015</option>
                    <option>2016</option>
                    <option>2017</option>
                    <option>2018</option>
                    <option>2019</option>
                    <option>2020</option>
                    <option>2021</option>
                    <option>2022</option>
                </select>
                <select>
                    <option>--请输入月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                <select>
                    <option>--请输入日期--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                    <option>17</option>
                    <option>18</option>
                    <option>19</option>
                    <option>20</option>
                    <option>21</option>
                    <option>22</option>
                    <option>23</option>
                    <option>24</option>
                    <option>25</option>
                    <option>26</option>
                    <option>27</option>
                    <option>28</option>
                    <option>29</option>
                    <option>30</option>
                    <option>31</option>
                </select>
            </td>
        </tr>
        <!-- 第三行内容 -->
        <tr>
            <td>所在区位：</td>
            <td>
                <input type="text" value="请输入召唤师区位">
            </td>
        </tr>
        <!-- 第四行内容 -->
        <tr>
            <td>喜欢的位置（可多选）：</td>
            <td>
                <input type="checkbox"> 上单
                <input type="checkbox"> 中单
                <input type="checkbox"> 打野
                <input type="checkbox"> 射手
                <input type="checkbox"> 辅助
            </td>
        </tr>
        <!-- 第五行内容 -->
        <tr>
            <td>自我介绍</td>
            <td>
                <textarea>
                    个人简介
                </textarea>
            </td>
        </tr>
        <!-- 第六行内容 -->
        <tr>
            <td></td>
            <td><input type="submit" value="免费注册"></td>
        </tr>
        <!-- 第七行内容 -->
        <tr>
            <td></td>
            <td>
                <input type="checkbox" checked="checked"> 我同意注册条款和会员加入标准
            </td>
        </tr>
        <!-- 第八行内容 -->
        <tr>
            <td></td>
            <td>
                <a href="#">我是会员，立即登录</a>
            </td>
        </tr>
        <!-- 第九行内容 -->
        <tr>
            <td></td>
            <td>
                <h5>我承诺</h5>
                <ul>
                    <li>不会因为热度而去玩其他game</li>
                    <li>而是一直忠诚于你</li>
                    <li>致英雄联盟！</li>
                </ul>
            </td>
        </tr>
    </table>

1.10 html结束

html到这里常用标签就结束了，还有个别不常用的或者html5新增的以后会学到，目前阶段常用的没多少东西。

2.CSS

2.1 css选择器

2.1.1 标签选择器

p div 等直接提取标签来书写样式。

语法就是：标签+花括号

<p>男</p>
    <div>女</div>

p {
            color: blue;
        }

        div {
            color: green;
        }

2.1.2类选择器

就是给某个标签定义一个类名，可以在多个相同标签中单独提取修改样式。

类选择器口诀：样式点定义，结构类（class）调用，一个或多个，开发最常用。

多类名：给某个标签添加了多个类，或者多个名字，各个类名中间空格分开，调用哪个类名，就有哪个类名的属性。

<li class="red">冷雨</li>
        <li class="green">大雨</li>

.red {
            color: red;
        }

        .green {
            color: green;
        }

<div class="box red">红色</div>
    <div class="box green">绿色</div>
    <div class="box red">红色</div>

.box {
            width: 100px;
            height: 100px;
        }

注意：一般类名先写共有类名，再写独有类名。

2.1.3 id选择器

跟类选择器类似，有一点不同就是只能调用一次。

id选择器口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用。

<div id="green">亚瑟</div>

#green {
            color: green;
        }

2.1.4 通配符选择器

*：这个星号就是通配符选择器，可以选择页面所有标签，如div p a 等等统一改变样式。

<div>嘻嘻</div>
    <p>哈哈</p>
    <span>呼呼</span>

* {
            color: chocolate;
        }

2.1.5 后代选择器

如有一个父盒子.nav 里面有一个子元素p,

那么.nav p 只会选择.nav里面的p。

即 .nav p{

}

.nav a {
        color: yellow;
    }

2.1.6 子元素选择器

只会选择最近一级的元素
中间用大于号隔开
选不到孙子级别元素

div>a {
            color: pink;

2.1.7并集选择器

1.并集选择器可以选择多组标签，主要用于集体声明

2.任何形式的选择器都可以作为并集选择器的一部分

<div>喜洋洋</div>
    <p>懒洋洋</p>
    <span>灰太狼</span>
    <ul class="nav">
        <li>海绵宝宝</li>
        <li>章鱼哥</li>
        <li>派大星</li>
    </ul>

 div,
        p,
        .nav {
            color: pink;
        }

2.1.8链接伪类选择器

a:link：没有访问过得链接
a:visited：访问过的链接
a:hover：鼠标经过时的链接
a:active：按下鼠标没有松开时的链接

<a href="#">白胡子海贼团</a>

        a:link {
            color: darkgrey;
            text-decoration: none;
        }

        a:visited {
            color: green;
        }

        a:hover {
            color: brown;
        }

        a:active {
            color: skyblue;
        }

注意事项：为了确保生效，需要按照LVHA的顺序声明，因为a链接在浏览器中的有默认样式，所以我们需要对a单独设置样式。

可以记为：lv包包 hao

开发的话，一般只用一个hover

2.1.9：focus伪类选择器

：focus用于获得焦点（光标）的表单元素
焦点就是光标，简单理解就是点到哪里那里获取焦点，一般情况表单元素才能获取，因此这个选择器也针对表单元素来说。

<input type="text">
    <input type="text">
    <input type="text">

input:focus {
            color: chocolate;
            background-color: green;
        }

2.2 css字体属性

2.2.1font-family（字体）

各种字体之间要用英文状态下的逗号隔开
如有多个单词组成的字体，加引号
字体优先显示第一个，如果电脑没有安装第一个，则会跳转第二个，以此类推

<h4>静夜思</h4>
    <p>床前明月光</p>

h4 {
            font-family: 'Microsoft-YaHei';
        }

        p {
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }

2.2.2 font-size（字号）

标题比较特殊，需要单独制定文字大小
不要默认大小，别忘了单位px
因为考虑到浏览器的兼容性

<h5>标题比较特殊，需要单独制定文字大小</h5>
    <p>请给我们设置大小</p>

body {
            font-size: 26px;
        }

        h5 {
            font-size: 26px;
        }

2.2.3 font-weight（字体粗细）

normal：默认值，使标题不加粗
bold：定义粗体
100~900：实际开发更提倡数字，数字越大越粗，一般使用400默认，700加粗

<h5>normal可以使标题不加粗，恢复默认粗细</h5>
    <p>bold定义粗体</p>

h5 {
            font-weight: 400;
        }

        p {
            font-weight: 700;
        }

2.2.4font-style（格式）

italic：文字倾斜
normal：脉动回来

<p>在上课的时候</p>
    <em>在下课的时候</em>

/* italic 使文字倾斜 */
        p {
            font-style: italic;
        }

        /* normal让倾斜的文字脉动回来 */
        em {
            font-style: normal;
        }

2.2.5 font复合属性写法

<p>反抗永世不予</p>

p {
            font-style: italic;
            font-weight: 900;
            font-size: 20px;
            font-family: 'Microsoft yahei'; 
        }

这样写真的太废代码了，所以我们有下面的复合写法

p {
    /* font:font-style font-weight font-size/line-height font-family */
            font: italic 700 36px 'Microsoft yahei';
}

注意：属性之间切勿颠倒位置，还有就是font复合属性至少有字号和字体两种属性才能执行

2.3 css-文本外观属性

2.3.1 文本外观属性之颜色

第一种预定义的颜色值，用英文直接书写，一般用于写demo
第二种是用十六进制写，一般开发常用（不会写没关系哦，后面都是用吸管工具吸的）
第三种是rgb代码调色

<div>你喜欢什么颜色</div>

div {
            /* color: yellow; */
            /* color: #f0e10f; */
            color: rgb(255, 0, 255);
        }

2.3.2 文本外观属性之文字对齐

（居中）text-align：center
（居左）text-align：left
（居右）text-align：right

<h1>居中对齐的标题</h1>

h1 {
            text-align: center;
            text-align: left;
            text-align: right;
        }

2.3.3 文本外观属性之装饰文本

text-decoration：underline：下划线
text-decoration：line-through：删除线
text-decoration：overline上划线
text-decoration：none 删除下划线

<div>
        绿色手机壳
    </div>
    <a href="#">链接</a>

div {
            /* text-decoration: underline; */
            /* text-decoration: line-through; */
            text-decoration: overline;
        }

        a {
            text-decoration: none;
        }

2.3.4 文本外观属性之文本缩进

文本第一行缩进20px

text-indent：20px

如果以Xem为单位，则是相对当前元素大小缩进X个单位

text-indent：2em

<p>推开门，我压抑的泪水如洪水般涌了出来，不知道是委屈，是内疚，还是什么，我泪流满面地回到了宿舍，我边收拾东西边哭，放学回来的同学都问我怎么了，我还强忍着说：没事，但我得回家一趟。她们担心地问：“都这么晚了，还下着雪，还能有车吗？”我咬着嘴唇，抽噎地回道：去看看。
    </p>

p {
            /* text-indent: 20px; */
            text-indent: 2em;
        }

2.3.5 文本外观属性之行间距

行间距即行高：等于上间距+文字高度+下间距，比如行高是26px，文字16px，那么上下间距分别5px。

line-height：行高（行高等于盒子高度，则盒子内容垂直居中）

<p>推开门，我压抑的泪水如洪水般涌了出来，不知道是委屈，是内疚，还是什么，我泪流满面地回到了宿舍，我边收拾东西边哭，放学回来的同学都问我怎么了，我还强忍着说：没事，但我得回家一趟。她们担心地问：“都这么晚了，还下着雪，还能有车吗？”我咬着嘴唇，抽噎地回道：去看看。
    </p>

p {
            line-height: 26px;
        }

2.4 三类样式表

2.4.1 内部样式表

所谓内部样式表，就是在html内部写样式，但是是单独写在style标签内部。

<style>
        div {
            color: pink;
        }
    </style>

2.4.2 行样式表

所谓行内样式表，就是按规范写在标签内部，称为行内式引入。

<p>听戏时</p>
    <p>要点最红的名伶</p>
    <p>遛鸟时</p>
    <p>要买最名贵的画眉</p>
    <!-- style就是标签的属性，在双引号之间的代码要符合css的书写规范----称为行内式引入 -->
    <p style="color: aquamarine; font-size: 36px;">此即人生</p>

2.4.3外部样式表

所谓外部样式表，就是新建一个css文件，不需要在html页面书写样式，只在这个css文件里面写样式，写完引入即可。

<link rel="stylesheet" href="/CSS/18-外部样式表.css">

综合

<h1>生态环境部答界面新闻：13部门正研究制定新污染物治理行动方案</h1>
    <div class="gray">2022-03-30 15:23:48 来源：<a href="#">河南测院308</a>
        <input type="text" value="请输入查询条件..." class="kuang"> <button class="btn">搜索</button>
    </div>
    <hr>
    <h4>这是第一段</h4>
    <p>2022年3月30日，生态环境部固体废物与化学品司司长任勇在新闻发布会上回答界面新闻提问时表示，按照党中央、国务院决策部署，生态环境部会同国家发改委等13个部门正在研究制定新污染物治理行动方案。</p>

    <p class="tupian"><img src="https://img.36krcdn.com/20220330/v2_47a5bca9df664e1ebd568c6127d60c8a_img_000" alt="">
    </p>

    <h4>这是第二段</h4>
    <p>任勇透露，正在制定中的方案将提出“十四五”期间我国新污染物治理工作总体要求、主要目标、行动举措和保障措施。</p>

    <h4>这是第三段</h4>
    <p>此前在3月5日，李克强总理向十三届全国人大五次会议作政府工作报告时表示，今年要持续改善生态环境，推动绿色低碳发展，要加强固体废物和新污染物治理。</p>

    <p class="footer">本文来源：河南测院308 责任编辑：风向_NO124827</p>

<style>
        body {
            font: 16px 'Microsoft yahei';
        }

        h1 {
            /* 取消标题加粗 */
            font-weight: 400;
            /* 使标题居中 */
            text-align: center;
        }

        .gray {
            color: #888888;
            text-align: center;
            font-size: 12px;
        }

        /* 取消链接下划线 */
        a {
            text-decoration: none;
        }

        .kuang {
            color: #666666;
        }

        .btn {
            font-weight: 700;
        }

        .tupian {
            text-align: center;
        }

        .footer {
            color: #888888;
            font-size: 12px;
        }

        p {
            text-indent: 2em;
        }
    </style>

2.5 emmet语法使用

标签*3：一次刑生成多个标签
父标签>子标签：直接生成父子级标签
标签+标签：直接生成兄弟标签
.类名或者#类名：直接生成带有类名的标签
如果生成的div类名是有顺序的，可以使用自增符号$ ：.demo$*5
直接在生成的标签里面写内容可以用{}

2.6 css元素显示模式

2.6.1 块级元素

块级元素比较霸道，一般都是独占一行
高度宽度内外边距都是自己设置，如果不给宽度就会默认100%
块级元素是一个容器及盒子，里面可以放块级元素或行内元素
注意文字类的元素内不能使用块级元素

2.6.2行内元素

相邻行内元素在一行上，一行可以放很多个
高宽直接设置是无效的
默认的宽度就是自身内容的宽度
行内元素只能容纳文本或者其他行内元素

注意：

链接里面不能再放链接
特殊情况链接a里面可以放块级元素，但是给a转换一下块级模式才更安全

2.6.3 行内块元素

和相邻行内元素（行内块）元素在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
默认宽度就是它本身内容的宽度（行内元素特点）
高度行高内外边距都可以控制（块级元素特点）

2.6.4 模式转换

display-block：转为块级元素
display-inline：转换为行内元素
display-inline-block：转换为行内块元素

2.7 单行文字垂直居中的原理

让行高等于盒子高度。

<a href="#">我是文字</a>

a {
            display: block;
            width: 360px;
            height: 100px;
            background-color: aquamarine;
            /* 使文字垂直居中，就让行高等于盒子高度 */
            line-height: 100px;
            text-decoration: none;
            /* 水平居中对齐 */
            text-align: center;
        }

2.8 css背景

2.8.1 背景颜色

background-color：颜色；

默认透明

background-color：transparent；

div {
            width: 300px;
            height: 200px;
            background-color: green;
            /* 透明的，清澈的 */
            background-color: transparent;
        }

2.8.2背景图片

background-image：url（图片地址）

也可以简写为background

div {
            width: 300px;
            height: 300px;
            /* 别忘了url */
            background-image: url(../images/2.webp);
        }

2.8.3背景平铺

默认情况下，背景图片是平铺的：background-repeat：repeat；
背景图片不平铺：background-repeat：no-repeat；
沿着x轴平铺：background-repeat：repeat-x；
沿着y轴平铺：background-repeat：repeat-y；

2.8.4 背景图片位置

方位名词

background-position：left center；靠左垂直居中
background-position：center top；靠上水平居中
background-position：center center；中心

 div {
            width: 300px;
            height: 300px;
            background-image: url(../images/sl.webp);
            background-size: 50px 50px;
            background-color: #010001;
            background-repeat: no-repeat;
            /* background-repeat: 方位名词 */
            /* background-position: left center; */
            background-position: center left;
            /* background-position: top center; */
            /* background-position: center center; */
            /* background-position: right; */
            /* background-position: top; */
        }

注意：

如果是方位名词，left center 和center left 效果是等价的，跟顺序没关系
如果只有一个值right，那么水平一定是靠右对齐，第二个省略的值一定是y轴，且居中对齐

精确位置

background-position：x y ；

div {
            width: 300px;
            height: 200px;
            background-color: pink;
            background-image: url(../images/wzry.png);
            background-repeat: no-repeat;
            background-position: 30px 80px;
            background-position: 20px;
        }

注意：

精确位置的第一个值一定是x轴，第二个值是y轴
如果只有一个值，那么一定是x轴

混合单位

可以方位名字和精确单位混用。

与上相同，第一个值一定是x轴，第二个值是y轴。

body {
            background-image: url(../images/dbj.jpg);
            background-position: center 40px;
        }

2.8.5 背景固定

background-attachment：scroll；背景图像随内容滚动
background-attachment：fixed；背景图像固定

<p>少年没有乌托邦，心向远方自明朗</p>
    <p>少年没有乌托邦，心向远方自明朗</p>
    <p>少年没有乌托邦，心向远方自明朗</p>
    <p>少年没有乌托邦，心向远方自明朗</p>
    <p>少年没有乌托邦，心向远方自明朗</p>
    <p>少年没有乌托邦，心向远方自明朗</p>
    <p>少年没有乌托邦，心向远方自明朗</p>
    <p>少年没有乌托邦，心向远方自明朗</p>
    <p>少年没有乌托邦，心向远方自明朗</p>
    <p>少年没有乌托邦，心向远方自明朗</p>
    <p>少年没有乌托邦，心向远方自明朗</p>
    <p>少年没有乌托邦，心向远方自明朗</p>
    <p>少年没有乌托邦，心向远方自明朗</p>
    <p>少年没有乌托邦，心向远方自明朗</p>
    <p>少年没有乌托邦，心向远方自明朗</p>
    <p>少年没有乌托邦，心向远方自明朗</p>
    <p>少年没有乌托邦，心向远方自明朗</p>
    <p>少年没有乌托邦，心向远方自明朗</p>
    <p>少年没有乌托邦，心向远方自明朗</p>
    <p>少年没有乌托邦，心向远方自明朗</p>
    <p>少年没有乌托邦，心向远方自明朗</p>
    <p>少年没有乌托邦，心向远方自明朗</p>
    <p>少年没有乌托邦，心向远方自明朗</p>
    <p>少年没有乌托邦，心向远方自明朗</p>

body {
            background-image: url(../images/dbj.jpg);
            /*  background-attachment 背景附着两个参数：1.scroll 背景图像随内容滚动 2.fixed 背景图像固定 */
            background-attachment: fixed;
            font-size: 36px;
            color: aqua;
        }

2.8.6 背景属性复合写法

没有特定的顺序，一般按照：背景颜色-背景图片地址-背景平铺-背景图像移动-背景图片位置。

body {
            background: transparent url(../images/dbj.jpg) no-repeat fixed top;
            font-size: 36px;
            color: pink;
        }

2.8.7 背景色半透明

写法：background：rgba（0,0,0,0.3）

最后一个值是Aloha透明度，取值范围在0-1之间，越高越不透明

盒子里面内容不收影响一般省略0，直接写.3

<div>看到到我吗</div>

div {
            width: 300px;
            height: 300px;
            background: rgba(0, 0, 0, 0.3);
        }

综合-无素材五彩导航栏

<!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>
    <style>
        .nav a {
            width: 200px;
            height: 48px;
            display: inline-block;
            /* background-color: green; */
            text-decoration: none;
            color: #fff;
            text-align: center;
            line-height: 48px;
        }

        .lan1 {
            background-color: pink;
        }

        .lan2 {
            background-color: skyblue;
        }

        .lan3 {
            background-color: purple;
        }

        .lan4 {
            background-color: rgb(128, 87, 0);
        }

        .lan5 {
            background-color: cornflowerblue;
        }

        .lan1:hover {
            background-color: darkgray;
        }

        .lan2:hover {
            background-color: darkgray;
        }

        .lan3:hover {
            background-color: darkgray;
        }

        .lan4:hover {
            background-color: darkgray;
        }

        .lan5:hover {
            background-color: darkgray;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" class="lan1">五彩导航栏</a>
        <a href="#" class="lan2">五彩导航栏</a>
        <a href="#" class="lan3">五彩导航栏</a>
        <a href="#" class="lan4">五彩导航栏</a>
        <a href="#" class="lan5">五彩导航栏</a>
    </div>
</body>

</html>

2.9 css三大特性

2.9.1css层叠性

相同的选择器设置相同的样式，此时距离html最近的样式会覆盖（层叠）另一个样式，样式不冲突则不会重叠。

<!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>
    <style>
        div {
            color: red;
            font: size 36px;
        }

        div {
            color: pink;
        }
    </style>
</head>

<body>
    <div>长江后浪推前浪，前浪被拍在沙滩上</div>
</body>

</html>

2.9.2 css继承性

子标签会继承父标签里的某些样式，一般都是文本样式：font- text- line- 等等，还有color。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: aqua;
            font-size: 36px;
        }
    </style>
</head>

<body>
    <div>
        <p>龙生龙，凤生凤，老鼠生来会打洞</p>
    </div>
</body>

</html>

行高继承

<!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>
    <style>
        body {
            /* font：大小/数值 后面跟的数值就是行高 */
            color: green;
            font: 36px/1.5 'Microsoft yahei'
        }

        div {
            /* 子元素继承了父元素body的行高 1.5  */
            /* 1.5就是font-size的文字大小的1.5倍 */
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div>枫叶飘向归途</div>
    <!-- p未设置行高继承父元素参数 -->
    <p>亚索，回家吧</p>
</body>

</html>

2.9.3 css权重

样式执行选择会优先选择权重高的选择器，每种选择器权重不同，优先级不同：

从小到大：继承和通配符-标签选择器-类、伪类选择器-id选择器-行内样式-！impotant

注意：单独选出来的永远优先，但要比比权重。

复合选择器会有权重有叠加的问题，权重虽然会叠加，但是永远不会进位。

例如

单独写个小li ，就一个标签，那么权重为0.0.0.1

写个ul li 两个标签，那么权重为0.0.0.2

再说

给ul七个类名.nav 那么.nav li 一个类选择器加标签权重就是0.0.1.1，权重自然比起前者高，编辑器会优先执行该行样式。

<!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>
    <style>
        li {
            color: cyan
        }
        ul li {
            color: green;
        }

        .nav li {
            color: chocolate;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>“风不候醉人”</li>
    </ul>
</body>

</html>

2.10 盒子模型

2.10.1 盒子模型之边框

2.10.1.1边框用法

border-width：边框粗细
border-style：边框样式
- solid：实现边框
- dashed：虚线边框
- dotted：点线边框
- groove 、outset、ridge：这些边框兼容性不好
boder-color：边框颜色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 100px;
            border-width: 10px;
            /* border-style: groove; */
            /* border-style: outset; */
            border-style: ridge;
            border-color: green;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

边框简写：border：宽度样式颜色

合并相邻边框：border-collapse：collapse；

边框会影响盒子的实际大小：盒子实际大小等于盒子大小加上盒子边框。

2.10.1.2 圆角边框

加上该行代码，数值越大，弧度就越大，单位px，百分比。

border-radius：10px；

常用写法

分别设置弧度：border：10px 20px 30px 40px；
对角：border：10px 20px；
单独设置一个角：10px 0 0 0 ；

2.10.2 盒子模型之内边距

2.10.2.1padding用法

padding盒子模型内边距，有四个参数分别是：

top
bootom
left
right

<!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>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #40ce11;
            padding-top: 20px;
            padding-left: 20px;
        }
    </style>
</head>

<body>
    <div>黑暗米狗，绝望迷神，烈焰其外，死亡气坏</div>
</body>

</html>

2.10.2.2padding的复合写法

一个值，表示上下左右内边距都是该值
二个值，前值表示上下内边距，后值表示左右内边距
三个值，第一个值表示上内边距，第二个值表示左右内边距，第三个值表示下内边距
四个值，从第一个值开始，顺时针表示内边距

和边框一样内边距也会影响盒子大小，
盒子大小等于盒子内容加上盒子内边距。

padding不会撑开盒子的情况：如果盒子本身没有指定width或height，则padding不会城开盒子。

2.10.3 盒子模型之外边距

2.10.3.1 margin用法

1.margin用法与padding类似

2.复合写法与padding一致

外边距典型应用-块级盒子水平居中对齐

2.10.3.2外边距典型应用-块级盒子水平居中对齐

条件

1.盒子必须制定了宽度

2.盒子左右外边距都设置了auto

这里只写常用写法：margin：0 auto；

<!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>
    <style>
        div {
            /* 想让盒子水平居中，必须满足以下两个条件
            1.盒子必须制定了宽度
            2.盒子左右外边距都设置为auto */
            width: 900px;
            height: 200px;
            background-color: green;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

2.10.4 行内元素和行内块元素水平居中对齐

行内元素和行内块元素水平居中对齐，只需要在其父元素中添加text-align：center；

<!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>
    <style>
        div {
            width: 300px;
            height: 200px;
            margin: 0 auto;
            background-color: green;
            text-align: center;
        }
    </style>
</head>

<body>
    <div>
        <span>乌拉乌拉</span>
    </div>
</body>

</html>

2.10.5 相邻块元素垂直外边距合并

如果指定了两个外边距，则会取两个值中最大的200px，这种现象叫做相邻快元素垂直外边距合并。

所以说一般去一个值就好。

<!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>
    <style>
        .dahu,
        .erhu {
            width: 200px;
            height: 100px;
            background-color: green;
        }

        .dahu {
            margin-bottom: 100px;
        }

        .erhu {
            margin-top: 200px;
        }
    </style>
</head>

<body>
    <div class="dahu">大虎</div>
    <div class="erhu">二虎</div>
</body>

</html>

2.10.6 嵌套块元素塌陷-外边距合并

问题：对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同事子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：

可以给父元素定义上边框（不让儿子啃老，弄条边框隔开，让儿子独立）
可以给父元素定义上内边距
可以给父元素添加overflow：hidden；

<!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>
    <style>
        .father {
            width: 400px;
            height: 400px;
            background-color: green;
            margin-top: 100px;
            /* border: 1px solid red; */
            /* padding-top: 1px; */
            /* overflow: hidden; */
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* margin-top: 100px; */
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

2.10.7 清除内外边距

{

padding：0；（清除内边距）

margin：0；（清除外边距）

}

注意：行内元素为了照顾兼容性，精良只设置左右内边距，但是转换为块级元素或者行内块元素就可以了。

2.11 阴影

2.11.1盒子阴影

1.h-shadow：水平阴影位置允许负值

2.v-shadow：垂直阴影位置允许负值

3.blur：模糊程度

4.spread：阴影大小

5.color：阴影颜色

6.inset：可选，将外部阴影（outset）改为内部阴影，outset为默认值外部阴影，加上该属性将失效。

<!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>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: green;
            margin: 150px auto;

        }

        div:hover {
            box-shadow: 21px 17px 12px 4px rgb(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

2.11.2 文字阴影

同样文字阴影也是有水平和垂直阴影，和模糊程度，模糊眼色，不过在实际开发中不经常使用。

<!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>
    <style>
        div p {
            font-size: 50px;
            color: chocolate;
            font-weight: 900;

        }
        div p:hover {
            text-shadow: 10px 5px 10px black;
        }
    </style>
</head>

<body>
    <div>
        <p>你是暗影，我是火影</p>
    </div>
</body>

</html>

2.12 css浮动

2.12.1 浮动简介

网页布局中第一准则：多个块级元素纵向排列用标准流，多个块级元素横向排列赵浮动。

浮动最典型运用，让多个块级元素一行内排列显示。

float：属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘碰到另一个包含块或者浮动框的左右边缘。

参数：none-默认值 right-右浮动 left-左浮动

<!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>
    <style>
        .left {
            width: 200px;
            height: 200px;
            background-color: green;
            float: left;
        }

        .right {
            width: 200px;
            height: 200px;
            background-color: green;
            float: right;
        }
    </style>
</head>

<body>
    <div class="left">青龙侍卫</div>
    <div class="right">白虎侍卫</div>
</body>

</html>

2.12.2 浮动特性

2.12.2.1 一-脱标

1.脱离了标准流的控制（浮），移动到了指定位置（动），（俗称脱标）。

2.浮动的盒子不在保留原来的位置，下面的盒子会占据拂面而来盒子的位置。

<!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>
    <style>
        .one {
            width: 100px;
            height: 100px;
            background-color: green;
            float: left;
        }

        .two {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
</body>

</html>

2.12.2 .2 二-浮动盒子一行显示

如果多个盒子设置了浮动属性，则他们会按照属性值一行内显示且顶端对齐排列。

注意：浮动的元素是互相靠在一起的（没有缝隙）

<!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>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: green;
            float: left;
        }

        .two {
            background-color: skyblue;
            height: 300px;
        }

        .four {
            background-color: chocolate;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div class="two"></div>
    <div>3</div>
    <div class="four"></div>
</body>

</html>

2.12.2.3 三-浮动元素具有行内块特性

任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素的相似特性。

<!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>
    <style>
        p {
            height: 48px;
            background-color: green;
            float: right;
        }

        span {
            background-color: pink;
            width: 200px;
            height: 200px;
            float: left;
        }

        a {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            float: left;
        }
    </style>
</head>

<body>
    <span>1</span>
    <a href="#">dulala

    </a>
</body>

</html>

2.12.3 浮动元素经常搭配标准流的父盒子

先用标准流的盒子排列上下位置，之后内部子元素采取浮动机制排列左右位置，符合网页第一准则。

<!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>
    <style>
        .header {
            width: 100%;
            height: 200px;
            /* background-color: green; */

        }

        .footer {
            width: 100%;
            height: 200px;


        }

        .one,
        .two,
        .three {
            width: 100px;
            height: 100px;
            float: right;
            background-color: green;
        }

        .four,
        .five,
        .six {
            width: 100px;
            height: 100px;
            background-color: pink;
            float: left;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
    <div class="footer">
        <div class="four">4</div>
        <div class="five">5</div>
        <div class="six">6</div>
    </div>
</body>

</html>

浮动综合练习

<!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>
    <style>
        .box {
            width: 1226px;
            height: 615px;
            background-color: pink;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 234px;
            height: 615px;
            background-color: green;
        }

        .right {
            float: left;
            width: 992px;
            height: 615px;
            background-color: skyblue;
        }

        .right>div {
            float: left;
            width: 234px;
            height: 300px;
            background-color: pink;
            margin-left: 14px;
            margin-bottom: 14px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">左青龙</div>
        <div class="right">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </div>
</body>

</html>

常见网页布局

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .top {
            height: 48px;
            background-color: gray;
        }

        .banner {
            width: 980px;
            height: 150px;
            background-color: pink;
            margin: 10px auto;
        }

        .box {
            width: 980px;
            height: 300px;
            background-color: green;
            margin: 0 auto;
        }

        .box li {
            float: left;
            width: 237px;
            height: 300px;
            background-color: chocolate;
            margin-right: 10px;
        }

        .box .last {
            margin: 0;
        }

        .footer {
            height: 150px;
            background-color: cornflowerblue;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="top">top</div>
    <div class="banner">bannner</div>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="footer">footer</div>
</body>

</html>

2.12.4 浮动布局注意点

1.浮动和标准流的父盒子搭配

先用标准流的盒子排列上下的位置，之后内部子元素用浮动排列左右位置

2.一个元素浮动了，理论上其他兄弟元素也要浮动

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

2.12.5 清除浮动

2.12.5.1 为什么清除浮动

因为由于父级盒子在很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父盒子高度为0时，就会影响下面标准流的盒子。

2.12.5.2清除浮动的本质和策略

1.清除浮动的本质：清除浮动的本质就是清除浮动元素脱离标准流造成的影响。

2.清除浮动的策略：闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。

2.12.5.3 清除浮动之额外标签法

额外标签法通俗来讲就是隔墙法，就是在最后一个浮动的子元素后面加一个额外标签，然后添加清除浮动样式。

实际开发不常用。

额外标签只能使用块级元素。

<!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>
    <style>
        .box {
            width: 900px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .aq {
            float: left;
            width: 200px;
            height: 300px;
            background-color: green;
        }

        .aw {
            float: left;

            width: 200px;
            height: 100px;
            background-color: gray;
        }

        .footer {
            background-color: #010001;
            height: 150px;
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="aq"></div>
        <div class="aw"></div>
        <div class="clear"></div>
    </div>
    <div class="footer"></div>
</body>

</html>

2.12.5.4 清除浮动之overflow

在父级盒子添加此行代码，里面可以添加值：htdden、auto、scroll清除浮动。

<!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>
    <style>
        .box {
            overflow: hidden;
            width: 900px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .aq {
            float: left;
            width: 200px;
            height: 300px;
            background-color: green;
        }

        .aw {
            float: left;

            width: 200px;
            height: 100px;
            background-color: gray;
        }

        .footer {
            background-color: #010001;
            height: 150px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="aq"></div>
        <div class="aw"></div>
    </div>
    <div class="footer"></div>
</body>

</html>

2.12.5.5 清除浮动之after伪元素

直接给父盒子写个伪元素，代码如下

<!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>
    <style>
        .clearfix::after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7专有 */
            *zoom: 1;
        }

        .box {
            width: 900px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .aq {
            float: left;
            width: 200px;
            height: 300px;
            background-color: green;
        }

        .aw {
            float: left;

            width: 200px;
            height: 100px;
            background-color: gray;
        }

        .footer {
            background-color: #010001;
            height: 150px;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="aq"></div>
        <div class="aw"></div>
    </div>
    <div class="footer"></div>
</body>

</html>

2.12.5.6 清除浮动之双伪元素清除

代码如下，与上类似（现阶段不需要理解）。

<!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>
    <style>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            /* IE6、7专有 */
            *zoom: 1;
        }

        .box {
            width: 900px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .aq {
            float: left;
            width: 200px;
            height: 300px;
            background-color: green;
        }

        .aw {
            float: left;

            width: 200px;
            height: 100px;
            background-color: gray;
        }

        .footer {
            background-color: #010001;
            height: 150px;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="aq"></div>
        <div class="aw"></div>
    </div>
    <div class="footer"></div>
</body>

</html>

2.12.5.7 清除浮动总结

问题：什么情况我们需要清除浮动？

解：

父元素没有高度
子盒子浮动了
影响下面布局了我们就应该清除浮动
最后记住清除浮动那四种样式

2.13 css定位

2.13.1 相对定位

相对定位的特点：

1.相对定位是元素移动位置的时候，是相当于他原来的位置来说的（自恋型–移动位置的时候参照点是自己原来的位置）

2.原来在标准流的位置继续占有，后面的盒子仍然以标准的方式对待他（不脱标，继续保留原来位置）因此，相对定位没有脱标，他典型的应用是给绝对定位当爹。

<!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>
    <style>
        .box1 {
            position: relative;
            top: 200px;
            left: 400px;
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="box1">
    </div>
    <div class="box2">
    </div>
</body>

</html>

2.13.2 绝对定位

特点：

1.绝对定位是在元素移动的时候，是相对于祖先元素来说的（拼爹型）如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。

2.如果祖先元素有定位（绝对，相对，固定），则以最近一级的有定位的祖先元素为参考移动位置。

3.绝对定位不在占有原来的位置（脱标）

<!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>
    <style>
        .yeye {
            position: relative;
            width: 800px;
            height: 800px;
            background-color: skyblue;
        }

        .father {

            width: 500px;
            height: 500px;
            background-color: pink;
        }

        .son {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 300px;
            height: 300px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="yeye">
        <div class="father">
            <div class="son">绝对定位是在元素移动位置的时候，是相对于祖先元素来说的（拼爹型）
                特点：<br>
                1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。<br>
                2.如果祖先元素有定位（绝对，相对，固定），则以最近一级的有定位祖先元素为参考移动位置。<br>
                3.绝对定位不再占有原来的位置（脱标）
            </div>
        </div>
    </div>


</body>

</html>

2.13.3 子绝父相的由来

子绝父相是定位位置最常用的一种方式：子级绝对定位的话，父级一定要用相对定位来约束子盒子。

1.子级绝对定位，不会占有位置，可以放到父盒子的任意位置，不会影响其他兄弟盒子。

2.父盒子需要加定位限制子盒子在父盒子中显示。

3.父盒子布局时，需要占有位置，所以必须是相对定位。

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

总结：因为父极需要占有位置，所以用相对定位，子级不需要占位置，所以用绝对定位。当然，子绝父相不是永远不变的，如果父元素不需要占位置，也可以子绝父绝。

2.13.4 固定定位

固定定位是元素固定在浏览器可视区的位置。

主要使用场景：在浏览器滚动屏幕时元素位置不会改变。

固定定位特点：

1.以浏览器可视窗口为参照点移动元素。跟父元素没有任何关系！！！不随着屏幕滚动而滚动！！

2.固定定位不占有原来的位置
固定定位也是脱标的，固定定位也可以看做是一种特殊的绝对定位。

小技巧：

1.让固定定位的盒子 left：50% 走到浏览器可视区的一般位置。

2.让固定定位的盒子 margin-left 版心宽度一半的距离，多走版心一半的位置。就可以让固定定位的盒子贴着版心右侧对齐了。

<!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>
    <style>
        .w {
            width: 800px;
            height: 1400px;
            background-color: pink;
            margin: 0 auto;
        }

        .fixed {
            width: 50px;
            height: 150px;
            background-color: green;
            position: fixed;
            /* 1.走浏览器的一半 */
            left: 50%;
            /* 2.利用margin 走版心的一半 */
            margin-left: 400px;
        }
    </style>
</head>

<body>
    <div class="fixed"></div>
    <div class="w">版心八百像素 
    </div>
</body>

</html>

2.13.5 粘性定位

粘性定位可以被认为是固定定位和相对定位的结合体

特点：

1.以浏览器可视窗口为参照点移动元素。（固定定位特点）

2.粘性定位占有原来的位置（相对定位的特点）

3.必须添加 top bottom left right 其中一个才有效，跟随页面滚动搭配使用，兼容性较差，ie不支持。

<!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>
    <style>
        body {
            height: 8000px;
        }

        .nav {
            position: sticky;
            top: 0;
            width: 800px;
            height: 50px;
            background-color: pink;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="nav">我是导航栏<br>
    </div>

</body>

</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dSsShM0i-1659840972940)(assets/dingwei.png)]

2.13.6 定位的叠放顺序

使用定位布局时，可能会出现重叠的情况，使用z-index可以来控制盒子的前后次序。

1.数值可以是正整数，负整数，默认是auto，数值越大，盒子越靠上。

2.如果数值相同，则会按照谁写顺序，后来者居上。

3.数字后面不能家单位。

4.只有定位的盒子才能有z-inde属性。

<!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>
    <style>
        .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }

        .daxiong {
            background-color: red;
            z-index: 1;
        }

        .erxiong {
            background-color: pink;
            top: 50px;
            left: 50px;
            z-index: 2;
        }

        .qiangzi {
            background-color: green;
            top: 100px;
            left: 100px;
        }
    </style>
</head>

<body>
    <div class="box daxiong">大熊</div>
    <div class="box erxiong">二熊</div>
    <div class="box qiangzi">光头强</div>
</body>

</html>

2.13.7 定位的拓展

2.13.7.1 绝对定位盒子居中算法

加了绝对定位的盒子不能通过Marin：0 auto；水平居中，可通过以下步骤实现。

1.left：50%；让盒子向左移动到父元素的水平中心位置。

2.margin-left：-盒子宽度一半；让盒子向左移动到自身宽度的一半。

<!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>
    <style>
        .box {
            position: absolute;
            /* 1.left 走50%，父容器宽度的一半 */
            left: 50%;
            /* 2.margin 负值 往左边走 自己盒子宽度的一半 */
            margin-left: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
    </div>
</body>

</html>

2.13.7.2 定位的特殊性

绝对定位和固定定位和浮动类似

1.行内元素添加绝对定位或固定定位，可以直接设置宽度和高度。

2.块级元素添加绝兑定位或固定定位，如果不给宽度和高度，则默认大小是内容的大小。

3.脱标的元素不会触发外边距塌陷（区别浮动）。

4.浮动元素，绝兑定位，固定定位元素都不会触发外边距合并问题。

2.13.7.3 绝兑定位（固定定位）会完全压住盒子

浮动元素不同，只会压住他下面的标准流的盒子，但不会压住下面标准流盒子里面的文字/图片。

但是绝对定位/固定定位会压住下面标准流所有的内容。

浮动之所以不会压住文字，因为浮动产生的母的最初就是为了做文字环绕效果的。文字会围绕浮动元素。

<!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>
    <style>
        .box {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <p>有志者事竟成，破釜沉舟，百二秦关终属楚；苦心人终不负，卧薪尝胆，三千越甲可吞吴。</p>
</body>

</html>

综合案例-淘宝轮播图

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .tb-promo {
            position: relative;
            width: 520px;
            height: 280px;
            background-color: pink;
            margin: 100px auto;
        }

        .tb-promo img {
            width: 520px;
            height: 280px;
        }

        .next,
        .prev {
            position: absolute;
            /* 绝对定位盒子垂直居中 */
            top: 50%;
            margin-top: -15px;
            /* 加了绝对定位的盒子可以直接设置宽度和高度 */
            width: 20px;
            height: 30px;
            background: rgba(0, 0, 0, .7);
            text-align: center;
            line-height: 30px;
            color: #fff;
            text-decoration: none;
        }

        .prev {
            left: 0;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }

        .next {
            /* 如果一个盒子既有right属性 也有left属性 则会优先执行left属性 同理 top bottom 优先top */
            right: 0;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
        }

        .promo-nav {
            position: absolute;
            left: 50%;
            margin-left: -35px;
            bottom: 15px;
            width: 70px;
            height: 13px;
            background: rgba(255, 255, 255, .4);
            border-radius: 7px;
        }

        .promo-nav li {
            float: left;
            width: 8px;
            height: 8px;
            background-color: #fff;
            border-radius: 50%;
            margin: 3px;
        }

        /* 不要忘记权重问题 */
        .promo-nav .selected {
            background-color: #ff0005;
        }
    </style>
</head>

<body>
    <div class="tb-promo">
        <img src="../images/tb.jpg" alt="">
        <!-- 左侧按钮箭头 -->
        <a href="#" class="prev">&lt</a>
        <!-- 右侧按钮箭头 -->
        <a href="#" class="next">&gt</a>
        <!-- 小圆点 -->
        <ul class="promo-nav">
            <li class="selected"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

</html>

2.14 元素的显示和隐藏

2.14.1 一个重要的属性display

类似于网站广告，我们点击关闭就消失不见了，重新刷新页面，会重新出现。

本质：让一个元素在页面中显示或隐藏起来。

display属性用于设置一个元素应该如何显示。

display：none；隐藏对象
dispaly：block；除了转换块级元素外，同事还有显示元素额意思。

display隐藏元素后，不再占有原来的位置。

<!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>
    <style>
        h3 {
            color: brown;
        }

        .q {
            display: none;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .w {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="q">金钱</div>
    <div class="w">女人</div>
</body>

</html>

2.14.2 visibility属性

类似于网站广告，我们点击关闭就消失不见了，重新刷新页面，会重新出现。

本质：让一个元素在页面中显示或隐藏起来。

visibility属性用于设置一个元素应该如何显示。

visibility：visible；元素可视
visibility：hidden；元素隐藏

display隐藏元素后，占有原来的位置（跟display的区别）。

如果隐藏元素后保留原来位置，用visibility：hidden；

如果隐藏元素不后保留原来位置，用display：none；

<!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>
<style>
    .e {
        visibility: hidden;
        width: 200px;
        height: 200px;
        background-color: pink;
    }

    .r {
        width: 200px;
        height: 200px;
        background-color: green;
    }

    h3 {
        color: brown;
    }
</style>

<body>
    <div class="e">权力</div>
    <div class="r">健康</div>
</body>

</html>

2.14.3 overflow属性

类似于网站广告，我们点击关闭就消失不见了，重新刷新页面，会重新出现。

本质：让一个元素在页面中显示或者隐藏起来

overflow属性指定了如果内容溢出一个元素的框（超过其指定的高度及宽度）时，会发生什么

visible：不剪切内容（完全显示）
hidden：不显示超出对象尺寸的内容，超出的部分隐藏掉
scroll：不管超出对象尺寸与否，都显示滚动条
auto：超出自动显示滚动条，不超出不显示滚动条

一般情况下，我们不想显示溢出的部分，因为溢出的部分会影响布局。

但是如果有定位的盒子，请慎用overflow：hidden；因为他会隐藏多余的部分。

<!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>
<style>
    .t {
        /* overflow: visible; */
        /* overflow: hidden; */
        /* overflow: scroll; */
        /* overflow: auto; */
        width: 200px;
        height: 200px;
        border: 3px solid pink;
        margin: auto;
    }
</style>

<body>
    <div class="t">
        伊丽莎白·奥尔森（Elizabeth Olsen），1989年2月16日出生于美国加利福尼亚州，美国演员。 2011年，她出演的《双面玛莎》入围圣丹斯电影节，并凭借在影片中的表演获得第38届土星奖最佳女主角[1]
        。2013年11月，伊丽莎白·奥尔森正式加盟《复仇者联盟：奥创时代》，出演绯红女巫[2] 。
    </div>
</body>

</html>

2.14.4 元素显示与隐藏总结

display显示隐藏元素，但是不保留位置

visibility显示隐藏元素，但是保留原来位置

overflow溢出显示与隐藏，只会对溢出的部分处理

元素隐藏案例-土豆

<!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>
    <style>
        .tudou {
            position: relative;
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .mask {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;

            background: rgba(0, 0, 0, .4) url(../images/arr.png) no-repeat center;
        }

        .tudou:hover .mask {
            /* 当我们鼠标经过了土豆，就让里面的遮罩层显示出来 */
            display: block;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="../images/tudou.jpg" alt="">
    </div>
</body>

</html>

2.15 css精灵技术

原理：精灵图主要针对于小的背景图片使用，直接把整个网站要用的图片拼在一张图片上，可以减少请求，提升速度，然后只需要把这张精灵图放在盒子里调整坐标即可。

主要借助于background-position（背景位置）来实现

一般情况下精灵图都是负值（千万注意网页中的坐标：x轴右边走是正值，左边走是负值，y轴下面为正，上面为负）

测量坐标主要使用Photoshop。

<!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>
    <style>
        span {
            display: inline-block;
            background: url(../images/abcd.jpg) no-repeat;
        }

        .f {
            width: 95px;
            height: 114px;
            background-position: 0 -137px;
        }

        .e {
            width: 100px;
            height: 112px;
            background-position: -482px -6px;
        }

        .n {
            width: 114px;
            height: 115px;
            background-position: -254px -274px;
        }

        .g {
            width: 107px;
            height: 113px;
            background-position: -98px -138px;
        }
    </style>
</head>

<body>
    <span class="f"></span>
    <span class="e"></span>
    <span class="n"></span>
    <span class="g"></span>
</body>

</html>

2.16 字体图标

2.16.1 字体图标的产生和优点

轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图像就会马上渲染出来，减少了服务器需求。

灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等。

兼容性：几乎支持所有浏览器，放心使用。

注意：字体图标不能代替精灵技术，只是对工作中图标部分技术的提升和优化。

总结

1.如果遇到一些结构和样式比较小的图标，就用字体图标。

2.如果遇到一些结构和样式比较复杂一点的小图片，就用精灵图。

2.16.2 字体图标的使用

首先是字体图标的下载

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vpObIaJr-1659840972942)(assets/icon%E4%B8%8B%E8%BD%BD%E5%9C%B0%E5%9D%80.jpg)]

2.16.3 字体图标引入

1.下载完之后会有一个压缩包解压会有几个文件，把其中font文件放在根目录下[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-laX8IzdU-1659840972942)(icon%E5%BC%95%E5%85%A5.jpg)]

2.在 CSS 样式中全局声明字体：简单理解把这些字体文件通过css引入到我们页面中。
一定注意字体文件路径的问题。

声明代码

@font-face {
 font-family: 'icomoon';
 src: url('fonts/icomoon.eot?7kkyc2');
 src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
 url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
 url('fonts/icomoon.woff?7kkyc2') format('woff'),
 url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}

3.声明之后，就可以去demo.html去引用文件了，在标签里面添加demo文件里的小图标，[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UFzVaBly-1659840972970)(icon%E9%80%89%E6%8B%A9.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SATZoK08-1659840972971)(%E4%BF%9D%E6%8C%81%E4%B8%80%E8%87%B4.jpg)]

2.16.4 字体图标的追加

如果工作中，原来的字体图标不够用了，我们需要添加的字体图标到原来的字体文件中。

把压缩包里面的selection.json重新上传，然后选中我们想要的新图标，重新下载压缩包，并替换原来的文件即可。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3hY9K91F-1659840972971)(icon%E8%BF%BD%E5%8A%A0.jpg)]

2.17 css三角

这个知道写法就行，让一个盒子定义宽度相同颜色不同的边框即可看到效果。

<!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>
    <style>
        .box1 {
            width: 0;
            height: 0;
            /* border: 10px solid green; */
            border-top: 10px solid pink;
            border-right: 10px solid brown;
            border-bottom: 10px solid skyblue;
            border-left: 10px solid green;
        }

        .box2 {
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-left: 10px solid green;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

三角案例-京东

<!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>
    <style>
        .jingdong {
            position: relative;
            width: 120px;
            height: 245px;
            background-color: gray;
            margin: 100px auto;
        }

        .jiao {
            position: absolute;
            right: -10px;
            top: 5px;
            width: 0;
            height: 0;
            border: 5px solid transparent;
            border-left: 5px solid gray;
        }
    </style>
</head>

<body>
    <div class="jingdong">
        <div class="jiao"></div>
    </div>
</body>

</html>

2.18 css用户界面

用户样式，即更改一些用户操作样式，在增加用户操作体验。

2.18.1 鼠标样式

cursor：default；我是初始小白三角样式
cursor：pointer；我是我是小手样式
cursor：move；我是十字架移动样式
cursor：text；我是文本编辑机样式
cursor：not-allowed；我是禁止样式

2.18.2 取消表单轮廓和防止拖拽文本域

outline：none；给表单添加后，可以去掉默认的蓝色边框。

resize：none；实际开发中，我们文本域右下角是不可以拖拽的。

<!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>
    <style>
        /* 取消表单轮廓 */
        input,
        textarea {
            outline: none;
        }

        /* 防止拖拽文本域 */
        textarea {
            resize: none;
        }
    </style>
</head>

<body>
    <input type="text">
    <!-- 文本域尽量写在一行 -->
    <textarea name="" id="" cols="30" rows="10"></textarea>
</body>

</html>

2.19 vertical-align属性应用

2.19.1 实现行内块元素和文字垂直居中对齐

css的vertical-align的使用场景：经常用于设置图片或表单（行内元素）和文本垂直对齐。

官方解释：用于设置一个元素的垂直对齐方式，但是他只是针对于行内元素或者行内块元素有效。

vertical-align：baseline；默认；元素放再父元素的基线上
vertical-align：top；把元素的顶端与行中最高的元素的顶端对齐
vertical-align：middle；把此元素放在父元素的中部
vertical-align：bottom；把元素的顶端与行中最低的元素的顶端对齐

<!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>
    <style>
        img { 
            /* vertical-align: baseline; */
            /* vertical-align: top; */
            vertical-align: middle;
            /* vertical-align: bottom; */
        }

        textarea {
            resize: none;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <img src="../images/tudou.jpg" alt=""> 欢迎收看g
    <textarea name="" id="" cols="30" rows="10"></textarea> 请你留言
</body>

</html>

2.19.2 解决图片底部默认空白缝隙

bug：图片底部都会有一个空白缝隙，原因是行内块元素和文字的基线对齐。

解决方法：

给图片添加vertical-align：middle | top | bottom等（提倡使用）
把图片转换为块级元素

<!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>
    <style>
        div {
            border: 5px solid red;
        }

        div img {
            vertical-align: middle;
        }
    </style>
</head>

<body>
        <div>
            <img src="../images/tudou.jpg" alt="">
        </div>
    </ul>
</body>

</html>

2.20 css高级技巧

2.20.1 单行溢出文字省略号显示

white-space：normal；如果文字一行显示不开，自动换行

强制文字一行显示只需要三步：

1.white-space：nowrap；如果文字一行显示不开，也必须强制在一行显示

2.overflow：hidden；溢出的部分隐藏起来

3.文字溢出的时候用省略号表示

text-overflow：ellipsis；

<!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>
    <style>
        div {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            /* white-space: normal; */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div>感时花溅泪，恨别鸟惊心。</div>
</body>

</html>

2.20.2 多行文本溢出显示省略号

多行溢出文字显示省略号，有较大的兼容问题。适用于webkit内核浏览器或移动端（移动端大部分都是webkit内核）

display：-webkit-box；弹性伸缩盒子模型显示

-webkit-line-clamp：2；限制在一个块元素显示的文本的行数

-webkit-box-orient：vertical；设置或检索伸缩盒子对象的子元素排列方式

<!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>
    <style>
        h1 {
            color: brown;
        }

        div {
            width: 150px;
            height: 40px;
            background-color: pink;
            overflow: hidden;
            text-overflow: ellipsis;


            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 2;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }
    </style>
</head>

<body>
    <div>今天是22年6月17日，晴，大一的暑假，很热，时间过得好快，转眼大一已经过去了。</div>
</body>

</html>

2.20.3 布局技巧-margin负值的巧妙运用

例如多个小li盒子浮动排列，则每个小li的右边框和下一个li的左边框会贴在一起那么就是两倍的边框，所以我们可以使小li往左移动这个边框的宽度，使每个小li边框看起来相等。

<!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>
    <style>
        ul li {
            position: relative;
            float: left;
            width: 150px;
            height: 200px;
            list-style: none;
            border: 1px solid red;
            /* 盒子先浮动，再往左走1px，正好压住 */
            margin-left: -1px;
        }

        ul li:hover {
            /* 1.如果是普通盒子，没有定位，则鼠标经过添加相对定位就行 */
            position: relative;
            border: 1px solid blue;
        }

        /* ul li:hover { */
        /* 2.如果li都有定位，则利用z-index提高层级 */
        /* z-index: 1;
            border: 1px solid blue; */
        /* } */
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

</html>

2.20.4 布局技巧-文字围绕浮动元素巧妙运用

浮动的元素不会压住文字，文字会围绕其元素来显示，浮动起初就是为了做文字环绕效果。

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 300px;
            height: 70px;
            background-color: pink;
            margin: 200px auto;
        }

        .pic {
            float: left;
            width: 120px;
            height: 60px;
            margin-right: 5px;
            background-color: #fff;
        }

        .pic img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="pic">
            <img src="../images/img.png" alt="">
        </div>
        <p>{集锦}热身赛-巴西1-5日本 内马尔替补两人血染赛场</p>
    </div>
</body>

</html>

2.20.5 布局技巧-行内块的巧妙运用

因为行内块元素默认有空白间隙，所以我们可以利用它这种特性来做页码。

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            text-align: center;
        }

        .box a {
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            color: #333;
        }

        .box .prev,
        .box .next {
            width: 85px;
        }

        .box .current,
        .box .elp {
            background-color: #fff;
            border: none;
        }

        input {
            width: 45px;
            height: 36px;
            border: 1px solid #ccc;
            outline: none;
        }

        button {
            width: 50px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#" class="prev">&lt;&lt;上一页</a>
        <a href="#">1</a>
        <a href="#" class="current">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <a href="#" class="elp">...</a>
        <a href="#" class="next">&gt;&gt;下一页</a>
        到第
        <input type="text">
        页
        <button>确定</button>
    </div>
</body>

</html>

2.20.6 布局技巧-css三角巧妙运用

其实就是直角三角形制作

使左下边框为0，上边框调高，就会将有边框挤高，然后其他边框都调成透明色，即可完成。

案例-京东

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 0;
            height: 0;
            /* 1.只保留有边框有颜色 */
            border-color: transparent red transparent transparent;
            /* 2.样式都是solid */
            border-style: solid;
            /* 3.上面边框宽度要大，有边框稍小，其余边框该为0 */
            border-width: 100px 50px 0 0;
        }

        .price {
            width: 160px;
            height: 24px;
            border: 1px solid red;
            margin: 100px auto;
            line-height: 24px;
        }

        .miaosa {
            position: relative;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            text-align: center;
            color: #fff;
            font-weight: 700;
            margin-right: 10px;
        }

        .miaosa i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }

        .yuanjia {
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="price">
        <span class="miaosa">
            $1999
            <i></i>
        </span>
        <span class="yuanjia">$9999</span>
    </div>
</body>

</html>

2.21 css初始化代码

把基本的浏览器样式规则集成，使用调用即可。

/* 把我们所有标签的内外边距清零 */
    * {
    margin: 0;
    padding: 0
    }
    /* em 和 i 斜体的文字不倾斜 */
    em,
    i {
    font-style: normal
    }
    /* 去掉li 的小圆点 */
    li {
    list-style: none
    }

    img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
    }

    button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
    }

    a {
    color: #666;
    text-decoration: none
    }

    a:hover {
    color: #c81623
    }

    button,
    input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
    }

    body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
    }

    .hide,
    .none {
    display: none
    }
    /* 清除浮动 */
    .clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
    }

    .clearfix {
    *zoom: 1
    }

这是我们写网页的初始化代码可以备份一下写代码时候直接调用即可（京东写法）

2.22 html5新特性

2.22.1 新增语义化标签

header：头部标签
nav：导航标签
article：内容标签
section：定义文档某个区域
aside：侧边栏标签
footer：尾部标签

1.这种语义化标准主要是针对搜索引擎的

2.这些新标签页面中可以使用多次

3.在IE9中，需要把这些元素转换为块级元素

4.其实，我们移动端更喜欢使用这些标签

5.HTML5还增加了很多其他标签

2.22.2 新增多媒体标签-视频

video：视频标签

属性：

autoplay：自动播放（谷歌浏览器需要添加musted来解决自动播放问题）
controls：向用户显示播放控件
width height 播放器宽高
loop：播放完继续播放该视频。循环播放
src：视频url地址
poster：加载等待的画面图片
muted：静音播放

<!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>
    <style>
        video {
            width: 100%;
        }
    </style>
</head>

<body>
    <video src="/media/mi.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop"
        poster="/media/mi9.jpg"></video>
    </ul>
</body>

</html>

2.22.3 新增多媒体标签-音频

audio：音频标签

用法基本与视频文件一致。

2.22.4 新增input类型

number：数字
tel：电话号码
search：搜索框
email：邮件
url：链接
time：时间
month：月类型
week：周类刑
color：颜色表单
date：日期类型

属性：

required：required 表单有该属性表示其内容不能为空，必填
placeholder：提示文本表单的提示信息，存在默认值将不再显示
autofocus：autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete：on/off 当用户在字段开始键入时，浏览器计入之前键入过的值，应该显示出在字段中填写的选项
multiple：multiple 可多选文件提交

2.23 css新特性

2.23.1属性选择器

1.利用属性选择器可以不借助类或id选择器

2.属性选择器还可以选择属性=值的某些元素重点务必掌握

/* 必须是input，但是同时具备value这个属性，选择这个元素 */
        /* input[value] {
            color: pink;
        } */
        /* 只选择type=text 文本框的input 选取出来 */
        /* input[type=text] {
            color: green;
        } */

3.属性选择器可以选择属性值开头的某些元素

小图标1

小图标2

小图标3

小图标4

我是酱油

4.属性选择器可以选择属性值结尾的某些元素

我是蓝羊羊

我是蓝狼狼

我是…

我是陆小果

我是绿洋洋

我是绿色，要变蓝色

 /* 首先是div的 具有class属性 并且属性值 必须是icon开头的这些元素 */
        div[class^=icon] {
            color: red;
        }

        /* 首先是section的 具有class属性 并且属性值 必须是data结尾的元素 */
        section[class$=data] {
            color: blue;
        }

        /* 首先是div的 具有class属性 并且属性值包含q的元素 */
        div[class*=q] {
            color: green;
        }

注意：类选择器属性选择器和伪类选择器权重都是10

2.23.2 结构伪类选择器

贴：

1.结构伪类选择器一般用于选择父级里面的第几个孩子

2.关于nth-child（n）我们要知道n是从0开始计算的，要记住常用的公式

3.如果是无序列表，我们肯定用nth-child更多

4.类选择器、属性选择器、伪类选择器、权重为10

2.23.2.1 nth-child选择器

first-child：选择钙元素里面的第一个孩子
last-child：选择钙元素里面的最后一个孩子
nth-child（even）：把所有偶数行的孩子选出来
nth-child(odd)：把所有奇数行的孩子选出来
nth-child(n)：从零开始每次加一往后面算这里面必须是n 不能是其他字母
nth-child(2n)：选择所有的偶数孩子，等价于even
nth-child(2n+1)：选择所有的奇数孩纸，等价于odd
nth-child(4n)：选择所有的4的倍数孩子
nth-child(n+3)：从第三个开始，修改样式
nth-child(-n+3)：前三个

<!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>
    <style>
        /* 选择ul里面的第一个孩子 */
        ul li:first-child {
            background-color: green;
        }

        /* 选择ul里面的最后一个孩子 */
        ul li:last-child {
            background-color: pink;
        }

        /* 选择ul里面的第五个孩子 */
        ul li:nth-child(5) {
            background-color: brown;
        }
    </style>
</head>

<body>
    <ul>
        <li>第1个孩子</li>
        <li>第1个孩子</li>
        <li>第1个孩子</li>
        <li>第1个孩子</li>
        <li>第1个孩子</li>
        <li>第1个孩子</li>
        <li>第1个孩子</li>
    </ul>
</body>

</html>

2.23.2.2 nth-of-type选择器

用法与nth-child一致，但有一点不同。

区别：

nth-child()会把所有盒子都排列序号执行的时候先看nth-child（1）之后回去看前面的div 不匹配则不执行（从后往前）

nth-of-type 会吧指定元素的盒子排列序号执行的时候先看 div（指定的元素）之后看nth-of-type(1) 第几个孩子（从前往后）

2.23.3 伪类选择器

before和after创建一个元素，但是属于行内元素
新创建的这个元素在文档树中是找不到的，所以我们成为伪元素
语法：div::before{}
beofore和after必须有content属性
before在父元素内容前面创建元素，after在父元素内容的后面插入元素
伪类选择器和标签选择器一样，权重为1

<!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>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        div::before {
            display: inline-block;
            width: 60px;
            height: 60px;
            background-color: #ccc;
            content: '我';
        }

        /* 这个content是必须要写的 */
        div::after {
            content: '风向';
        }
    </style>
</head>

<body>
    <div>是</div>
    
</body>

</html>

使用场景：

配合字体图标
清除浮动

<!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>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?p4ssmb');
            src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
                url('fonts/icomoon.woff?p4ssmb') format('woff'),
                url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        div {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid green;
        }

        div::after {
            position: absolute;
            top: 10px;
            right: 10px;
            font-family: 'icomoon';
            /* content: ''; */
            content: '\ea3c';
            color: green;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

<!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>
    <style>
        .box {
            width: 900px;
            border: 2px solid blue;

        }

        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }


        /* .clearfix:before,
        .clearfix:after {
            content: '';
            display: table;
        }

        .clearfix:after {
            clear: both;
        } */

        .s {
            float: left;
            width: 100px;
            height: 100px;
            background-color: brown;
        }

        .r {
            float: right;
            width: 100px;
            height: 100px;
            background-color: green;
        }

        .footer {
            /* width: 500px; */
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="s"></div>
        <div class="r"></div>
    </div>
    <div class="footer"></div>
</body>

</html>

2.23.4 css3盒子模型border-box

1.box-sizing:content-box盒子大小为width+padding+border(默认的)

2.box-sizing:border-box盒子大小为width，如果盒子模型我们改为了box-sizing:border-box，那padding和border就不会撑大盒子了（前提是padding和border不会超过width宽度）

<!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>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid green;
            box-sizing: content-box;
        }

        p {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid green;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div>
        风中传来苦咸，那是悔恨的味道吗？
    </div>
    <p>
        黎明不懂慈悲，黄昏不懂克制。
    </p>
</body>

</html>

2.23.5 图片模糊处理

filter：blur（0）；blur属性数值越大，图片越模糊。

<!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>
    <style>
        body {
            background-color: #ccc;
        }

        img {
            filter: blur(20px);
        }

        img:hover {
            filter: blur(0);
        }
    </style>
</head>

<body>
    <img src="/images/2.png" alt="">
</body>

</html>

2.23.6计算盒子宽度、高度，calc函数

clac：width可设置此函数，对宽度或者高度进行加减乘除运算。

<!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>
    <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }

        /* 子盒子永远比父盒子宽度少50px */
        .son {
            /* 括号里面可以使用加减乘除运算 */
            height: calc(100% - 50px);
            width: 50px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

2.23.7 属性transition过渡（重点）

语法：transition：变化属性花费时间运动曲线何时开始

多属性变换的话，中间加逗号。

当然最常用写法直接写all。

注意：谁做过渡给谁加

<!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>
    <style>
        div {
            width: 200px;
            height: 50px;
            background-color: green;
            /* transition:变化属性 花费时间 运动曲线 何时开始 */
            /* 多属性变换 中间加逗号 */
            transition: width .5s, height .5s;
            /* 如果想要多个属性变换，直接写all即可 */
            transition: all .5s;
        }

        /* 一定要记住：谁做过渡给谁加 */
        div:hover {
            width: 500px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

2.24 2d转换

2.24.1 2d转换之translate

++回想学习过的移动盒子方式：盒子外边距定位 2d转换移动

语法：transform：translate（x，y）

1.x就是x轴的坐标，y是y，中间用括号隔开

transform: translate(x, y);

transform: translate(20px, 50px);

2.如果只移动一个坐标，那就写一个参数，但是 the other 不能省略

transform: translate(200px, 0);

3.如果写一个值就这样写

transform: translateX(200px);

注意：

1.定义2d转换中的移动，沿着xy轴

2.translate最大的优点：不会影响到其他元素的位置

3.translate中的百分比单位是相对于自身元素的tarnslate（50%，50%）

4.对行内标签没有效果

<!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>
    <style>
        .one {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* x就是x轴的坐标，y是y，中间用括号隔开 */
            /* transform: translate(x, y); */
            /* transform: translate(20px,   50px); */
            /* 如果只移动一个坐标，那就写一个参数，但是 the other 不能省略 */
            /* transform: translate(200px, 0); */
            /* 如果是这种写法，那么就写一个值就刑 */
            transform: translateX(200px);
        }

        .two {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="one">
    </div>
    <div class="two">
    </div>
</body>

</html>

在以后有一个常用的写法-是一个盒子垂直水平居中

实现方法是：一个定位盒子x和y轴各走50%，再使用translate的百分比单位相对于自身倒回去走50%，即可实现。

<!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>
    <style>
        div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
        }

        p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: gray;
            /* translate 的百分比单位是相对于自身的  一般搭配定位使用 */
            transform: translate(-50%, -50%);
        }

        /* 行内元素没有效果 */
        span {
            transform: translate(20px, 20px);
        }
    </style>
</head>

<body>
    <div>
        <p></p>
    </div>
    <span>11111</span>
</body>

</html>

2.24.2 2d转换之rotate

2.24.2.1 基本使用

语法：transform：rotate（xdeg）；

单位是deg（度），正值为顺时针旋转，负值为逆时针。

<!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>
    <style>
        img {
            width: 200px;
            margin: 0 auto;
            border: 5px solid #000;
            border-radius: 50%;
            transition: all 1s;
        }

        img:hover {
            /* 单位deg（度） */
            /* 逆时针旋转360度 */
            transform: rotate(-360deg);
        }
    </style>
</head>

<body>
    <img src="../images/xx.jpg" alt="">
</body>

</html>

学了这个属性我们可以实现鼠标悬停，三角转动的效果。

实现方法：首先一个盒子，里面装一个只有右下边框的伪元素，先旋转45deg使其朝下，鼠标经过旋转到225deg，即可实现。

<!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>
    <style>
        div {
            position: relative;
            width: 249px;
            height: 50px;
            border: 1px solid #000;
        }

        div::after {
            position: absolute;
            content: '';
            top: 15px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid red;
            border-bottom: 1px solid red;
            transform: rotate(45deg);
            transition: all .2s;
        }

        /* 鼠标经过div 里面的小三角旋转 */
        div:hover::after {
            transform: rotate(225deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

2.24.2.2 设置转换中心点

1.可以跟方位名词：transform-origin：left bottom；

2.可以是具体坐标：transform-origin: 50px 50px;

3.默认就是50% 50%等价于center center；

<!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>
    <style>
        body {
            background: url(../images/ys2.webp) no-repeat;
            height: 780px;
            background-size: 100% 100%;
        }

        div {
            overflow: hidden;
            position: relative;
            width: 150px;
            height: 50px;
            margin: auto;
            background-color: gray;
            border: 2px solid #000;
            text-shadow: 5px 5px 10px blue;
            box-shadow: 10px 10px 15px #000;
            font-size: 35px;
            color: #ccc;
            text-align: center;
            line-height: 50px;
            margin-bottom: 20px;
        }

        div::before {
            position: absolute;
            content: '亚索';
            display: block;
            width: 100%;
            height: 100%;
            font-size: 35px;
            color: #000;
            text-shadow: 5px 5px 5px #000;
            text-align: center;
            line-height: 50px;
            background-color: orange;
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all .5s;
        }

        div:hover::before {
            transform: rotate(0deg);
        }
    </style>
</head>

<body>
    <div>
        腥红之月
    </div>
    <div>
        腥红之月
    </div>
    <div>
        腥红之月
    </div>
</body>

</html>

2.24.3 2d转换之缩放

语法：transform：scale（x，y）；

1.里面写的数字不跟单位就是倍数的意思 1 就是1倍 2 就是2倍

transform：scale（2，2）；

2.也可以只修改宽度或者高度

transform：scale（2，1）；

3.等比例缩放同时修改高度和宽度简单的写法是只填一个参数

transform：scale（x）；

4.等比例缩放，小于1就是缩放

transform：scale（0.5，0.5）；

5.scale 优势之处就是不影响其他盒子还可以设置中心点

案例-图片放大

<!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>
    <style>
        div {
            overflow: hidden;
            float: left;
            margin: 20px;
        }

        div img {
            transition: all .3s;
        }

        div img:hover {
            transform: scale(1.08);
        }
    </style>
</head>

<body>
    <div><a href="#"><img src="../images/ys3.webp" alt=""></a></div>
    <div><a href="#"><img src="../images/ys3.webp" alt=""></a></div>
    <div><a href="#"><img src="../images/ys3.webp" alt=""></a></div>
</body>

</html>

案例-分页按钮

<!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>
    <style>
        li {
            float: left;
            width: 50px;
            height: 50px;
            margin-left: 10px;
            border: 1px solid green;
            border-radius: 50%;
            text-align: center;
            line-height: 50px;
            list-style: none;
            /* 鼠标经过变小手 */
            cursor: pointer;
            transition: all .3s;
        }

        li:hover {
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>

</html>

2.24.4 2d转换综合写法一级顺序问题

顺序会影响结果

1.比如说先旋转，之后位移的方向会是旋转后的方向

2.当我们同时有位移和其他属性的时候，要把位移放最前面

<!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>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            transition: all .3s;
        }

        div:hover {
            transform: translate(100px, 200px) rotate(180deg) scale(0.2);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

2.25 css3动画

2.25.1 动画基本使用

需求：一打开页面，一个盒子从左边走到右边

1.定义动画

@keyframe

2.调佣动画

animation-name：引用动画名称；

animation-duration：时序时间；

…后面会讲解

<!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>
    <style>
        @keyframes move {

            /* 1.定义动画 */
            /* 开始状态 */
            0% {
                transform: translateX(0);
            }

            50% {
                transform: translateX(1200px);
            }

            /* 结束状态 */
            100% {
                transform: translate(1200px, 500px);
            }
        }

        div {
            width: 200px;
            height: 200px;
            background-color: green;
            /* 2.调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

2.25.2 动画序列

1.可以做多个状态的变化 keyframe 关键帧

2.里面的百分比要是整数

3.里面的百分比就是总的时间的划分（10s）

<!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>
    <style>
        @keyframes move {
            0% {
                transform: translate(0, 0);
            }

            25% {
                transform: translate(0, 1000px);
            }

            50% {
                transform: translate(1000px, 1000px);
            }

            75% {
                transform: translate(1000px, 0);
            }

            100% {
                transform: translate(0, 0);

            }
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            animation-name: move;
            animation-duration: 10s;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

2.25.3 动画常见属性

animation-name: move; 动画名称
animation-duration: 3s; 持续时间
animation-timing-function: ease-in-out; 运动曲线
animation-delay: 1s; 何时开始
animation-iteration-count: infinite; 重复次数 iteration 重复的 count 次数 infinite 无限
animation-direction: alternate; 是否反方向播放，默认是 normal 如果想要反方向就写 alternate
animation-fill-mode: forwards; 动画结束后的状态默认是backwards 回到起始状态我们可以让他停留在结束状态 forwards
animation-play-state: paused; 鼠标经过div 让这个div 停止动画鼠标离开就继续动画

2.25.4 动画属性简写（复合写法）

写法：animation: name duration timing-function delay iteration-count direction fill-mode 间歇属性不包括play-state;

前两个属性一定要写。

案例-大数据热点

<!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>
    <style>
        body {
            background-color: #333;
        }

        .map {
            position: relative;
            width: 747px;
            height: 617px;
            background: url(../images/map.png) no-repeat;
            margin: 0 auto;
        }

        .city {
            position: absolute;
            /* top: 227px;
            right: 193px; */
        }

        .bj {
            /* position: absolute; */
            top: 227px;
            right: 193px;
        }

        .tb {
            /* position: absolute; */
            top: 500px;
            right: 80px;
        }

        .gz {
            top: 530px;
            right: 185px;
        }

        .dotted {
            width: 8px;
            height: 8px;
            background-color: blue;
            border-radius: 50%;
        }

        .city div[class^="bowen"] {
            /* 保证我们小波纹在父盒子里面居中 放大后就会中心向四周发散 */
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: bowen 1.2s linear infinite;
        }
 
        .city div.bowen2 {
            animation-delay: .2s;
        }

        .city div.bowen3 {
            animation-delay: .4s;
        }

        @keyframes bowen {
            0% {}

            70% {
                width: 20px;
                height: 20px;
                opacity: 1;
            }

            100% {
                width: 50px;
                height: 50px;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="map">
        <div class="city bj">
            <div class="dotted"></div>
            <div class="bowen1"></div>
            <div class="bowen2"></div>
            <div class="bowen3"></div>
        </div>
        <div class="city tb">
            <div class="dotted"></div>
            <div class="bowen1"></div>
            <div class="bowen2"></div>
            <div class="bowen3"></div>
        </div>
        <div class="city gz">
            <div class="dotted"></div>
            <div class="bowen1"></div>
            <div class="bowen2"></div>
            <div class="bowen3"></div>
        </div>
    </div>
</body>

</html>

2.25.5 速度曲线之steps成长曲线

steps就是分几步来完成我们的动画，有了steps就不要再写 ease 或者linear。

<!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>
    <style>
        body {
            width: 1200px;
            height: 900px;
            background: url(../images/4.webp) no-repeat;
            background-size: contain;
        }

        div {
            overflow: hidden;
            font-size: 20px;
            width: 0;
            height: 30px;
            white-space: nowrap;
            background-color: #ccc;
            border-radius: 8px;
            animation: w 5s steps(15) forwards;
        }

        @keyframes w {
            0% {
                width: 0;
            }

            100% {
                width: 300px;
            }
        }
    </style>
</head>

<body>
    <div>天下万般兵刃，唯有过往伤人最深</div>
</body>

</html>

案例-熊大奔跑

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: cornflowerblue;
        }

        .re {
            position: absolute;
            top: 250px;
            left: 100px;
            width: 80px;
            height: 80px;
            background-color: yellow;
            border-radius: 50%;
        }

        .re div[class^="bobo"] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            box-shadow: 0 0 12px yellow;
            border-radius: 50%;
            animation: bobo 1s linear infinite;
        }

        .re div.bobo2 {
            animation-delay: .2s;
        }

        .re div.bobo3 {
            animation-delay: .4s;
        }

        @keyframes bobo {
            0% {}

            50% {
                width: 120px;
                height: 120px;
                opacity: 1;
            }

            100% {
                width: 150px;
                height: 150px;
                opacity: 0;
            }
        }

        .beijing2 {
            width: 3840px;
            height: 900px;
            background: url(../images/bg2.png) no-repeat 0 429px;
            animation: dashan 100s linear infinite backwards;
        }

        @keyframes dashan {
            0% {
                background-position: 0 429px;
            }

            100% {
                background-position: -3840px 429px;
            }
        }

        .beijing1 {
            width: 3384px;
            height: 900px;
            background: url(../images/bg1.png) no-repeat 0 564px;
            animation: xueshan 30s linear infinite backwards;
        }

        @keyframes xueshan {
            0% {
                background-position: 0 564px;
            }

            100% {
                background-position: -3384px 564px;
            }
        }

        .xiongda {
            position: absolute;
            bottom: -180px;
            width: 200px;
            height: 100px;
            background: url(../images/bear.png) no-repeat;
            animation: run .6s steps(8) infinite, move 2s linear forwards;
            font-size: 18px;
            font-weight: 700;
            color: darkorange;
        }

        .cai {
            width: 78px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            color: black;
            background-color: yellow;
            border-radius: 8px;
        }



        @keyframes run {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -1600px 0;
            }
        }

        @keyframes move {
            0% {
                left: 0;
            }

            100% {
                left: 50%;
                transform: translateX(-50%);
            }
        }
    </style>
</head>

<body>
    <div class="re">
        <div class="sun"></div>
        <div class="bobo1"></div>
        <div class="bobo2"></div>
        <div class="bobo3"></div>
    </div>
    <div class="beijing2">
        <div class="beijing1">
            <div class="xiongda">
                <div class="cai">我是小才</div>
            </div>
        </div>
    </div>
</body>

</html>

2.26 3d转换

2.26.1 3d转换之translate3d

transform:translateX(100px) translateY(100px) translateZ(100px);

1.translateZ沿着Z轴移动

2.translateZ后面单位我们一般跟px

3.translateZ（100px）向外移动100px（向我们的眼睛来移动的）

4.3D移动的简写方法

transform:translate3d(x,y,z);

5.xyz是不能省略的，如果没有就写0

transform: translate3d(0, 100px, 100px);

2.26.2 perspective透视

透视写在被观察元素的父盒子上面

使网页有3d效果的前提

视距越高，眼睛距离屏幕越远(越小)

视距越低，眼睛距离屏幕越近（越大）

<!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>
    <style>
        body {
            /* 透视写在被观察元素的父盒子上面 */
            perspective: 400px;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* transform: translateX(100px) translateY(100px) translateZ(100px); */
            /* 1.translateZ沿着Z轴移动 */
            /* 2.translateZ后面单位我们一般跟px */
            /* 3.translateZ（100px）向外移动100px（向我们的眼睛来移动的） */
            /* 4.3D移动的简写方法 */
            /* transform:translate3d(x,y,z); */
            /* transform: translate3d(100px, 100px, 100px); */
            /* 5.xyz是不能省略的，如果没有就写0 */
            transform: translate3d(400px, 100px, 100px);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

2.26.3 3d转换之rotate

2.26.3.1 rotateX

即沿着x轴旋转。

注意左手法则，拇指指向x轴正值，手指弯曲方向为正值，反之为负。

<!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>
    <style>
        body {
            perspective: 600px;
        }

        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }

        img:hover {
            transform: rotateX(360deg);
        }
    </style>
</head>

<body>
    <img src="../images/ys3.webp" alt="">
</body>

</html>

2.26.3.2 rotateY

即沿着x轴旋转。

注意左手法则，拇指指向y轴正值，手指弯曲方向为正值，反之为负。

<!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>
    <style>
        body {
            perspective: 600px;
        }

        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }

        img:hover {
            transform: rotateY(360deg);
        }
    </style>
</head>

<body>
    <img src="../images/ys3.webp" alt="">
</body>

</html>

2.26.3.3 rotateZ

与2d旋转效果差不多。

2.26.3.4 rotateZ

/* 沿x轴旋转 */

            /* transform: rotate3d(1, 0, 0, 360deg); */

            /* 沿y轴旋转 */

            /* transform: rotate3d(0, 1, 0, 360deg); */

            /* 根据两个坐标的矢量来旋转，xy轴的中分线 */

            /* transform: rotate3d(1, 1, 0, 360deg); */

2.26.4 3d呈现transform-style

让子元素保持3d空间环境，默认是不开启transform-style：flat；打开是preserve-3d；

<!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>
    <style>
        body {
            background-color: #000;
            perspective: 500px;
        }

        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 2s;
            /* 让子元素保持三d空间环境  默认是不开启transform-style：flat 打开是preserve-3d*/
            transform-style: preserve-3d;
        }

        .box:hover {
            transform: rotateY(80deg);
        }

        div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #fff;
        }

        .box div:last-child {
            background-color: gray;
            transform: rotateX(80deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>

</html>

案例-卡片翻转

<!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>打字机-3d转换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            /* perspective: 500px; */
            width: 1920px;
            height: 900px;
            background-color: #ccc;
            /* background: url(../images/zl.webp) no-repeat; */
            background: url(../images/zl.webp) no-repeat;
            background-size: contain;
            transition: all .3s;
        }

        body:hover {
            background: url(../images/hl.webp) no-repeat;
            background-size: contain;
        }



        .box {
            position: relative;
            width: 200px;
            height: 200px;
            /* margin: 100px auto; */
            transform-style: preserve-3d;
            transition: all 1s;

        }

        .box:hover {
            transform: rotateY(180deg);
        }

        .font,
        .back {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
            border: 3px solid #000;
            border-radius: 50%;
            color: #ccc;
            padding-top: 80px;
        }

        .font {
            background: url(../images/sl.webp) -10px;
            backface-visibility: hidden;
            color: chocolate;
            z-index: 1;
            text-shadow: 2px 2px 2px #fff;
            box-shadow: 8px 8px 5px #000;
        }

        .back {
            background: url(../images/sl.webp) -220px;
            color: mediumpurple;
            transform: rotateY(180deg);
            box-shadow: 8px 8px 5px #000;
            text-shadow: 2px 2px 2px #fff;
            /* box-shadow: 8px 8px 5px #fff; */
        }

        p {
            overflow: hidden;
            white-space: nowrap;
            position: absolute;
            width: 480px;
            height: 50px;
            top: 20px;
            left: 20%;
            font-size: 30px;
            color: #ccc;
            text-shadow: 5px 5px 2px #000;
            transition: all 6s;
            animation: dazi 6s steps(16);
        }

        @keyframes dazi {
            0% {
                width: 0;
            }

            100% {
                width: 480px;
            }
        }
    </style>
</head>

<body>
    <p>天下万般兵刃，唯有过往伤人最深。</p>
    <div class="box">
        <div class="font">昼日真龙</div>
        <div class="back">夜月梦龙</div>
    </div>
</body>

</html>

案例-3d导航栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=5, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            margin: 100px;
        }

        ul li {
            float: left;
            margin-left: 15px;
            width: 120px;
            height: 35px;
            /* margin-top: 50px; */
            list-style: none;
            perspective: 400px;
        }

        .box {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: all .3s;
        }

        .box:hover {
            transform: rotateX(90deg);
        }

        .front,
        .bottom {
            position: absolute;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 35px;
        }

        .front {
            background-color: pink;
            /* 这边让粉色盒子沿着z轴往前17.5距离 使两个盒子沿着中心点旋转 */
            transform: translateZ(17.5px);
            z-index: 1;
        }

        .bottom {
            background-color: purple;
            /* 这个轴一定是负值 */
            /* 我们如果有移动，或者其他样式，必须先写我们的移动 */
            /* 让紫色盒子rotateX90度躺下 然后translateY17.5距离掉下去 */
            transform: translateY(17.5px) rotateX(-90deg);
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <div class="box">
                <div class="front">永恩</div>
                <div class="bottom">风中传来苦咸</div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front">亚索</div>
                <div class="bottom">那是悔恨的滋味</div>
            </div>
        </li>

    </ul>
</body>

</html>

综合案例-旋转木狗

<!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>
    <style>
        body {
            perspective: 800px;
        }

        section {
            position: relative;
            width: 300px;
            height: 200px;
            margin: 150px auto;
            transform-style: preserve-3d;
            animation: rotate 10s linear infinite;
        }

        section:hover {
            animation-play-state: paused;
        }

        @keyframes rotate {
            0% {
                transform: rotate(0);
            }

            100% {
                transform: rotateY(360deg)
            }
        }

        section div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(../images/dog.jpg) no-repeat;
        }

        section div:nth-child(1) {
            transform: rotateY(0) translateZ(500px);
        }

        section div:nth-child(2) {
            transform: rotateY(60deg) translateZ(500px);
        }

        section div:nth-child(3) {
            transform: rotateY(120deg) translateZ(500px);
        }

        section div:nth-child(4) {
            transform: rotateY(180deg) translateZ(500px);
        }

        section div:nth-child(5) {
            transform: rotateY(240deg) translateZ(500px);
        }

        section div:nth-child(6) {
            transform: rotateY(300deg) translateZ(500px);
        }
    </style>
</head>

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

</html>