黑马Pink老师H5CSS教程学习笔记

我不要折耳根

已于 2022-09-15 23:19:05 修改

阅读量2.2k

点赞数 7

分类专栏：前端文章标签： html css3

于 2022-08-03 17:58:05 首次发布

本文链接：https://blog.csdn.net/weixin_55909367/article/details/126145984

版权

前端专栏收录该内容

7 篇文章 2 订阅

订阅专栏

PC端

一、HTML标签（上）

（一）、HTML语法规范

1.标签分类

双标签
开始结束
单标签

2.标签关系

包含（父子）关系：

<head>
    <title> </title>
</head>

并列（兄弟）关系：

<head> </head>
<body> </body>

（二）、基本结构标签

1.第一个HTML网页

每一个网页都会有一个基本的结构标签，页面内容也是在这些基本标签上书写的。

<html>			//HTML根标签
    <head>		//文档的头部
        <title>我的第一个页面</title>		//文档的标题
    </head>
    <body>		//文档的主体，网页的显示内容
        你我之间，黑马洗练。
    </body>
</html>

（三）、网页开发工具

1.vs code的使用

CTRL+N 新建文件
CTRL+S 保存文件
CTRL + 放大视图
CTRL - 缩小视图
!+TAB 生成骨架
ALT+B 打开浏览器

2.骨架新增代码

	<!DOCTYPE>	文档类型声明标签(必须是第一行)					  <!DOCTYPE html>
	lang 		定义文档的显示语言(en英语网页;zh-CN中文网页)			<html lang="en">
	charset		字符集,方便计算机存储和识别各种文字(必须写)	 		  <meta charset="UTF-8">

（四）、HTML常用标签

1.标题标签

h——head,头部、标题

<h1>一级标题</h1>
<h2>二级标题</h2>
		:
		:
<h6>六级标题</h6>

标签语义：作为标题使用，依据重要性递减
特点： 1.加了标题的文字会加粗，字号会变大
2.每个标题独占一行

2.段落标签和换行标签

p——paragraph，段落

<p>我是段落标签</p>

标签语义：把HTML文档分为若干段
特点： 1.文本会根据浏览器窗口大小自动换行
2.段落与段落之间会有一定的空隙

br——break,换行
换行标签

<br />

标签语义：强制换行
特点： 1.是单标签
2.
是另起一行，与段落不同，行与行之间无空隙

3.文本格式化标签

<strong></strong> / <b></b>	加粗
<em></em> / <i></i>			倾斜	
<del></del> / <s></s>		删除线
<ins></ins> / <u></u>		下划线

标签语义：突出重要性，比普通文字更重要

4.div和span布局标签

标签没有语义，他们就是一个盒子，用来装内容的，布局网页

div——division 分割
span——span 跨度

<div>这是头部</div>
<span>今日价格</span>

特点：1.

标签用来布局，但是一行只能放一个

，大盒子
2. 标签用来布局，一行上可以有多个，小盒子

5.图像标签

img——image 图像

<img src="imaname.jpg" />

src 标签的必须属性，它用于指定图像文件的路径和文件名
alt 替换文本，图片不能显示时，显示替换文本
title 提示文本，鼠标放到图片上，显示文字
width 设置图像的宽度
height 设置图像的高度
border 设置图像的边框粗细

PS: 1.属性要写到src后
2.属性之间不分先后顺序，属性与属性之间要以空格分开
3.属性采取键值对的方式，即属性=“属性值”

6.路径

目录文件夹：普通文件夹，存放相关素材，HTML文件、图片等
根目录：打开文件夹的第一层就是根目录

路径：相对路径和绝对路径
相对路径：包含同一级路径，下一级路径，上一级路径

<img src="baidu.jpg" />			    //同一级路径
<img src="image/baidu.jpg" />		//下一级路径		/
<img src="../baidu.jpg" />			//上一级路径		../

绝对路径：指目录下的绝对位置，通常是从盘符开始的路径

<img scr="D:\文件\HTML\baidu.jpg" />			电脑绝对地址
<img scr="https://i0.hdslb.com/bfs.png" />	  网络绝对地址

7.超链接标签

a——anchor 锚
超链接标签，从一个页面链接到另一个页面

<a href="跳转目标" target="目标窗口弹出方式"> 文本或图像 <a />

href 指定链接目标的url地址（必须属性）
target 指定链接页面的打开方式，其中_ self 默认值为在当前页面打开，_ blank为在新窗口中打开方式

链接分类
1.外部链接：打开别的网站
2.内部链接：网站内部页面的相互链接
3.空链接：#
4.下载链接：如果href链接为文件或压缩包地址，则点击后会直接下载该压缩包
5.网页元素链接：网页中的各种元素都可以添加链接，例如图片、表格、视频、音频等
6.锚点链接：点击链接，快速定位到页面的相应位置
方法：在链接href属性中，设置属性值为 #名字的形式，找到目标位置标签，里面添加一个id属性=刚才的名字

注意：不能在a标签里嵌套a标签

<h3>外部链接</h3>
<a href="http:\\www.qq.com" target="_self">腾讯</a>     当前窗口打开
<br />
<a href="http:\\www.qq.com" target="_blank">腾讯</a>    新建窗口打开
<h3>内部链接</h3>
<a href="09-图像标签.html" target="_self">10-路径</a>    当前窗口打开
<h3>空链接</h3>
<a href="#" target="_self">空链接</a>                    当前窗口打开
<h3>下载链接</h3>
<a href="压缩包.zip" target="_self">下载链接</a>          当前窗口打开
<h3>网页元素链接</h3>
点击图片访问相应的网站
<br />
<a href="http:\\www.baidu.com" target="_self"><img src="SquirrelNesting.jpg" width="500"></a>   
<br />当前窗口打开

<h3>锚点链接</h3>
<a href="#zuoze" target="_self">锚点链接到作者</a>
...内容
<h id="zuoze">作者：孔某</h><br /> 
2020.03.31

8.base标签

base可以控制页面中的所有a标签的打开方式（当前页面打开，还是新建窗口打开）

target 属性控制整个页面的链接跳转方式
href 基于当前链接地址进行跳转，如果没有基于当前链接则不受影响

<base target="_blank" href="https://www.baidu.com">

（五）、注释和特殊字符

1.注释标签

<!--文字-->
快捷键CTRL+/

2.特殊字符

在HTML中一些特殊的符号很难直接使用，此时将用字符代替

特殊字符		字符代码
空格			  	 &nbsp;
<				&lt;
>				&gt;
&				&amp;
￥				&yen;
©(版权)			&copy;
®(注册商标)		  	&reg;
℃				&deg;
±				&plusmn;
×				&times;
÷				&divide;
²				&sup2;
³				&sup3;

二、HTML标签（下）

（一）表格标签

1.表格的作用

用于显示、展示数据，让数据更加规整，可读性更好，把繁琐的数据表现得很有条理，表格不是用来布局页面的，而是用来展示数据的

2.表格标签基本语法

table——table 表格
tr——table row 表格的行
td——table data 单元格的内容

<table>			<!--用于定义表格-->
    <tr>		<!--用于定义表格中的行-->	
    	<td>单元格内的文字</td>	<!--用于定义表格中的单元格-->
        ...
    </tr>
    ...
</table>

3.表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗、居中显示
th——table head 表头单元格

<table>
	<tr>
    	<th>表头单元格内的文字</th><!--用于定义表头单元格-->
        ...
    </tr>
    ...
</table>

4.表格属性

属性名属性值描述
align left、center、right 规定表格相对周围元素的对齐方式，表格位置
border 1或"" 边框默认为""，无边框
cellpadding 像素值规定单元边框与文字之间的空白，默认1像素
cellspacing 像素值规定单元格与单元格之间的空白，默认2像素
width 像素值或百分比规定表格宽度
height 像素值或百分比规定表格高度

这些标签要写的

里面去

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="400">
    ...
</table>

5.表格结构标签

使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分
thead——table head 表格头部区域
tbody——table body 表格主体

<thead><!--表格头部区域-->
    <tr>
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
    </tr>
</thead>
<tbody><!--表格主体区域-->
	<tr>
        <th>1</th>
        <th>鬼吹灯</th>
        <th>上升</th>
    </tr>
    ...
</tbody>

PS:
1.用于定义表格的头部，内部必须包含标签，一般位于第一行
2.用于定义表格的主体，主要用于放数据本体
3.这两个标签都是放到

标签里面的

6.合并单元格

合并单元格的方式：
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”

目标单元格（写合并代码）：
跨行合并：最上侧单元格为目标单元格，写合并代码
跨列合并：最左侧单元格为目标单元格，写合并代码

合并单元格三步曲：
1.先确定跨行还是跨列合并
2.找到目标单元格，写上合并方式=“合并单元格的数量”，比如：
3.删除多余的单元格

（二）列表标签

表格是用来展示数据的，列表标签是用来布局页面的
列表最大特点就是整齐、整洁、有序，它作为布局会更加方便和自由

分类：无序列表、有序列表、自定义列表

1.无序列表

ul——unordered list 无序列表
li——list items 列表项

CSS去除Li前面的项目符号：list-style:none;

<ul><!--表示无序列表，一般会以项目符号呈现列表项-->
    <li>列表项1</li><!--列表项使用<li>标签定义-->
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ul>

PS:
1.无序列表的各个列表项之间没有顺序之分，是并列的
2.在 ul 标签中只能嵌套 li 标签
3.在 li 标签中可以嵌套其他任何标签
4.无序列表会带有自己的样式属性，在实际使用时，会用CSS来设置

2.有序列表

ol——ordered list 有序列表
li——list items 列表项

<ol><!--表示有序列表，列表项会按照一定顺序排列-->
    <li>列表项1</li><!--列表项使用<li>标签定义-->
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ol>

PS:
1.在 ol 标签中只能嵌套 li 标签
2.在 li 标签中可以嵌套其他任何标签
3.有序列表会带有自己的样式属性，在实际使用时，会用CSS来设置

3.自定义列表

常用于对术语名词进行解释和描述，定义列表的列表项没有任何项目符号
dl——define list 定义列表

<dl>	<!--定义描述列表-->
    <dt>名词1</dt>	<!--定义项目/名字-->
    <dd>名词1解释1</dd>		<!--定义项目解释-->
    <dd>名词1解释2</dd>
    <dd>名词1解释3</dd>
</dl>

PS:
1.在 dl 标签中只能嵌套 dt 标签和dd标签
2.dt标签和dd标签数量上没有限制
3.dt标签和dd标签是并列关系

（三）表单标签

1.表单作用

收集用户信息，在网页中，与用户进行交互，收集用户信息，此时就需要表单

2.表单的组成

一个完整的表单由表单域、表单元素和提示信息组成

3.表单域

表单域是一个包含表单元素的区域，实现用户信息的收集和传递，会把表单域内的表单元素信息提交给服务器

属性属性值作用
action url地址指定接收并处理表单数据的服务器程序的url地址
method get/post 设置表单数据的提交方式
name 名称指定表单的名称，以区分一个页面中的多个表单区域

<form action="url地址" method="提交方式" name="表单域名称"><!--定义表单域-->
    各种表单元素控件
</form>

4.表单元素

表单元素就是允许用户在表单中输入或者选择的内容控件

1）input表单元素

input输入的意思，在表单元素中用于收集用户信息
type属性设置不同的属性值来指定不同的控件类型

属性值描述
button 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox 定义复选框
file 定义输入字段和“浏览”按钮，供上传文件
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码字段，该字段的字符被掩码
radio 定义单选按钮
reset 定义重置按钮，重置按钮会清除表单中的所有数据
submit 定义提交按钮，提交按钮会把表单数据发送给服务器
text 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符

<input type="属性值" />

<form>
    <!-- text文本框 -->
    用户名：<input type="text"/><br />  
    <!-- password密码框 看不见内容 -->
    密码：<input type="password" /><br />
    <!-- radio单选按钮 多选一-->
    性别：男<input type="radio"/> 女<input type="radio"/><br />
    <!-- checkbook复选按钮 多选-->
    爱好：书法<input type="checkbox"/> 吉他<input type="checkbox"/> 音乐<input type="checkbox"/><br /> 
    <!-- submit提交按钮 提交按钮会把表单数据发送给服务器 -->
    <input type="submit" value="免费注册"/><br />
    <!-- reset重置按钮 重置按钮会清除表单中的所有数据 -->
    <input type="reset" value="重新填写"/><br />
    <!-- button按钮 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本） -->
    <input type="button" value="获取验证码"/><br /><br />
    <!-- file 定义输入字段和“浏览”按钮，供上传文件 -->
    上传文件：<input type="file" value="浏览"/><br /><br />

</form>

除了type属性外input还有其他属性

属性属性值描述
name 由用户定义定义input元素的名称
value 由用户定义规定input元素的值
checked checked 规定此input元素首次加载时应当被选中
maxlength 正整数规定输入字段中的字符量的最大长度

<form>
    <!-- name是表单元素的名字，用来区别表单元素，性别单选按钮必须有相同的名字，才能实现多选一 -->
    性别：男<input type="radio" name="gender" value="男"/> 女<input type="radio" name="gender" value="女"/><br />
    <!--value 规定input元素的值-->
    用户名：<input type="text" name="user name" value="请输入用户名"/><br />
    <!-- 在单选按钮和复选框中可以设置checked，规定此input元素首次加载时应当被选中 -->
    性别：男<input type="radio" name="gender" value="男" checked/> 女<input type="radio" name="gender" value="女"/><br />
    <!-- maxlength规定输入字段中的字符量的最大长度 -->
    身份号：<input type="text" name="user name" maxlength="18"/><br /> 
</form>

PS:
1.name value 是每个单元表格元素都有的属性值，主要给后台人员使用
2.name是表单元素的名字，要求单选按钮和复选框都要有相同的name值

2）label标签

label——标注，label标签为input元素定义标注（标签）
作用：绑定表单元素，当点击文本时,浏览器就会自动聚焦光标或转到在表单元素上，增加用户体验

<form>
    <label for="username">用户名：</label>
    <input type="text" name="user name" id="username" value="请输入用户名"/><br />  
    <label for="gender1">男</label>
    <input type="radio" name="gender" id="gender1" />
    <label for="gender2">女</label>
    <input type="radio" name="gender" id="gender2" />
</form>

PS：
1.label中的for=“ ”的值要与input中的id属性相一致
2.提示文本要在label标签对的中间

3）select下拉表单元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aclAF1qh-1659520525072)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220405143513061.png)]

select——选择，如果有许多选项让用户来选择，并且想要节约页面空间，用标签定义下拉列表

<form action="">
    籍贯：
    <select name="籍贯" id="籍贯">
        <option value="山东">山东</option>
        <option value="北京">北京</option>
        <option value="天津">天津</option>
        <option value="贵州">贵州</option>
        <!-- option中定义selected=“selected”时，当前为默认选中项 -->
        <option value="云南" selected>云南</option> 
    </select>
</form>

PS：
1.select至少包含一对option
2.option中定义select=“select”时，当前为默认选中项

4）text area文本域元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U2PyPeJY-1659520525073)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220405145034786.png)]

当用户输入内容比较多的情况下，此时可以使用textarea标签，常见于留言板、评论等
在表单元素中，textarea是可以定义多行文本输入的控件

<form>
    今日反馈：
    <textarea rows="5" cols="20">请输入您的反馈</textarea>
</form>

（四）查阅文档

1.百度 http://www.baidu.com
2.W3C http://www.w3school.com.cn
3.MDN https://developer.mozilla.org/zh-CN

三、CSS第一天

（一）CSS简介

CSS主要用来美化页面、布局页面

1.HTML的局限性

HTML主要是做结构，显示元素内容。只关注内容，但是丑。虽然可以做简单的样式，但是非常臃肿和繁琐

2.CSS网页的美容师

CSS是层叠样式表的简称，有时也称为CSS样式表或级联样式表，CSS也是一门标记语言
CSS主要用于设置HTML页面的文本内容（字体、大小、对齐方式）图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式
CSS最大的价值：由HTML专注去做结构呈现，样式交给CSS，即结构与样式分离

3.CSS语法结构

CSS规则由两个主要的部分组成：选择器以及一条或多条声明

<style>
    /* 选择器 { 样式 } */
    /* 选择器：给谁改样式 { 样式：改什么样式 } */
    /* 选择器：p 段落 { 样式：字体颜色和大小 } */
    p {
        /* 修改文字的颜色为红色 */
        color: red;
        /* 修改字体大小为20像素 */
        font-size: 20px;
    }
</style>

PS：
1.选择器是用于指定CSS样式的HTML标签，花括号内是对该对象的设置的具体样式
2.属性与属性值之间以键值对的形式出现，用：分割
3.属性与属性之间用；分割

4.CSS代码风格

1）样式格式书写

利用展开式的风格书写

 <style>
     p {
		/* 展开式的风格 */
        color: red;
        font-size: 20px;
    }
</style>

2）样式大小写风格

利用小写来书写代码

3）样式空格风格

在属性值前面，冒号的后面，保留一个空格
选择器与 { }之间保留一个空格

（二）CSS基础选择器

1.CSS选择器的作用

选择器（选择符）的作用就是根据不同的需求把不同的标签选出来，简单来说就是选择标签用的

2.选择器的分类

选择器分为基础选择器和符合选择器两大类

基础选择器是由单个选择器组成的，包括标签选择器、类选择器、id选择器和通配符选择器

3.标签选择器

标签选择器是指用HTML标签名称作为选择器，按标签名分类，为页面中的某类标签指定CSS样式
标签选择器可以把某一类标签全部选择出来，比如所有的

优点：能够为页面中同类型的标签统一设置样式
缺点：不能差异化设置，只能选择同一类的全部的标签

标签名{
		属性1: 属性值1;
		属性2: 属性值2;
		...
}

4.类选择器

类选择器能够实现差异化选择，可以单独选择一个或者几个标签
类选择器需要用class属性来调用

.类名{
	属性1: 属性值1;
	属性2: 属性值2;
	...
}

<!--类选择器的设置-->
<style>
    /* 类选择器口诀：样式点定义，结构类定义，一个或多个，开发最常用 */
    .red {
        color: red;
    }
</style>

<!--类选择器的调用-->
<!--无序列表-->
<ul>
        <li class="red">许嵩</li>
        <li>羽肿</li>
        <li class="red">新裤子</liclass>
        <li>许巍</li>
        <li>房东的猫</li>
</ul>

PS：
1.类选择器使用 . (英文点号) 进行标识，后面紧跟自定义的类名（不可以用标签名来命名）
2.可以理解为给标签起了一个名字来表示
3.长的名称或词组可以用-来为类选择器命名，例如 .red-bord{ }
4.不要使用纯数字或者中文来命名，尽量使用英文
5.命名要有意义，尽量让别人一眼就知道这个类名的目的
6.参考命名规则来命名

多类名

我们可以给一个标签指定多个类名，从而达到更多的选择的目的
可以把一些标签元素相同的样式放到一个类里面
这些标签可以调用这个公共的类，然后再调用自己独有的类
从而节省了CSS代码，统一修改也非常方便

<div class="red font">
    亚瑟
</div>

PS：
1.在标签class属性中可以写多个类名
2.多个类名之间要用空格分开

5.id选择器

id选择器可以标有特定的id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义

#id名{
	属性1: 属性值1;
	属性2: 属性值2;
	...
}

<style>
     /* 口诀：样式#定义，结构id调用，只能调用一次，
    #nav {
        color: red;
    }
</style>

<div id="nav">迈克尔.杰克逊</div>

PS：
id属性只能在每个HTML文档中出现一次

id选择器与类选择器的区别

1.类选择器好比是人的名字，一个人可以有很多名字，同一个名字可以被多个人使用
2.id选择器好比是人的身份证号码，不得重复
3.id选择器与类选择器最大的区别是在使用次数上
4.类选择器在修改样式中最常用，id选择器一般是用于页面唯一性的元素上，经常和JavaScript配合使用

6.通配符选择器

在CSS中，通配符选择器使用“ * ”定义，它表示选取页面中所有元素，将页面中所有元素全部自动修改

*{
	属性1: 属性值1;
	属性2: 属性值2;
	...
}

<style>
        * {
            color: red;
            font-size: 35px;
        }
/* *这里将html body div span ul li 全部改为了红色 */
</style>

PS：
1.通配符选择器不需要调用，自动就给所有元素修改使用样式
2.在特殊情况下才使用

（三）设置字体样式

CSSFonts属性用于定义字体系列、大小、粗细和文本样式（如斜体）

1.字体系列

CSS中使用font-family属性定义文本的字体系列

<style>
    h2 {
        color: red;
        font-family: 'Microsoft Yahei';
    }
    p {font-family: "微软雅黑";}
    div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}
</style>

PS：
1.各个字体之间必须使用英文状态下的逗号隔开
2.一般情况下，如果有空格隔开的多个单词组成的字体，要加引号
3.尽量使用系统默认自带的字体，保证用户在任何浏览器中都能正确显示
4.在日常开发中通常是给body定义字体常见字体有’Microsoft YaHei’ ，tahoma，Arial，‘Hiragino Sans GB’

2.字体大小

CSS中使用font-size属性定义文本大小
px——像素

<style>
    body {
        font-size: 30px;
    }

    /* 标题标签比较特殊需要单独指定文字大小 */
    h2 {
        font-size: 40px;
    }
</style>

PS：
1.谷歌浏览器默认字体大小为16px
2.不同浏览器可能显示的字号大小不一致，我们尽量给一个明确的大小，不要默认大小
3.可以给body指定整个页面文字的大小

3.字体粗细

CSS中使用font-width属性定义文本粗细

值	描述
normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
“number”	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold，后面不加单位。
inherit	规定应该从父元素继承字体的粗细。

<style>
    .bold {
    /* font-weight: bold; */
    font-weight: 700;
    /* 700后没有单位，等价于加粗 */
	/* 实际开发中更提倡使用数字来表示加粗或者变细 */
    }
</style>

4.文字样式

CSS中使用font-style属性定义文本样式

值	描述
normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式。

<style>
    /* 让正常的文字倾斜 */
    p {
        font-style: italic;
    }

    /* 让倾斜的文字正常 */
    em {
        font-style: normal;
    }
</style>

5.字体的复合属性

字体属性可以综合来写，这样更加节约代码

<style>
    /* 想要div的文字变  倾斜 加粗 字号16px 微软雅黑 */
    div {
        /*
        一般写法 
        font-style: italic;
        font-weight: 700;
        font-size: 16px; 
        font-family: "Microsoft YaHei";
        */
        /* 复合属性 */
        /* 书写顺序格式   font: font-style font-weight font-szie/line-height font-family */
        font: italic 700 16px/20px "Microsoft YaHei";
    }
</style>

PS：

1.使用font复合属性时，必须按照上述语法格式书写，不能颠倒顺序，并且各属性间以空格隔开
2.不需要设置的属性可以省略，但必须保留font-size和font-family属性，否则复合属性将不起作用

（四）设置文本样式

CSS text属性可以定义文本的外观，比如文本的颜色、对齐文本、装饰文字、文本缩进、行间距等

1.文本的颜色

color属性定义文本的颜色

值	描述
color_name	规定颜色值为颜色名称的颜色（比如 red）。
hex_number	规定颜色值为十六进制值的颜色（比如 #ff0000）。（最常用）
rgb_number	规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。

<style>
     div {
         /* color: deeppink; */
         /* color: #ff0000; */
         color: rgb(255,0,0);
     }
</style>

2.对齐文本

CSS text-align属性可以定义文本内容的水平对齐方式

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。

<style>
    h1 {
         /* 本质是让h1盒子里面的文字水平居中对齐 */
    	text-align: center;
    }
</style>

3.装饰文本

CSS text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。

 <style>
     div {
         /* 添加下划线 */
         /* text-decoration: underline; */
         /* 添加删除线 */
         /* text-decoration: line-through; */
         /* 添加上划线 */
         text-decoration: overline;
     }
     a {
         /* 取消链接默认的下划线 */
         text-decoration: none;
     }
</style>

4.文本缩进

CSS text-indent 属性规定文本块中首行文本的缩进。通常是段落的首行缩进。

值	描述
length	定义固定的缩进。默认值：0。
%	定义基于父元素宽度的百分比的缩进。

em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有指定文字大小，则会按照父元素的一个文字大小

<style>
    p {
        /*首行缩进35像素*/
        /*  text-indent: 35px; */
        /*首行缩进两字符*/
       text-indent: 2em;
    }
</style>

PS：允许使用负值。如果使用负值，那么首行会被缩进到左边。

5.行间距

CSS line-height 属性设置行间的距离（行高）。
行高由三部分组成：上间距，文本高度，下间距
改变行高时不会改变文本高度，上间距和下间距相等

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。

<style>
    p {
        line-height: 20px;
    }
</style>

6.单行文字的垂直居中，居上，居下

CSS中没有垂直居中的标签，但是只要让文字行高等于盒子行高就可实现垂直居中的效果，让文字行高小于盒子行高就可实现垂直居上的效果，让文字行高大于盒子行高就可实现垂直居下的效果

7.direction控制文字流向

ltr 从左向右
rtl 从右向左 + unicode-bidi(重写): bidi-override(按照direction的方式进行重写);

direction: rtl;

8.文字大小写

text-transform控制文字大小写

capitalize 所有首字母大写
uppercase 所有字母大写
lowercase 所有字母小写

text-transform: lowercase;

9.字符间距

letter-spacing字符间距

letter-spacing: 0px;

10.字间距

word-spacing 字间距

word-spacing: 0px;

（五）CSS三种引入方式

1.CSS的三种样式表

按照CSS样式书写位置的不同，CSS样式表可分为三类：行内样式表（行内式）、内部样式表（嵌入式）、外部样式表（链接式）

2.内部样式表

内部样式表是写到HTML页面的内部，是将所有的CSS代码抽取出来，单独放到一个style标签中

<style>
    /* 选择器 { 样式 } */
    /* 选择器：给谁改样式 { 样式：改什么样式 } */
    /* 选择器：p 段落 { 样式：字体颜色和大小 } */
    p {
        /* 修改文字的颜色为红色 */
        color: red;
        /* 修改字体大小为20像素 */
        font-size: 20px;
    }
</style>

PS：
1.style标签理论上可以放到HTML文档中的任何一个地方，但是通常会放到head标签中
2.这种方式可以方便控制当前整个页面的元素样式设置
3.代码结构非常清晰，但并没有实现结构与样式的完全分离

3.行内样式表

行内样式表是在元素标签内部的style属性中设定CSS样式，适合修改简单样式

<p style="color: red;font-size: 20px;">乱步老爷子一个很有趣的小短篇</p>

PS：
1.style其实就是元素标签的属性
2.属性值要写在双引号中间，写法要符合CSS规范
3.可以控制当前的标签设置样式
4.书写繁琐没有体现结构与样式分离的思想，不推荐大量使用
5.使用行内样式表设定CSS，通常也被称为行内式引入

4.外部样式表

实际开发中都是使用外部样式表，适合于样式比较多的情况。核心是将样式单独写到CSS文件中，之后把CSS文件引入HTML页面中使用

引入外部样式表
1.新建一个后缀名为.css的文件，把所有的CSS代码都放到此文件中
2.在HTML页面中，使用link标签引入这个文件

<link rel="stylesheet" href="CSS文件路径">

rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

（六）使用chrome调试工具调试样式

chrome浏览器提供了一个非常好用的调试工具，可以用来调试HTML结构和CSS样式

1.打开调试工具

打开chrome浏览器，按下F12键或者右键选择检查

2.使用调试工具

CTRL+鼠标滚轮可以放大开发工具代码大小
左边是HTML元素，右边是CSS样式
右边CSS样式可以改动数值（左右箭头或者直接插入）和查看颜射
CTRL+0复原浏览器大小
如果点击元素，发现右侧没有引入样式，极可能是类名或者样式引入错误
如果由样式错误，但样式前面有黄色的感叹号，则是样式属性书写错误

四、CSS第二天

（一）Emmet语法

Emmet语法的前身是Zen Coding,它使用缩写来提高html/css的编写速度，Vscode内部已经集成该语法

1.快速生成HTML结构语法

1.生成标签，直接输入标签名然后按tab键即可，比如，div然后按tab键，就可生成div标签
2.如果想要生成多个相同标签，输入标签名后 * n即可，比如 div*3，就可生成三个div标签
3.如果有父子级关系，可以用>，比如ul>li
4.如果有兄弟关系，可以用+，比如div+p
5.如果生成带有类名或者id名的直接写.属性值或者#属性值+tab键
6.如果生成的div类名是有顺序的，可以用自增符号$
7.如果想在生成的标签内部写内容可以用{}表示

<!--1. div + tab -->
<div></div>
<!--2. p*3 + tab -->
<p></p>
<p></p>
<p></p>
<!--3. ul>li + tab -->
<ul>
    <li></li>
</ul>
<!--3. tr>td*3 + tab-->
<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>
<!--4. div+p + tab-->
<div></div>
<p></p>
<!--5. p.demo+tab -->
<p class="demo"></p>
<!--5. p#demo+tab -->
<p id="demo"></p>
<!--6. div$*5 + tab-->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
<!--7. div{老八秘制小汉堡} + tab-->
<div>老八秘制小汉堡</div>
<!--7. div{老八秘制小汉堡}*3 + tab-->
<div>老八秘制小汉堡</div>
<div>老八秘制小汉堡</div>
<div>老八秘制小汉堡</div>
<!--7. div{$}*5 + tab-->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

2.快速生成CSS样式语法

在CSS中采用简写的形式即可
1.比如w20 按tab 可以生成 width: 20px
2.比如lh26 按tab 可以生成 line-height: 26px

<style>
    p {
        /* tac + tab */
        text-align: center;
        /* w20 + tab */
        width: 20px;
        /* tdn + tab */
        text-decoration: none;
	}
</style>

3.快速格式化代码

shift+alt+f 快速格式化文档

保存页面时自动格式化代码
1.文件–>首选项–>设置
2.搜索emmet.include;
3.在setting.json下的用户中添加以下语句
“editor.formatOnType”:true,
“editor.formatOnSave”:true

（二）CSS的复合选择器

1.复合选择器简介

在CSS中，可以根据选择器类型分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的，常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器等

复合选择器可以更加准确、更加高效的选择目标元素（标签）
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

2.后代选择器

后代选择器又称为包含选择器，可以选择父元素里的子元素，其写法就是把外层标签写在前，内层标签写在后，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代

父元素 子元素 {
	属性1: 属性值1;
	属性2: 属性值2;
	...
}

<style>
    /* 要把ol里的li选择出来改为红色 */
    ol li {
        color: red;
    }

    ol li a {
        color: red;
    }

    .nav li a {
        color: yellow;
    }
</style>

PS：
1.父元素与子元素之间要用空格隔开
2.后代选择器最终是给子元素做样式修改
3.子代不限与时儿子，也可以是孙子
4.父元素和子元素可以是任意的基础选择器

3.子选择器

子元素选择器（子选择器）只能选择作为某一元素的最近一级子元素，简单理解就是只能选择亲儿子元素

父元素>子元素 {
    属性1: 属性值1;
    属性2: 属性值2;
    ...
}

<style>
    div>a {
        color: red;
    }
</style>

PS：
1.父元素与子元素之间要用>隔开
2.子元素选择器只能选择最近一级的子元素，不能选择其他后代

4.并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明，通俗理解就是元素1和元素2一起改变样式

并集选择器是各选择器通过英文的逗号链接而成，任何形式的选择器都可以作为并集选择器的一部分

元素1,
元素2 {
    属性1: 属性值1;
    属性2: 属性值2;
    ...
}

<style>
    /* 要求1：将熊大和熊二改成红色 */
    /* 
    div,
    p {
    color: red;
    } 
    */
    /* 要求2：将熊大和熊二改成绿色，并将沈阳大街团队改为绿色 */
    div,
    p,
    ul li {
        color: green;
    }
</style>

PS：
1.并集选择器要竖着写
2.最后一个选择器不用加逗号

5.伪类选择器

伪类选择器用于向某些选择器添加特殊效果，比如给链接添加特殊效果，或者选择第一个元素，第n个元素
伪类选择器的书写特点是用：表示，比如：hover、：first-child
常见的伪类选择器有链接伪类、结构伪类等

6.链接伪类选择器

a:link    {color:blue;}		/*选择未被访问的链接*/
a:visited {color:blue;}		/*选择已被访问的链接*/
a:hover   {color:red;}		/*选择鼠标指针位于其上的链接*/
a:active  {color:yellow;}	/*选择活动链接（鼠标按下未抬起的链接）*/

<style>
    /*选择未被访问的链接*/
    a:link {
        color: blue;
        text-decoration: none;
    }
    /*选择已被访问的链接*/
    a:visited {
        color: green;
    }
    /*选择鼠标指针位于其上的链接*/
    a:hover {
        color: red;
    }
    /*选择活动链接（鼠标按下未抬起的链接）*/
    a:active {
        color: yellow;
    }
</style>

PS：
1.为确保生效，要按照LVHA顺序声明 link visited hover active
2.因为a链接在浏览器中有默认的样式，所以都需要给链接单独指定样式
3.实际开发中的写法

<style>
    /*选择未被访问的链接*/
    a:link {
        color: blue;
        text-decoration: none;
    }
    /*选择鼠标指针位于其上的链接*/
    a:hover {
        color: red;
        text-decoration: underline;
    }
</style>

7.focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况下类表单标签才能获取，因此这个选择器也要针对于表单元素来说的

<style>
    input:focus {
        backgroud-color: yellow;
    }
</style>

8.交集选择器

交集选择器既…又…

标签名类名 {
    属性1: 属性值1;
    属性2: 属性值2;
    ...
}

注意：如果有标签选择器，则将标签选择器放在第一个

div.demo {
    color: aqua;
}
/*既是div标签，又有demo这个类名*/

9.兄弟选择器

兄弟选择器：

+：会选择下一个相邻的兄弟

元素1+元素2 {
     属性:属性值
 }

.bro+div {
    color: red;
}

~：会选择下面所有同名的兄弟

元素1~元素2 {
	属性:属性值
}

.bro~.bro2 {
    color: pink;
}

（三）CSS的元素显示模式

1.元素显示模式简介

作用：了解元素的特点可以更好的布局页面
元素显示模式就是元素（标签）以什么方式进行显示，比如div自己占用一行，一行可以放多个span
HTML元素一般可以分为块元素和行内元素两种

2.元素显示模式分类

1）块元素

常见的块元素有 h1~h6、p、div、ul、ol、li等，其中div就是最经典的块元素

<style>
    div {
        width: 500px;
        height: 100px;
        background-color: pink;
        text-align: center;
        border: 2px dotted;
        border-color: red;
    }
</style>

块元素的特点：
1.独占一行
2.宽度、高度、外边框、内边框都可以自定义
3.宽度默认是容器（父级元素）的100%
4.是一个容器即盒子，里面可以放行内或者块级元素

PS：文字类（p标签、h1~h6标签等)的元素内不能使用块级元素

2）行内元素

常见的块元素有 a、strong、b、em、i、del、s、ins、u、span等，其中span就是最经典的行内元素（内联元素）

行内元素的特点：
1.一行可显示多个元素
2.宽度、高度都不可以自定义
3.宽度默认是它本身内容的宽度
4.行内元素只能容纳文本或其他行内元素

PS：
1.a 链接里面不能再放链接
2.特殊情况链接a里面可以放块级元素，但是给a转换一下块级模式是最安全的

3）行内块元素

在行内元素中有几个特殊的标签——img、input、td，他们同时具有块元素和行内元素的特点

行内块元素的特点：
1.和相邻元素显示在一行上，但是它们之间会有空白间隙，一行可以显示多个
2.默认宽度就是它本身的内容的宽度
3.高度、宽度、行高、外边距都可以自定义

3.元素显示模式的转换

特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另一种模式特性，比如想要增加链接a的触发范围

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

<style>
    a {
        width: 150px;
        height: 30px;
        background-color: pink;
        color: black;
        text-decoration: none;
        /* 将行内元素转换为块元素 */
        display: block;
    }

    div {
        width: 150px;
        height: 30px;
        background-color: pink;
        /* 将块级元素转换为行内元素 */
        display: inline;
    }

    span {
        width: 150px;
        height: 30px;
        background-color: pink;
         /* 将块级元素转换为行内块元素 */
        display: inline-block;
    }
</style>

（四）CSS的背景

1.背景颜色

background-color属性定义了元素的背景颜色

<style>
    div {
        width: 500px;
        height: 500px;
        /* background-color: transparent;透明的 */
        background-color: red;
    }
</style>

2.背景图片

background-image属性定义了元素的背景图片，实际开发中常见于logo或者一些装饰性的一些小图片，或者是大的背景图片，优点是非常便于控制图片的位置

<style>
    div {
        width: 1500px;
        height: 800px;
        /* 没有背景图片 */
        /* background-image: none; */
        /* 不要忘记url() */
        background-image: url(/AnniEiffel.jpg);
    }
</style>

3.背景平铺

如果想在HTML页面上对背景图片进行平铺，可以使用background-repeat属性

值	描述
repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像将仅显示一次。

<style>
    div {
        width: 800px;
        height: 400px;
        background-image: url(/二维码.png);
        /* 平铺 */
        /* background-repeat: repeat; */
        /* 不平铺 */
        /* background-repeat: no-repeat; */
        /* 沿X轴平铺 */
        /* background-repeat: repeat-x; */
        /* 沿Y轴平铺 */
        background-repeat: repeat-y;
    }
</style>

PS：页面元素既可以添加背景颜色，也可以添加背景图片，背景颜色在最底层

4.背景图片的位置

如果想改变HTML页面上对背景图片的位置，可以使用background-position属性

background-position: x y;

值	描述
top lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerbottom right	如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。
x% y%	第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。
xpos ypos	第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。

1）参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top和top left效果一致
如果只有一个方位名词，则第二个默认是居中

<style>
    div {
        width: 800px;
        height: 400px;
        background-color: pink;
        background-repeat: no-repeat;
        background-image: url(/皇冠.jpg);
        /* 居中向上 */
        /* background-position: center top; */
        /* 居左向下 */
        /* background-position: left bottom; */
        /* 省略一个方位名词，左侧居中 */
        /* background-position: left; */
    }
</style>

2）参数是精确单位

如果参数值是精确单位，第一个一定是x坐标，第二个一定是y坐标
如果只有一个精确单位，则第二个默认是居中

<style>
    div {
        width: 800px;
        height: 400px;
        background-color: pink;
        background-repeat: no-repeat;
        background-image: url(/皇冠.jpg);
        background-position: 20px 50px;
    }
</style>

3）参数是混合单位

如果参数值是精确单位和方位名词混合使用，第一个值是x坐标，第二个值是y坐标

<style>
    div {
        width: 800px;
        height: 400px;
        background-color: pink;
        background-repeat: no-repeat;
        background-image: url(/皇冠.jpg);
        /* x轴20距离，垂直居中 */
        /* background-position: 20px center; */
        /* x轴居中，垂直20距离 */
        /* background-position: center 20px; */
    }
</style>

5.背景图片固定

如果想固定图片使之不随页面滚动可以使用background-attachment属性

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。

<style>
    body {
        width: 1800px;
        height: 2400px;
        background-image: url(/皇冠.jpg);
        background-repeat: no-repeat;
        background-color: pink;
        /* 背景图片滚动 */
        /* background-attachment: scroll; */
        /* 背景图片固定 */
        background-attachment: fixed;
    }
</style>

6.背景图片复合写法

为简化背景属性的代码，可以使用背景属性复合写在background中
规定顺序 background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置
使用background复合属性时，各属性间以空格隔开

background: pink url(/皇冠.jpg) no-repeat fixed left center;

7.背景色半透明

CSS3提供了背景色半透明的效果，通过background：rgba(0,0,alpha)来设置,alpha是透明度

background: rgba(0, 0, 0, 0.5);

PS：
1.我们习惯将alpha属性的0省略，直接写.x
2.背景半透明盒子不影响里面的内容
3.CSS3新增属性，只有IE9以上的版本才支持

（五）CSS的三大特性

1.层叠性

给相同选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，主要解决了冲突的问题
样式冲突，层叠性遵循就近原则，哪个样式离结构与近，就执行哪个样式。样式不冲突，不会层叠

<style>
    div{
        /*颜色冲突，颜色会被覆盖，最终为红色*/
        color:pink;
        /*字体大小没有冲突，不会被覆盖，仍被设置为20px*/
        font-size:20px;
    }
    div{
        color:red
    }
</style>

2.继承性

CSS中子标签会继承父标签的某些样式（主要是文字的属性，不是所有样式），如文本颜色，字号等，恰当的使用继承会简化代码

行高的继承

body{
font:12px/1.5 'Microsoft YaHei';
}

行高可以跟单位也可以不跟单位，不带单位时，表示子元素行高为当前字体大小的倍数，例如，1.5，即文字大小的1.5倍

3.优先级

当同一个元素指定多个选择器，就会产生优先级

如果选择器相同则为层叠性
如果选择器不同，则根据选择器的权重执行

选择器	选择器权重
继承， *	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
id选择器	0，1，0，0
行内样式style=“”	1，0，0，0
！important	无穷大

<style>
    div{
        /*!important最高权重*/
        color: #fff !important;
    }
</style>

PS：
1.权重是由4组数字组成，但是不会有进位
2.类选择器永远大于元素选择器，id选择器永远大与类选择器
3.继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0
4.a标签浏览器默认指定了一个样式，所以不会继承父元素样式

复合选择器权重叠加

如果是复合选择器，则会有权重叠加，需要计算权重

<style>
     /*权重li=0,0,0,1*/
    li{
        color: #000;
    }
    /*权重计算ul+li=0,0,0,1+0,0,0,1=0,0,0,2*/
    ul li{
        color: #fff ;
    }
    /*权重计算.nav+li=0,0,1,0+0,0,0,1=0,0,1,1*/
    .nav li{
        color: red;
    }
</style>

（六）CSS的注释

/* 注释*/

五、CSS盒子模型

（一）盒子模型

网页布局三大核心：盒子模型，浮动和定位

1.网页布局的本质

1）.先准备相关元素，网页元素基本都是盒子
2）.设置CSS盒子样式，然后摆放到相应位置
3）.往盒子里面填内容

2.盒子模型的组成

盒子模型：就是把HTML页面中的布局元素看作是一个矩形盒子，也就是盛放内容的容器
CSS盒子模型本质上就是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xdtijm6p-1659520525074)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220410160229599.png)]

3.边框（border）

border可以设置元素的边框，边框由三部分组成：边框宽度（粗细），边框样式，边框颜色

值	描述
border-width	规定边框的宽度。
border-style	规定边框的样式。
border-color	规定边框的颜色。

<style>
div {
    widows: 500px;
    height: 300px;
    background-color: rgb(225, 108, 178);
    /* border-width设置边框粗细 */
    border-width: 5px;
    /* border-style 设置边框样式为实线 */
    /* border-style: solid; */
    /* border-style 设置边框样式为虚线 */
    /* border-style: dashed; */
    /* border-style 设置边框样式为点状 */
    border-style: dotted;
    /* border-color 设置边框颜色为蓝色 */
    border-color: blue;
}
</style>

1）属性设置复合写法

border：宽度样式颜色；

border:10px solid red;

2）单独设置某一条边

边的位置：top、bottom、left、right

border-边位：宽度样式颜色；

/* 上边框 */
border-top: 20px solid red;
/* 下边框 */
border-bottom: 20px solid red;
/* 左边框 */
border-left: 20px solid red;
/* 右边框 */
border-right: 20px solid red;

3）表格的细线边框

border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是像在标准的 HTML 中那样分开显示。

值	描述
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

<style>
	table,
    th,			
    td {
        border: 1px solid red;
        /* 相邻边框会合并为一个单一的边框 */
        border-collapse: collapse;
    }
</style>

4）边框会影响盒子实际大小

边框会额外增加盒子的实际大小

解决方法：
1）测量盒子时，不测量边框
2）如果测量的时候加上了边框，则需要减去width和height的边框宽度

4.内边距（padding）

padding属性用于设置内边距，即边框与内容之间的距离

属性	作用
padding-top	上内边距
padding-bottom	下内边距
padding-left	左内边距
padding-right	右内边距

值	描述
auto	浏览器计算内边距。
length	规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。
%	规定基于父元素的宽度的百分比的内边距。

div {
    width: 200px;
    height: 200px;
    background-color: rgba(122, 215, 9, 0.315);
    border: 10px solid rgb(14, 6, 245);
    /* 左边距20px */
    padding-left: 20px;
    /* 上边距20px */
    padding-top: 20px;
}

1）内边距复合写法

padding属性可以有1-4个值

值的个数	含义
padding:5px	1个值，代表上下左右都有5px的内边距
padding:5px 10px	2个值，代表上下5x、左右10px的内边距
padding:5px 10px 20px	3个值，代表上5px、左右10px、下20px
padding:5px 10px 20px 30px	4个值，代表上5px、右10px、下20px、左30px

/* 代表上下左右都有5px的内边距 */
/* padding: 5px; */
/* 代表上下5x、左右10px的内边距 */
/* padding: 5px 10px; */
/* 代表上5px、左右10px、下20px */
/* padding: 5px 10px 20px; */
/* 代表上5px、右10px、下20px、左30px */
/* padding: 5px 10px 20px 30px; */

2）内边距会影响盒子实际大小

内边距会额外增加盒子的实际大小，解决方法需要减去width和height的内边距宽度

3）让内边距不会影响盒子实际大小

如过让盒子本身没有指定width和height属性，则此时padding不会撑开盒子大小

<head>
<style>
    h1 {
        height: 200px;
        background-color: pink;
        padding: 30px;
    }

    div {
        width: 300px;
        height: 100px;
        background-color: blue;
    }

    p {
        padding: 30px;
        background-color: brown;
    }
</style>
</head>

<body>
    <h1></h1>
    <div>
        <p></p>
    </div>
</body>

5.外边距（margin）

margin属性用于设置外边距，即控制盒子与盒子之间的距离

属性	作用
margin-top	上内边距
margin-bottom	下内边距
margin-left	左内边距
margin-right	右内边距

值	描述
auto	浏览器计算外边距。
length	规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
%	以包含元素宽度的百分比指定外边距。

1）外边距复合写法

与padding复合写法一致

值的个数	含义
margin:5px	1个值，代表上下左右都有5px的外边距
margin:5px 10px	2个值，代表上下5x、左右10px的外边距
margin:5px 10px 20px	3个值，代表上5px、左右10px、下20px
margin:5px 10px 20px 30px	4个值，代表上5px、右10px、下20px、左30px

2）外边距应用

外边距可以让块级盒子水平居中，但是必须满足两个条件：
1.盒子必须指定宽度
2.盒子的左右外边距设置为auto即可

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

行内元素或者行内块元素水平居中给其父元素添加text-align:center即可

3）外边距合并

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

上下相邻的两个块元素（兄弟关系）相遇时，上面块元素有下外边距margin-bottom，下面块元素有上边距margin-top，则它们的垂直边距不是margin-bottom与margin-top之和，而是取两个之中较大的那一个为垂直边距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N0v4yzCh-1659520525075)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220410222846152.png)]

嵌套块元素垂直外边距塌陷：

对于两个嵌套的块元素，父元素有上边距，同时子元素也有上边距，此时父元素会塌陷较大的外边距（父元素的外边距取较大的一个）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MXoST6L9-1659520525075)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220410223933043.png)]

解决方案：
1.可以为父元素定义上边框
2.可以为父元素定义上内边框
3.可以为父元素添加overflow:hidden
其他方法：浮动，定位，绝对定位等

PS：浮动的盒子不会有外边距塌陷的问题

6.清除内外边距

网页元素很多都有默认的内外边距，而且不同浏览器的默认的也不一样，因此我们在布局之前，首先要清除网页元素的内外边距

PS：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级元素和行内块元素就可以啦

（二）PS基本操作

CTRL+ R 或者视图>标尺调出标尺
右击标尺，将单位改为像素
CTRL+ + 放大视图
CTRL+ - 缩小视图
按住空格，鼠标变成小手，可以拖动视图
用选区拖动，可以测量大小
CTRL+ D 可以取消选区，或则是点击旁边的空白
吸管工具可以吸取颜色

（三）圆角边框

border-radius属性设置元素的圆角边框
圆与边框交集形成圆角效果，radius——半径
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GyRtlVXp-1659520525076)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220411171310275.png)]

值	描述
length	定义圆角的形状。
%	以百分比定义圆角的形状。

div {
            width: 300px;
            height: 150px;
            background-color: red;
            border-radius: 25px;
        }

1）圆形

当盒子为正方形时，圆角边框半径设置为边长的一半即可

.yuan {
    width: 200px;
    height: 200px;
    background-color: rgb(255, 0, 0);
    /* border-radius: 50px; */
    /* 也可以用百分比来表示半径为宽度和高度的50%，更加方便 */
    border-radius: 50%;
}

2）圆边矩形

.yb {
    width: 400px;
    height: 100px;
    background-color: rgb(255, 0, 0);
    /* 半径为宽度的一半 */
    border-radius: 50px;
}

3）圆角矩形

.yj {
    width: 400px;
    height: 100px;
    background-color: rgb(255, 0, 0);
    /* 半径小于宽度的一半 */
    border-radius: 30px;
}

4）椭圆

.ty {
    width: 400px;
    height: 100px;
    background-color: rgb(255, 0, 0);
    /* 不能小于50% */
    border-radius: 50%;
}

5）复合属性简写

该属性是可以跟两个值的，分别为左上右下，右上左下对角线
该属性是可以跟三个值的，分别为左上、右上左下、右下
该属性是可以跟四个值的，分别为左上、右上、右下、左下

.dd {
    width: 400px;
    height: 100px;
    background-color: rgb(255, 0, 0);
    /* border-radius: 左上右下、右上左下 */
    /* border-radius: 10px 40px; */
    /* border-radius: 左上、右上左下、右下 */
    /* border-radius: 10px 20px 30px; */
    /* border-radius: 左上、右上、右下、左下 */
    /* border-radius: 10px 20px 30px 40px; */
}

6）单独设置一个角

border-top-left-radius:2px;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
border-bottom-left-radius:2px;

（四）盒子阴影

box-shadow 属性向框添加一个或多个阴影。

box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离，影子模糊虚实。
spread	可选。阴影的尺寸，影子模糊大小。
color	可选。阴影的颜色。常用透明度
inset	可选。将外部阴影 (outset) 改为内部阴影。内部阴影和外部阴影用逗号隔开

div {
    width: 200px;
    height: 200px;
    background-color: #f00;
    box-shadow: 10px 10px 10px 5px rgba(0, 0, 0, 0.3);
}

PS：
1.outset为默认值，不能写在属性中
2.盒子阴影不会占用盒子的大小，不会影响其他盒子的排列

（五）文字阴影

text-shadow 属性向文本设置阴影

text-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。参阅 CSS 颜色值。

div {
    width: 400px;
    height: 200px;
    background-color: pink;
    font-size: 40px;
    line-height: 200px;
    text-shadow: 5px 5px 5px #FF0000;
}

六、CSS浮动

（一）浮动

1.传统网页布局的三种方式

传统网页布局的三种方式：普通流（标准流）、浮动、定位，实际开发中一个页面基本上都包含了这三种布局方式

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

2.标准流

标准流：标签按照规定好的默认方式排列，是最标准的布局方式

块级元素独占一行，从上到下顺序排列
常用元素：div、hr、p、h1~h6、ul、ol、dl、li、form、table

行内元素会按照顺序从左到右顺序排列，碰到父元素边缘会自动换行
常见元素：span、a、i、em等

3.为什么需要浮动

很多的布局效果，标准流没有办法完成，浮动可以改变默认的排列方式
经典应用：可以让多个元素一行内排列显示

4.什么是浮动

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或者另一个浮动框的边缘。float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。

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

.d2 {
    float: right;
    width: 200px;
    height: 200px;
    background-color: pink;
}

5.浮动的特性

1）浮动的特性——脱标：

1.脱离标准流的控制（浮），移动到指定的位置（动）
2.浮动的盒子不在保留原先的位置

2）浮动的特性——一行显示

1.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示，并且顶端对齐排列
2.浮动的元素互相不会有空隙，如果父级元素装不下这些浮动的盒子，则会另起一行对齐

3）浮动元素行内块元素特性

1.任何元素都可以浮动，不管原先是什么模式的元素，添加浮动后具有行内块元素相似的特性
2.如果行内元素有了浮动，则不需要转换为块级/行内块元素就可以直接给高度和宽度
3.如果块级元素没有设置宽度，默认宽度和父级元素一样宽，但是添加浮动后，宽度大小有内容决定
4.浮动的盒子中间是没有缝隙的
5.行内元素同理

4)浮动元素经常和标准流父级搭配使用

为约束元素的位置，网页布局一般采取的策略是：先用标准流的父级元素排列上下位置，然后内部子元素采取浮动排列左右位置

（二）常见网页布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8TT1puqW-1659520525076)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220413143017211.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qCMrj0kt-1659520525077)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220413143037030.png)]

浮动布局的注意点：

1.浮动和标准流的父盒子搭配
先用标准流的父元素竖直排列，然后再将内部子元素采用浮动排列左右对齐

2.一个元素浮动，理论上其他兄弟元素也要浮动
一个大盒子里有多个子元素，其中一个子元素浮动，那么其他子元素也应浮动
浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

（三）清除浮动

1.为什么要清除浮动？

理想中的状态：父盒子不给高度，让子盒子撑开父盒子
但是，由于父盒子在很多情况下不方便给高度，但是盒子浮动又不占有位置，最后父盒子高度为0，会影响下面的标准流盒子[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-stOn8LeJ-1659520525077)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220413150011295.png)]
由于浮动元素不再占有原文档流的位置，所以会对后面的元素排版产生影响，所以要清除浮动

清除浮动的条件：
1.父元素没有高度
2.子盒子浮动
3.影响下面的布局

2.清除浮动的本质

清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动后，父级元素就会根据子盒子自动检测高度，父级有了高度，就不会影响下面的标准流啦

3.清除浮动

clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。最常用
none	默认值。允许浮动元素出现在两侧。

清除浮动的策略为闭合浮动

4.清除浮动的方法

1）额外标签法

额外标签法也称为隔墙法，是W3C推荐的做法
额外标签法会在最后一个浮动元素后面添加一个空的标签。例如：

<div class="d1"></div>	/* 浮动 */
<div class="d2"></div>	/* 浮动 */
<div class="d3"></div>	/* 浮动 */
<div class="clear"></div>	/* 空标签 */

优点：通俗易懂，书写方便
缺点：添加许多无意义的标签，结构化比较差

PS：要求新添加的元素必须是块级元素

2）给父元素添加overflow属性

overflow 属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

优点：代码简洁
缺点：无法显示溢出的部分

3）给父元素添加:after属性

:after方式是额外标签的升级版。也是给父元素添加

<style>
    .clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    *zoom: 1;
}
.box {
    background-color: blue;
}
</style>
<body>
    <div class="box clearfix">
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>
    </div>
</body>

4）给父级元素添加双伪元素

<style>.clearfix::before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix::after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }
</style>
<body>
    <div class="box clearfix">
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>
    </div>
</body>

（四）PS切图

1.常见照片格式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7hLwxjK1-1659520525078)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220413160112880.png)]

2.图层切图

单个图层：选中图层，右键选择“快速导出为"PNG"
多个图层：选中多个图层，然后按CTRL+e合并图层，右键选择“快速导出为"PNG"

3. 切片切图

首先利用切片工具选中要切片的范围，然后选择文件菜单里面的导出，选择图片的格式，点击存储，切片选项选择：选中的切片，然后保存即可
如果保存没有背景图片的图像，把图层中取消背景图层的显示即可

4.PS插件切图

利用Cutterman插件进行切图，能够自动将你需要的图层进行输出

网站：http://www.cutterman.cn/zh/cutterman
PS：Cutterman插件要求安装的PS必须是完整版的

（五）学成在线案例

1）CSS 书写顺序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7EV7PRBi-1659520525078)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220415130646825.png)]

2）页面布局的整体思路

1.确定页面的版心（可视区），测量可知
2.分析页面的行模块，以及每个行模块中的列模块，页面布局第一准则
3.一行中的列模块经常浮动布局，先确定每个列的大小，之后在确定列的位置，页面布局第二准则
4.搭建HTML结构，遵循现有结构后有样式的原则

3）导航栏注意事项

在实际开发中，导航栏使用的是li包含a，而不是直接用a
原因：
1.li+a语义更加清晰
2.直接用a。搜索引擎容易辨别为有堆砌关键字的嫌疑，有容易被搜索引擎降权的风险，从而影响网站排名

PS：
1.让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示
2.导航栏可以不给宽度，将来可以添加其他文字
3.因为导航栏里的元素文字不一样多，所以最好给链接a左右padding值来撑开盒子，而不是指定宽度

七、CSS定位

（一）定位

1.为什么需要定位？

1）某个元素可以自由的在一个盒子内部移动位置，并且压住其他盒子
2）当滚动窗口的时候，盒子想要固定屏幕的某个位置

浮动可以让多个块级盒子一行显示没有缝隙的排列显示，经常用于横向排列盒子
定位则可以让盒子自由的在某个盒子的内部移动位置或者是固定屏幕中的某个位置，并且可以压住其他盒子

2.定位的组成

定位：将盒子固定到某一位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。由定位模式和边偏移来进行定位

定位模式：指定元素在文档中的定位方式
边偏移：决定了该元素的最终位置

1）定位模式

定位模式决定元素的定位方式，它通过CSS的position属性来设置

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）

2）边偏移

边偏移就是定位的盒子移动到最终的位置，有top、bottom、left和right 4个属性

属性	示例	描述
top	top:80px	顶部偏移量，设置定位框的顶部外边距边缘。
bottom	bottom:80px	底部偏移量，设置定位框的底部外边距边缘。
left	left:80px	左部偏移量，设置定位框的左侧外边距边缘。
right	right:80px	右部偏移量，设置定位框的右侧外边距边缘。
clip		剪裁绝对定位的元素。
z-index		设置元素的堆叠顺序。

3.静态定位 static

静态定位是元素的默认定位方式，无定位的意思

选择器 { position : static }；

静态定位按照标准流特性摆放位置，它没有边偏移
静态定位在布局时很少用到

4.相对定位 relative

相对定位是元素在移动位置时，相对于它原来的位置来说的

特点：
1.它是相对于原来的位置来移动的移动位置的时候参考自己原来的位置）
2.原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来的位置，其他元素位置不会改变）

.d1 {
    width: 300px;
    height: 300px;
    background-color: pink;
    position: relative;
    top: 100px;
    left: 320px;
}

5绝对定位 absolute

绝对定位是元素在移动位置的时候，相对于它的祖先来说的

特点：
1.如果没有祖先元素或则是祖先元素没有定位，则以浏览器为准定位
2.如果父元素有定位（相对、绝对、固定），则以最近一级的有定位祖先元素为参考移动位置。
3.绝对定位不再占有原先的位置（脱标）

6.子绝父相的由来

子绝父相：如果子级使用绝对定位，则父级使用相对定位
1）子级绝对定位，不会占有位置，可以放到父盒子里的任何一个地方，不会影响其他兄弟盒子
2）父盒子需要加定位限制子盒子在父盒子内显示
3）父盒子布局时，需要占有位置，因此父亲只能是相对定位

父级需要占有位置，因此是相对定位，子级不需要占有位置，因此是绝对定位

当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到

7.固定定位 fixed

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器上固定，不随页面滚动而改变位置

特点：
1.以浏览器的可视窗口为参照点移动元素，位置与父元素无关，不随滚动条的滚动而滚动
2.固定定位不占有原来的位置，固定定位也是脱标的，可以看作是一种特殊的绝对定位

固定定位小技巧：固定在版心右侧位置
1.让固定定位的盒子left：50%，走到浏览器可视区域的一半的位置
2.让固定定位的盒子margin-left:版心宽度一半的距离。多走版心宽度一半的位置

8.粘性定位 sticky

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

特点：
1.以浏览器的可视窗口为参照点移动元素（固定定位特点）
2.粘性定位是占有原先的位置的（相对定位的特点）
3.必须添加top、left、right、bottom其中一个才有效

9.定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况，此时，可以使用z-index来控制盒子的前后顺序（Z轴）

值	描述
auto	默认。堆叠顺序与父元素相等。
number	设置元素的堆叠顺序。

PS：
1.数值可以是正数、负数、0，默认是auto，数值越大，盒子越往上
2.如果属性值相同，则按照书写的顺序，后来者居上
3.数字后面不能加单位
4.只有定位的盒子才有z-index属性

10.定位的扩展

1）绝对定位盒子居中

加了绝对定位的盒子不能通过margin:0 auto;来进行水平居中，但是可以通过以下计算方法是现实水平和垂直居中

/* 水平居中 */
/* left走50% ————父元素宽度的一半 */
left: 50%;
/* margin-left 负值 往左走走子元素的一半 */
margin-left: -250px;

/* 垂直居中 */
/* /* top走50% ————父元素宽度的一半 */
top: 50%;
/* margin-top 负值 往左走走子元素的一半 */
margin-top: -150px;

2）定位特性

1.行内元素添加绝对或固定定位，可以直接设置高度和宽度
2.块级元素添加绝对或固定定位，如果不给宽度或者高度，默认大小是内容大小

3）脱标的盒子不会触发外边距塌陷

浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题

4）绝对定位（固定定位）会完全压住盒子

1.浮动元素只会压住下面标准流盒子，但是不会压住下面标准流盒子的文字（图片）。浮动之所以不会压住文字，是因为浮动产生的最初目的是做文字环绕效果，文字会环绕浮动元素。
2.但是绝对定位（固定定位）会完全压住盒子包括文字（图片）

（二）网页布局总结

1.标准流

可以让盒子上下排列或者左右排列，垂直块级盒子显示就用标准流

2.浮动

可以让多个块级盒子在一行上显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局

3.定位

定位最大的特点是有层叠的概念，就是可以让多个盒子前后层叠来显示，如果元素在某个各自内移动就用定位布局

（三）元素的显示与隐藏

1.display属性

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

值	描述
none	此元素不会被显示。隐藏元素。
block	此元素将显示为块级元素，此元素前后会带有换行符。显示元素。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）

PS：display隐藏元素后，不在占有原来的位置

2.visibility

visibility 属性规定元素是否可见。

值	描述
visible	默认值。元素是可见的。
hidden	元素是不可见的。

PS：visibility 隐藏元素后，也会占据页面上的空间。

3.overflow

overflow 属性规定当内容溢出元素框时发生的事情。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jem1FLEt-1659520525079)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220418175158850.png)]

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

.d1 {
    /* 隐藏溢出元素 */
    /* overflow: hidden; */
    /* 不论是否溢出，都添加显示滚动条*/
    /* overflow: scroll; */
    /* 溢出时为元素显示滚动条 */
    overflow: auto;
    width: 200px;
    height: 200px;
    background-color: #f00;
    margin: 100px auto;
}

八、CSS高级属性

（一）精灵图

1.为什么要使用精灵图

为了有效减少服务器接收和发送请求的次数，提高页面加载速度，出现了CSS精灵技术（CSS Sprites、CSS 雪碧）
核心原理：将网页中的一些小背景图片整合到一张大图中，这样服务器只需要一次请求就可以啦

2.精灵图的使用

使用核心：
1.精灵技术主要针对背景图片使用，就是把多个小背景图片整合到一张大图片中。这个大的图片称为Sprites 精灵图或者雪碧图
2.移动背景图片位置 background-position
3.一般情况下精灵图都是负值（X轴右边走的是正值，左边走的是负值，Y轴上边走的是正值，下边走的是负值，）

div {
    width: 236px;
    height: 128px;
    margin: 100px auto;
    background-image: url(/img/王者荣耀精灵图.png);
    background-position: 0 -220px;
}

3.精灵图的缺点

1）文件较大
2）图片失真
3）更换复杂

（二）字体图标

1.字体图标简介

iconfont字体图标，展示的是图标，本质是字体

2.字体图标的优点

1）轻量级：一个图标字体比一系列的图像要小。一旦字体加载，图标就会马上渲染出来，减少了服务器请求
2）灵活性：本质是文字，可以随意的改变颜色、产生阴影、透明效果、旋转等
3）兼容性：几乎支持所有的浏览器

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

3.字体图标的下载

icomoon字体库：http://icomoon.io
阿里iconfont字体库：http://www.iconfont.cn

4.字体图标的引入

1）把下载包里面的fonts文件夹放入页面文件夹的更目录中
2）在CSS样式中全局声明字体

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-59ESttqj-1659520525079)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220419222518808.png)]

3）HTML标签添加小图标

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QnKO2GeC-1659520525079)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220419222712906.png)]

4）声明字体样式

span{
    font-family: 'icomoon';
    font-size:100px;
    color:pink
}

5.字体图标的追加

在工作中，如果原来的字体图标不够用，需要添加新的字体图标到原来的字体文件夹中

方法：把压缩包里面的selection.json重新上传，然后选中自己想要的新图标，重新下载压缩包，并且替换原来的文件即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NKMb8l5t-1659520525080)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220419223557190.png)]

（三）CSS三角

1.设置盒子的宽高为都为0
2.若想要设置向下的三角，则把上边框设置颜色
3.其余边框为透明色（transparent）

.box2 {
    width: 0;
    height: 0;
    border: 10px solid transparent;/*边框为透明色*/
    border-top: 10px solid pink;/*上边框设置颜色*/
    margin: 10px;
}

（四）CSS用户界面样式

1.鼠标样式 cursor

值	描述
url	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标。
crosshair	光标呈现为十字线。
pointer	光标呈现为指示链接的指针（一只手）
move	此光标指示某对象可被移动。
e-resize	此光标指示矩形框的边缘可被向右（东）移动。
ne-resize	此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize	此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize	此光标指示矩形框的边缘可被向上（北）移动。
se-resize	此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize	此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize	此光标指示矩形框的边缘可被向下移动（南）。
w-resize	此光标指示矩形框的边缘可被向左移动（西）。
text	此光标指示文本。
wait	此光标指示程序正忙（通常是一只表或沙漏）。
help	此光标指示可用的帮助（通常是一个问号或一个气球）。

<ul>
    <li style="cursor: default;">鼠标默认样式</li>
    <li style="cursor: pointer;">鼠标小手样式</li>
    <li style="cursor: move;">鼠标移动样式</li>
    <li style="cursor:text ;">鼠标文本样式</li>
    <li style="cursor: not-allowed;">我是鼠标禁止样式</li>
</ul>

2.表单的轮廓线 outline

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

值	描述
outline-color	规定边框的颜色。
outline-style	规定边框的样式。
outline-width	规定边框的宽度。

input {
    /* 消除轮廓线 */
    outline: none;
}

3.防止文本域拖拽 resize

textarea {
    resize: none;
}

（五）vertical-align属性应用

vertical-align 属性设置元素的垂直对齐方式。只针对行内元素和行内块元素有效

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ch2NPo8E-1659520525080)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220421144146700.png)]

1）图片与文字的位置

img,
textarea {
    /* 上端对齐 */
    /* vertical-align: top; */
    /* 居中对齐 */
    /* vertical-align: middle; */
    /* 下端对齐 */
    vertical-align: bottom;
}

2）解决图片底部默认空白缝隙的问题

图片与边框默认基线对齐，所以存在一定空隙
解决方法：
1.给图片添加vertical-align：middle | top | bottom等
2.把图片转换为块级元素 display：block;

div {
    border: 2px solid red;
}
/* 图片与边框默认基线对齐，所以存在一定空隙， */
/* 解决方法1 */
/* img {
vertical-align: bottom;
} */

/* 解决方法2 */
img {
    display: block;
}

（六）溢出文字省略号显示

1.单行文本溢出显示省略号

步骤：
1）强制一行内显示文本 white-space：nowrap; (nowrap不换行)
2）超出部分隐藏 overflow：hidden；
3）文字省略号代替超出部分 text-overflow:ellipsis;

div {
    width: 150px;
    height: 80px;
    background-color: pink;
    margin: 100px auto;
    /* 强制一行显示 */
    white-space: nowrap;
    /* 溢出文字隐藏 */
    overflow: hidden;
    /* 单行溢出文字显示省略号 */
    text-overflow: ellipsis;
}

2.多行文本溢出显示省略号

div {
    width: 120px;
    height: 80px;
    background-color: pink;
    margin: 100px auto;
    white-space: normal;
    /* 溢出文字隐藏 */
    overflow: hidden;
    /* 单行溢出文字显示省略号 */
    text-overflow: ellipsis;
    /* 弹性伸缩盒模型显示 */
    display: -webkit-box;
    /* 限制在一个块元素显示文字的行数 */
    -webkit-line-clamp: 2;
    /* 设置或检索伸缩盒对象的子元素排列方式 */
    -webkit-box-orient: vertical;
}

解决最后一行未溢出不显示省略号的问题
1）不要给高度，直接写元素显示文字的行数
2）缩小高度直到文字溢出

（七）常见布局技巧

1.margin负值的应用

1）解决细线边框变粗的问题

将元素向左移动1像素，消除细线边框变粗。

li {
    list-style: none;
    width: 300px;
    height: 500px;
    padding: 10px auto;
    float: left;
    border: 1px solid rgb(0, 0, 0);
    margin-left: -1px;
}

2）解决边框显示不完全的问题

鼠标经过某个盒子时，提高盒子的层级即可：
如果没有定位，则添加相对定位（保留位置）因为相对定位会压住其他的标准流和对定位，即将盒子至于最上层；
如果有定位，则添加z-index

li {
    /* 2.如果有定位，则添加z-index）*/
    position: relative;
    list-style: none;
    width: 300px;
    height: 500px;
    float: left;
    border: 2px solid rgb(0, 0, 0);
    margin-left: -2px;
}

li:hover {
    /* 1.如果没有定位，则添加相对定位（保留位置） */
    /* position: relative; */
    /* 2.如果有定位，则添加z-index）*/
    z-index: 3;
    border: 2px solid rgb(102, 0, 255);
}

3）解决鼠标悬停加边框页面跳动问题

将原来margin值-1即可

li {
    list-style: none;
    width: 320px;
    height: 500px;
    float: left;
    margin: 5px;
}

li:hover {
    margin: 4px;
    border: 1px solid rgb(0, 0, 0);
}

2.文字围绕浮动的应用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CQFDTvH0-1659520525081)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220421161230222.png)]

因为浮动元素不会压住文字，所以可以用浮动来做

.box {
width: 400px;
height: 300px;
background-color: pink;
}

img {
float: left;
}

3.行内块的妙用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZdG2glvH-1659520525081)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220421162020494.png)]

将块元素转化为行内块元素，然后放到一个大盒子中，对大盒子进行水平居中对齐。

4.CSS三角强化

画出直角三角形：将左边和下边的边框设置为0 ,把上边框宽度调大

.box1 {
    width: 0;
    height: 0;
    /* 把上边框宽度调大 */
    border-top: 100px solid transparent;
    border-right: 50px solid rgb(255, 0, 43);
    /* 将左边和下边的边框设置为0 */
    border-bottom: 0 solid rgb(25, 0, 255);
    border-left: 0 solid rgb(82, 255, 1);
}

（八）CSS初始化

不同浏览器对标签的默认值时不一样的，为消除不同浏览器对HTML文本呈现的差异，所以要对CSS初始化，即重新设置浏览器的样式

Unicode编码字体：避免浏览器解释CSS代码时候出现乱码的问题

字体	Unicode
黑体	\9ED1\4F53
宋体	\5B8B\4F53
微软雅黑	\5FAE\8F6F\96C5\9ED1

/* 把所有标签内外边距清零 */
* {
    margin: 0;
    padding: 0;
}

/* 斜体的文字不倾斜 */
em,
i {
    font-style: normal;
}

/* 去掉li的小圆点 */
li {
    list-style: none;
}

/* border 0照顾低端的浏览器 如果图片外包含了链接会有边框的问题 */
img {
    border: 0;
    /* 图片与文字垂直居中 取消图片底边有空白缝隙的问题 */
    vertical-align: middle;
}

/* 鼠标悬停在按钮时，光标显示为小手 */
button {
    cursor: pointer;
}

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

body {
    /* 抗锯齿性，让文字更加清晰 */
    -webkit-font-smoothing: antialiased;
}

/* 清除浮动的影响 */
.clearfix:after {
    visibility: hidden;
    8clear: both;
    display: block;
    content: ".";
    height: 0;
}

.clearfix {
    *zoom: 1;
}

九、HTML5和CSS3的新特性

（一）HTML5的新特性

IE9+以上版本的浏览器才支持

1.新增的语义化标签（部分）

<header>头部标签</header>
<nav>导航栏标签</nav>
<article>内容标签</article>
<section>定义文档某个位置</section>
<aside>侧边栏标签</aside>
<footer>尾部标签</footer>

PS：
1.语义化标准主要针对搜索引擎
2.这些新标签在页面中可以使用多次
3.在IE9中，需要把这些元素转换为块级元素
4.移动端更常用

2.新增多媒体标签

1）video——视频

视频标签只支持三种格式：mp4、webm、ogg，尽量使用mp4格式

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。自动播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。循环播放
muted	muted	规定视频的音频输出应该被静音。
poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。视频图片
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

<video src="/video/小米商城 - Xiaomi 11 Ultra、Redmi K40 Pro、MIX FOLD，小米电视官方网站.mp4" width="320px" height="240px"
       loop="loop" autoplay="autoplay" muted="muted" controls="controls"></video>

兼容写法：

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持video标签
</video>

解决Chrome浏览器无法自动播放音频视频的问题

谷歌浏览器做了改革，不再允许自动播放音频和视频。Chrome只允许用户对网页进行主动触发后才可自动播放音频和视频

<video autoplay></video>

所以好多需求会要求在网页背后播放一段音频文件这种需求就头疼了，解决方案

比较常规的做法是，为video标签设置muted属性，使它静音，这样视频就能自动播放了，但是没有声音。然后待用户在网页上有了任意触发后，再将muted去掉。或者让用户手动去打开音频（腾讯视频就是这样做的）。
使用iframe来触发权限
```
<iframe style="display: none" allow="autoplay" src="音频地址"></iframe>
```
当你页面加载完成后，将原先video的src地址赋值给iframe ，就可以通过iframe来播放音频文件了

2）audio——音频

音频标签只支持三种格式：mp3、wav、ogg，尽量使用mp3格式

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	规定视频输出应该被静音。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的音频的 URL。

3.新增input类型

类型	使用示例	含义
email		输入邮箱格式，如：xx@163.com
url		输入url格式，如：http://www.baidu.com
number		输入数字格式，只能是数字
search		搜索框
range		自由拖动滑块
time		小时分钟
date		年月日
datetime		时间
month		年月
week		星期年
color		颜色
hidden/show		定义表单隐藏/显示

<form action="">
	邮箱：<input type="email"><br><br>
	url： <input type="url"><br><br>
	数字：<input type="number"><br><br>
	搜索：<input type="search"><br><br>
	滑块：<input type="range"><br><br>
	时分：<input type="time"><br><br>
	年月日：<input type="date"><br><br>
	年月：<input type="month"><br><br>
	星期：<input type="week"><br><br>
	颜色：<input type="color"><br><br>
	<input type="submit">
</form>

hidden/show属性的使用：

<script type="text/javascript">
	var flag = true;
	function hide() {
		var input = document.getElementById("myinput");
		var btn = document.getElementById("btn")
		if(flag) {
			input.type = "hidden";
			btn.innerHTML = "显示";
			flag = false;
		} else {
			input.type = "show";
			btn.innerHTML = "隐藏";
			flag = true;
		}
	}	
</script>

<button id="btn" onclick="hide()">隐藏</button><br>
<input id="myinput" name="myinput" type="show" value="小明">

4.新增的input属性值

属性	值	描述
required	required	指示输入字段的值是必需的，内容不为空
placeholder	text	规定帮助用户填写输入字段的提示。
autofocus	autofocus	规定输入字段在页面加载时是否获得焦点。（不适用于 type=“hidden”）自动定位鼠标
autocomplete	on/off	规定是否使用输入字段的自动完成功能。提示以前输入的内容
multiple	multiple	如果使用该属性，则允许一个以上的值。文件多选。

5.input属性outline

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

**注释：**轮廓线不会占据空间，也不一定是矩形。

outline 简写属性在一个声明中设置所有的轮廓属性。

可以按顺序设置如下属性：

outline-color
outline-style
outline-width

如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。

值	描述
outline-color	规定边框的颜色。参阅：outline-color 中可能的值。
outline-style	规定边框的样式。参阅：outline-style 中可能的值。
outline-width	规定边框的宽度。参阅：outline-width 中可能的值。
inherit	规定应该从父元素继承 outline 属性的设置。

6.datalist:

定义选项列表，与input结合使用

<!-- input使用list属性 -->
<input type="text"  value="输入明星" list="star"/>  
<!-- datalist使用id属性，list属性与id属性的值一致，表示与input形成链接 -->
<datalist id="star">	
	<option>张学友</option>
	<option>张韶涵</option>
	<option>张敬轩</option>
	<option>孙燕姿</option>
	<option>孙悦</option>
	<option>张碧晨</option>
</datalist>

7.fieldset：

可将表单内的相关元素分组打包，与legend搭配使用

<fieldset>
	<legend>登录页面</legend> <!--  外边框的标题 -->
	用户名：<input type="text"><br><br>
	密　码：<input type="password">
</fieldset>

8.mark：

用于定义带有记号的文本。在需要突出显示文本时可使用标签。

<p>这是一个段落，中间的<mark>文本</mark>需要标记</p>

注意：IE 8及之前的版本不支持mark标签。

9.meter：

定义度量衡，仅用于已知最大和最小值的度量。比如：磁盘使用情况，查询结果的相关性等。**不能当做进度条使用。

min：规定范围最小值
max：规定范围最大值
value：规定度量的当前值，是必须的属性。可以用数值表示
low：范围界定的最低值
high：范围界定的最大值

注意：IE浏览器不支持meter标签。

<meter min="0" max="10" value="6"></meter> <br>

<!-- value的值超过high的值 -->
<meter min="0" max="100" value="95" low="30" high="90"></meter><br>

<!-- value的值在low与high之间 -->
<meter min="0" max="100" value="60" low="30" high="90"></meter><br>

<!-- value的值低于low的值 -->
<meter min="0" max="100" value="25" low="30" high="90"></meter>

10.progress：

定义运行中的任务进度，通常与JavaScript结合使用来显示当前的任务进度。不能作为度量值使用

<progress value="20" max="100"></progress>

（二）CSS的新特性

1.CSS3新增选择器

1）属性选择器

1.利用属性选择器可以不借助类或者ID选择器
2.属性选择器还可以选择属性=值的某些元素
3.属性选择器可以选择属性值开头的某些元素
4.属性选择器可以选择属性值结尾的某些元素
5.属性选择器可以选择属性值中含有的某些元素

/* 1.利用属性选择器可以不借助类或者ID选择器  */
input[value] {
    /* 必须是input 但必须包含value  */
    color: blue;
}

/* 2.属性选择器还可以选择属性=值的某些元素 */
input[type="text"] {
    /* 必须是input type的值必须是text  */
    color: blue;
}

/* 3.属性选择器可以选择属性值开头的某些元素 */
div[class^=icon] {

    /* 选择是div,具有class属性,并且class属性以icon开头的属性  */
    color: blue;
}

/* 4.属性选择器可以选择属性值结尾的某些元素 */
div[class$=xiao] {
    /* 选择是div,具有class属性,并且class属性以xiao结尾的属性 */
    color: blue;
}

/* 5.属性选择器可以选择属性值中含有的某些元素 */
div[class*=kong] {
    /* 选择是div,具有class属性,并且class属性中含有kong的属性 */
    color: blue;
}

PS：类选择器、属性选择器、伪类选择器的权重都是0010

2）结构伪类选择器

选择器	示例	描述
:first-child	p:first-child	选择属于父元素的第一个子元素的每个元素。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个元素。
:first-of-type	p:first-of-type	选择属于其父元素的首个元素的每个元素。
:last-of-type	p:last-of-type	选择属于其父元素的最后元素的每个元素。
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个元素的每个元素。

/* 1.选择ul里的第一个li */
/* 注意加空格 */
ul li:first-child {
    background-color: red;
}

/* 2.选择ul里的最后一个li */
/* 注意加空格 */
ul li:last-child {
    background-color: red;
}

/* 3.nth-child(n)  选择ul里的第n个li */
/* 注意加空格和小括号 */
ul li:nth-child(4) {
    background-color: red;
}

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。

数字：n是几就选择第几个元素
关键词：Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）
公式：从n=0开始，依次加1

公式	取值
2n	偶数
2n+1	奇数
5n	5、10、15…
n+5	从第5个开始到最后
-n+5	前5个（包含第5个）

/* 4.nth-child(even) even-偶数  选择ul里的第偶数个li */
/* ul li:nth-child(even) {
background-color: red;
} */

/* 5.nth-child(odd) odd-奇数  选择ul里的第奇数个li */
/* ul li:nth-child(odd) {
background-color: red;
} */

/* 6.nth-child(n) 从0开始 每次自加1 往后面计算 相当于选择所有元素 */
/* 这里必须是n 不能是其他字母 */
/*ul li:nth-child(n) {
    background-color: red;
}*/

/* 7.nth-child(5n) 5n-5*n 从0开始 5、10、15 */
/* ul li:nth-child(5n) {
background-color: red;
}*/

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
n可以是数字、关键词或公式。该选择器选取父元素的第 N 个子元素，与类型有关。

/* nth-child(n)与nth-of-type(n)的区别 */

/* 此时既不会选择div也不会选择p */
/* :nth-child()会将所有元素进行排序 */
/* 执行时先看:nth-child()里面的n，然后再去找上一级父盒子 */
/* n与前面的类型div不匹配(div是2，而n=1)，所以不会选择 */
section div:nth-child(1) {
    background-color: red;
}

/* 此时既会选择div*/
/* :nth-of-type()会将指定的元素进行排序 */
/* 执行时先去找上一级父盒子，然后再看:nth-of-type()里面的n */
section div:nth-of-type(1) {
    background-color: red;
}

<section>
    <p>1</p>
    <div>2</div>
    <div>3</div>
</section>

3）伪元素选择器

伪元素选择器可以利用CSS来创建标签，从而简化html的结构，新创建的元素在文档中无法找到，所以叫做伪元素

::after 选择器在被选元素的内容后面插入内容。
::before 选择器在被选元素的内容前面插入内容。
::first-letter 匹配第一个字符
::first-line 匹配第一行
::selection 鼠标选中的内容

/*在被选元素的内容后面插入内容。*/
元素名::after{}
/*在被选元素的内容前面插入内容。*/
元素名::before{}

PS：
1.before和after都是创建一个行内元素
2.都是使用 content 属性来指定要插入的内容
3.伪元素选择器的权重为0001

使用场景：
1.字体图标
2.遮罩
3.清除浮动

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XjhzC5Ln-1659520525082)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220424144622479.png)]

4）目标伪类选择器

跟锚点链接联合使用，点击锚点链接后，选择对应id的标签

:target {
    color: red;
}

<a href="#demo">大事记</a><br>
<a href="#demo2">早年经历</a><br>
<a href="#demo3">代表作品</a>
<h1 id="demo">大事记</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1 id="demo2">早年经历</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1 id="demo3">代表作品</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

2.盒子模型

CSS3可以使用box-sizing来指定盒模型

值	描述
content-box	这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。width不是实际宽度
border-box	为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。width就是实际宽度

* {
    padding: 0;
    margin: 0;
    /* 盒模型初始化 */
    box-sizing: border-box;
}

3.CSS3滤镜filter

filter将迷糊或颜色偏移等效果应用于元素

滤镜函数	描述
none	默认值。规定无效果。
blur(px)	对图像应用模糊效果。较大的值将产生更多的模糊。如果为指定值，则使用 0。
brightness(%)	调整图像的亮度。0％将使图像完全变黑。默认值是 100％，代表原始图像。值超过 100％将提供更明亮的结果。
contrast(%)	调整图像的对比度。0％将使图像完全变黑。默认值是 100％，代表原始图像。超过 100％的值将提供更具对比度的结果。
drop-shadow(h-shadow v-shadow blur spread color)	对图像应用阴影效果。可能的值：h-shadow - 必需。指定水平阴影的像素值。负值会将阴影放置在图像的左侧。v-shadow - 必需。指定垂直阴影的像素值。负值会将阴影放置在图像上方。blur -可选。这是第三个值，单位必须用像素。为阴影添加模糊效果。值越大创建的模糊就越多（阴影会变得更大更亮）。不允许负值。如果未规定值，会使用 0（阴影的边缘很锐利）。spread - 可选。这是第四个值，单位必须用像素。正值将导致阴影扩展并增大，负值将导致阴影缩小。如果未规定值，会使用 0（阴影与元素的大小相同）。注释：Chrome、Safari 和 Opera，也许还有其他浏览器，不支持第 4 个长度；如果添加，则不会呈现。color - 可选。为阴影添加颜色。如果未规定，则颜色取决于浏览器（通常为黑色）。这个例子创建了红色的阴影，水平和垂直方向均为 8px，带有 10px 的模糊效果：filter: drop-shadow(8px 8px 10px red);提示：这个滤镜类似 box-shadow 属性。
grayscale(%)	将图像转换为灰阶。0% (0) 是默认值，代表原始图像。100％将使图像完全变灰（用于黑白图像）。注释：不允许负值。
hue-rotate(deg)	在图像上应用色相旋转。该值定义色环的度数。默认值为 0deg，代表原始图像。注释：最大值是 360deg。
invert(%)	反转图像中的样本。0% (0) 是默认值，代表原始图像。100％将使图像完全反转。注释：不允许负值。
opacity(%)	设置图像的不透明度级别。opacity-level 描述了透明度级别，其中：0% 为完全透明。100% (1) 是默认值，代表原始图像（不透明）。注释：不允许负值。提示：这个滤镜类似 opacity 属性。
saturate(%)	设置图像的饱和度。0% (0) will make the image completely un-saturated.100% is default and represents the original image.Values over 100% provides super-saturated results.注释：不允许负值。
sepia(%)	将图像转换为棕褐色。0% (0) 是默认值，代表原始图像。100％将使图像完全变为棕褐色。注释：不允许负值。
url()	url() 函数接受规定 SVG 滤镜的 XML 文件的位置，并且可以包含指向特定滤镜元素的锚点。实例：filter: url(svg-url#element-id)

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

4.颜色渐变

CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片

/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

5.CSS3 calc函数

calc函数可以实现对盒模型的宽度的计算

例如：子盒子的宽度永远比父盒子小30px

.father {
width: 400px;
height: 400px;
background-color: rgb(255, 0, 0);
}

/* 例如：子盒子的宽度永远比父盒子小30px */
.son {
width: calc(100% - 30px);
height: 200px;
background-color: rgb(47, 0, 255);
}

6.CSS3过渡动画

transition 在不使用Flash动画或Javascript的情况下，当元素从一种样式变换为另一种样式时为元素添加过渡动画效果。

过渡动画：从一种状态渐渐的过渡到另一种状态

transition的位置：谁做过渡给谁加

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。
transition-duration	规定完成过渡效果需要多少秒或毫秒。
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

transition-timing-function属性设置速度效果，值为：

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

div {
    width: 300px;
    height: 200px;
    background-color: rgb(6, 14, 161);
    /* transition: 要变化的属性名 变化所需的时间 运动曲线 何时开始; */
    /*多个属性用逗号隔开*/
    transition: width 2s ease 0s, height 2s ease 0s;
    /*或者将属性名改为all*/
    transition: all 2s ease 0s;
}

div:hover {
    width: 500px;
    height: 300px;
}

7.2D转换

转换（transform）是CSS中具有颠覆性特征之一，可以实现元素的位移、旋转、缩放等效果

1）translate 移动

可以改变元素在页面中的位置，类似定位

值	描述
translateX(x)	定义转换，只是用 X 轴的值
translateY(y)	定义转换，只是用 Y 轴的值。
translate(x,y)	定义 2D 转换。

div {
    /* 2D转换translate移动盒子 */
    width: 200px;
    height: 200px;
    background-color: rgb(21, 145, 52);
    /* 向右正，向下正 */
    /* 1.移动水平和垂直的距离 */
    /* transform: translate(100px, 10px); */
    /* 2.移动水平的距离 100px */
    /* transform: translateX(100px); */
    /* 3.移动垂直的距离 10px */
    transform: translateY(10px);
}

PS：
1.优点是不会影响其他元素
2.值也可以使用百分比，例如transform: translateX(50%);移动自身的50%
3.对行内标签没有效果

2）让盒子实现水平居中

div {
    width: 100px;
    height: 100px;
    background-color: rgb(79, 192, 31);
    /* 让盒子实现水平居中 */
    position: absolute;
    top: 50%;
    left: 50%;
    /* 向左走自身的50%，向上走自身的50% */
    transform: translate(-50%, -50%);
}

3）旋转 rotate

可以让元素在平面上进行顺时针和逆时针旋转

div {
    width: 100px;
    height: 100px;
    background-color: rgb(49, 217, 34);
    /* 顺时针旋转15度 */
    /* transform: rotate(15deg); */
    /* 逆时针旋转15度 */
    transform: rotate(-15deg);
}

PS：
1.rotate的单位是度数（deg）
2.度数为正时顺时针，度数为负时，逆时针
3.默认旋转的中心点是元素的中心点

4）小三角

方法1：先对元素设置边框，然后进行旋转，最后把无用边框改为透明色
方法2：先进行旋转，然后对涉及的边进行单独设置

div {
    margin-top: 20px;
    width: 20px;
    height: 20px;
    border: 2px solid black;
    transform: rotate(45deg);
}

/* 上三角 */
.top {
    border-right-color: transparent;
    border-bottom-color: transparent;
}

/* 右三角 */
.right {
    border-left-color: transparent;
    border-bottom-color: transparent;
}

/* 下三角 */
.bottom {
    border-top-color: transparent;
    border-left-color: transparent;
}

/* 左三角 */
.left {
    border-top-color: transparent;
    border-right-color: transparent;
}

5）中心点 transform-origin

transform-origin 属性允许改变被转换元素的中心点的位置

transform-origin: x-axis y-axis z-axis;
transform-origin: 50% 50%;

div {
    margin: 200px;
    width: 100px;
    height: 100px;
    background-color: rgb(49, 217, 34);
    /* 顺时针旋转15度 */
    transform: rotate(45deg);
    /* 改变中心点的位置 */
    /* transform-origin: 10% 10%; */
    /* 可以是像素 */
    /* transform-origin: 10px 10px; */
    /* 可以是方位名词 */
    transform-origin: right top;
}

PS：
1.x y要用空格分开
2.还可以给x y 设置像素或者方位名词（top bottom left right）

6）缩放 scale

控制元素的放大和缩小 transform:scale(width,height);

div {
    margin: 100px auto;
    width: 200px;
    height: 200px;
    background-color: rgb(23, 206, 87);
}

div:hover {
    /* 1.里面是数字不跟单位，就是倍数 */
    /* transform: scale(2, 2); */
    /* 2.宽度是两倍，高度不变 */
    /* transform: scale(2, 1); */
    /* 3.同时改变高和宽，两倍 */
    transform: scale(2);
}

PS：
1.width,height用逗号隔开
2.transform:scale(2,2);宽和高都放大两倍
3.transform:scale(2);如果只写一个参数，那默认第二个参数也是这个即与transform:scale(2,2);相同
4.参数>1是放大，反之缩小
5.可以设置中心点的位置
6.不会影响其他盒子

7）2D转换复合写法

格式：transform：translate() rotate() scale()等

div {
    margin: 100px auto;
    width: 200px;
    height: 200px;
    background-color: rgb(59, 161, 21);
}

div:hover {
    transform: translate(50px, 50px) rotate(180deg);
    transition: all 0.5s;
}

PS：
1.顺序不可改变
2.当同时有位移和其他属性时，位移要放大最前面

8.CSS3动画

1）利用@keyframes定义动画

@keyframes 动画名称{
    0%{
        初始样式
    }
    100%{
        最终样式
    }
}

/* 定义动画 */
@keyframes move {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(1000px, 0);
    }
}

2）使用动画

div{
    /* 调用动画 */
    animation-name:动画名称;
    /* 定义持续时间 */
    animation-duration:持续时间;
}

div {
    width: 200px;
    height: 200px;
    background-color: rgb(32, 152, 21);
    /* 调用动画 */
    animation-name: move;
    /* 设置持续时间 */
    animation-duration: 0.5s;
}

3）动画序列

（1）0%是动画的开始，100%是动画的结束
（2）在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
（3）动画是是元素从一种样式逐渐改变为另一种样式的效果。可以改变任意多的样式任意次数
（4）用%来规定发生的时间，或者用关键词from和to等价于0%和100%

@keyframes move {
    /* 动画序列 */
    /* 可以做多个状态的变化 keyframes——关键帧 */
    /* 里面的百分比要是整数 */
    /* 里面的百分比就是总的时间的划分 100%/4*/
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(1000px, 0);
    }
    50% {
        transform: translate(1000px, 1000px);
    }
    75% {
        transform: translate(0, 1000px);
    }
    100% {
        transform: translate(0, 0);
    }
}

4）动画属性

属性	描述
@keyframes	规定动画模式。
animation	设置所有动画属性的简写属性。
animation-delay	规定动画开始的延迟。
animation-direction	定动画是向前播放、向后播放还是交替播放。要想鼠标走回开而不是跳回来
animation-duration	规定动画完成一个周期应花费的时间。
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count	规定动画应播放的次数。
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行还是暂停。经常和鼠标经过等配合使用
animation-timing-function	规定动画的速度曲线。

div {
    width: 200px;
    height: 200px;
    background-color: rgb(32, 152, 21);
    /* 调用动画名称 */
    animation-name: move;
    /* 设置持续时间 */
    animation-duration: 2s;
    /* 设置动画曲线 */
    animation-timing-function: ease;
    /* 设置动画延时开始时间 */
    animation-delay: 1s;
    /* 设置动画循环次数 */
    /* iteration-重复的，count-次数，infinite-无限的 */
    /* 循环两次 */
    /* animation-iteration-count: 2; */
    /* 无限循环 */
    /* animation-iteration-count: infinite; */
    /* 设置动画反向播放 */
    /* animation-direction: alternate; */
    /* 设置动画结束后的状态 */
    /* 回到起始位置 */
    /* animation-fill-mode: backwards; */
    /* 保持结束样式 */
    animation-fill-mode: forwards;
}

div:hover {
    /* 鼠标经过后，停止动画 ；鼠标离开后，继续动画*/
    animation-play-state: paused;
}

5）动画复合属性

格式：

div {
    width: 200px;
    height: 200px;
    background-color: rgb(32, 152, 21);
    /* animation: name    duration  timing-function delay   iteration-count direction fill-mode; */
    /* animation: 动画名称 持续时间  运动曲线         延时时间 播放次数         是否反向  动画起始结束状态; */
    animation: move 2s ease 1s 1 alternate forwards;
}

PS：简写属性不包含animation-play-state

6）steps 速度曲线

steps函数分步完成动画，每一步之间有暂停，不是平滑的

@keyframes widther {
    0% {
        width: 0;
    }
    100% {
        width: 200px;
    }
}
div {
    height: 50px;
    background-color: rgb(32, 196, 111);
    /* steps函数分步完成动画，每一步之间有暂停 */
    animation: widther 2s steps(5) forwards;
}

9.3D转换

1）translate 移动

值	描述
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。

div {
    width: 200px;
    height: 200px;
    background-color: rgb(19, 139, 55);
    /* 向右正，向下正，向外正*/
    /* 1.移动水平和垂直的距离 */
    /* transform: translate3d(100px, 10px,20px); */
    /* 2.移动X的距离 100px */
    /* transform: translateX(100px); */
    /* 3.移动Y的距离 10px */
    /* transform: translateY(10px); */
    /* 4.移动Z的距离 10px */
    transform: translateZ(10px);
}

2）透视 perspective

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

透视距离是眼睛到屏幕的距离，单位是px。透视距离越大元素越小，反正越大

值	描述
number	元素距离视图的距离，以像素计。
none	默认值。与 0 相同。不设置透视。

PS：透视写到被观察盒子的父盒子上

3）translateZ(z)

translateZ(z)是物体到屏幕的距离

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nOHgnMmB-1659520525082)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220502214703862.png)]

PS：
1.当d>z时就看不到物体了
2.Z轴越大看到的物体就越大

4）3D旋转 rotate3d

用左手准则判断图片旋转方向，拇指指向轴的正方向，向右正，向下正，向外正

body {
    /* 透视加到父元素上 */
    perspective: 200px;
}
div {
    width: 200px;
    height: 200px;
    background-color: rgb(11, 96, 36);
    margin: 500px auto;
    transition: all 1s;
}
div:hover {
    /* 绕X轴旋转 */
    /* transform: rotateX(70deg); */
    /* 绕Y轴旋转 */
    /* transform: rotateY(70deg); */
    /* 绕Z轴旋转 */
    transform: rotateZ(70deg);
    /* 绕自定义轴旋转 */
    /* transform: rotate3d( X,Y,Z,度数); */
    /* X、Y、Z进行矢量叠加为轴 */
    transform: rotate3d( 1,1,0,70deg);
}

5）3D呈现 transfrom-style

transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。

值	描述
flat	子元素将不保留其 3D 位置。
preserve-3d	子元素将保留其 3D 位置。

PS：代码写给父级，但影响的是子元素

body {
    perspective: 500px;
}
.box {
    position: relative;
    /* 让子元素开启3D立体空间 */
    transform-style: preserve-3d;
    width: 200px;
    height: 200px;
    margin: 100px auto;
    perspective: 500px;
    transition: all 2s;
}
.box:hover {
    transform: rotate3d(0, 1, 0, 60deg);
}
.box div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(24, 125, 15);
}
.box div:last-child {
    transform: rotate3d(1, 0, 0, 60deg);
    background-color: rgb(201, 42, 42);
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sdku6fs6-1659520525083)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220502221801297.png)]

10.浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，较新的版本无须添加

1）私有前缀

前缀	含义
-moz-	firefox浏览器私有前缀
-ms-	IE浏览器私有前缀
-webkit-	safari 和chrome浏览器私有前缀
-o-	Opera浏览器私有前缀

2）提倡写法

-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;

（三）品优购

1.网站favicon图标

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u8gphBLq-1659520525083)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220429162430710.png)]

favicon图标一般用于作为缩略网站标志，它显示在浏览器的地址栏或者标签上

方法：
1.把图片切成png图片
2.把png图片转换为ico图标，借助第三方网站，例如比特虫：http://www.bitbug.net
3.将生成的图标放到根目录下
4.导入图标

<link rel="shortcut icon" href=" /favicon.ico" />

2.TDK三大标签的SEO优化

<head>
    <meta charset="utf8" version='1'/>
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
    <meta name="description"
          content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。"/>
    <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"/>
</head>

1）title：建议使用网站名（产品名）或者网站介绍，尽量不超过30字
2）description：提倡对网站的业务和主题进行概括，多采用“我们是。。。”“我们提供。。。”
3）Keywords：最好限制为6-8个关键词，关键词之间用英文逗号隔开

3.logo SEO优化

1）logo div里要先放一个h1标签，目的是为了提高权重，告诉搜索引擎，这个地方很重要
2）h1里再放一个链接，可以返回首页的（首页网址），把logo的背景图片给链接即可
3）为了搜索引擎收录我们，我们链接里面要放文字（网站名称）但是文字不要显示出来
方法1：text-indent移到盒子外面（text-indent：-9999px）,然后overflow：hidden
方法2：直接给font-size：0，就看不到文字啦
4）最后给链接一个title属性，鼠标放到logo上就可以看到提示文字了

移动端

一、流式布局

（一）、移动端

移动端浏览器兼容，处理Webkit内核的浏览器即可
移动端的手机屏幕尺寸非常多，但是不必重点关注
谷歌浏览器可以进行移动端调试

（二）、视口

视口是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口

1.布局视口 layout viewport

一般移动设备的浏览器都默认设置了一个布局视口，用于早期的PC端页面在手机上显示的问题
iOS，Android基本都将这个视口的分辨率设置为980px，所以PC上的页面大多数都是能在手机上呈现的，只不过元素看起来很小，一般默认可以通过手机缩放网页

2.视觉视口 visual viewport

它是用户正在看到的网站的区域，我们可以通过缩放去操作视觉视口，但不会影响布局，布局视口仍保持原来的宽度

3.理想视口 ideal viewport

理想视口对设备来讲，是对理想的视口尺寸
需要手动添加meta视口标签通知浏览器操作
meta视口标签的主要目的是布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们的布局的视口就多宽

4.meta视口标签

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

属性	说明
width	宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比，大于0的数字
user-scalable	用户是否可以缩放，yes或no(1或0)

5.标准的viewport设置

视口宽度和设备保持一致
视口默认缩放比例1.0
不允许用户自行缩放
最大缩放比1.0
最小缩放比1.0

（三）、二倍图

1.物理像素和物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的PC端页面，1px等于1物理像素，但是在移动端开发时的1px不一定等于1物理像素
1px的能显示的物理像素点的个数，称为物理像素比或者屏幕像素比

2.多倍图

对于一张50pxX 50px的图片在手机的Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊
在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题，通常使用二倍图。在设置背景图片时，要注意缩放的问题。
需要50pxX50px（CSS像素）的图片但是直接放到iph8里会放大两倍，就会模糊采取措施是放一个100pxX100px的图片，然后手动把图片缩小为50pxX50px，我们准备的图片比实际需要的大两倍，这种方式就是二倍图

3.背景缩放 background-size

background-size 属性规定背景图像的尺寸

值	描述
length	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
percentage	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 “auto”。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。不会改变比例
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。当宽度或者高度铺满盒子就不会再继续拉伸，可能会存在一定空白

4.多倍图切图 cutterman

选择IOS或者Android然后再选择倍数

@3X 三倍图
@2X 二倍图
@1X 一倍图

5.二倍精灵图

使用步骤
1.首先在PS里将精灵图缩小一半
2.然后再测量所选取的部分
3.最后将精灵图缩小一半background-size:50%;

（四）、移动端开发方案选择

1.移动端主流方案

移动端主流方案分类：单独制作移动页面、响应式页面兼容移动端

2.单独制作移动页面

单独制作移动页面：通常在网址域名前面加m(mobile)可以打开移动设备。通过判断设备，如果是移动设备打开，则会跳到移动端页面

3.响应式页面兼容移动端

响应式页面兼容移动端：兼容PC端和移动端
缺点：制作麻烦，需要花费很大的精力去调试兼容性的问题

（五）、移动端技术解决方案

1.移动端浏览器

移动端浏览器基本以Webkit内核为主，因此我们就需要考虑Webkit兼容性的问题，我们可以放心使用H5标签和CSS3样式，同时浏览器私有前缀我们只需要添加webkit即可

2.CSS初始化

移动端推荐使用normalize.css/
官方网址：http://necolas.github.io/normalize.css

3.特殊样式

a {
    /* 去除点击高亮 */
    -webkit-tap-highlight-color: transparent;
}

input {
    /* 去除表单默认外观 */
    -webkit-appearance: none;
}

img,
a {
    /* 禁止长按页面时弹出菜单 */
    -webkit-touch-callout: none;
}

（六）、移动端常见布局-流式布局

移动端技术选型
单独制作移动页面：流式布局，flex弹性布局，less+rem+媒体查询布局、混合布局
响应式页面兼容移动端：媒体查询，bookstarp

流式布局：就是百分比布局，也称为像素布局。将盒子的宽度设置成百分比，盒子宽的根据屏幕宽度进行伸缩，不受固定像素的限制，内容向两侧填充。

为保证布局内容可以设置
max-width：最大宽度
max-height：最大高度
min-width：最小宽度
min-height：最小高度

二、弹性布局

（一）、布局原理

弹性布局flex是flexible box的缩写，用来为盒子模型提供最大的灵活性，任何一个容器都可以指定为flex布局，通过给父盒子flex属性达到控制子盒子的位置和排列方式的目的

采用flex布局的元素称为flex容器，它的所有子元素自动成为成员，称为flex项目

PS：
1.当为父元素指定为flex布局后，子元素的float、clear、vertical-align属性将失效
2.伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

（二）、flex布局父项常见属性

1.常见父项属性

属性	描述
flex-direction	设置主轴的方向
justify-content	设置主轴上的子元素排列方式
flex-wrap	设置子元素是否换行
align-items	设置侧轴上的子元素的排列方式（单行）
align-content	设置侧轴上的子元素的排列方式（多行）
flex-flow	复合属性，相当于同时设置flex-dirextion和flex-wrap

2.flex-direction

1)主轴和侧轴

在flex布局中，分为主轴和侧轴两个方向，同样的叫法：行和列，X轴和Y轴

默认的：主轴水平向右，侧轴垂直向下

2）属性值

flex-direction属性决定了主轴的方向（项目的排列方向），但是主轴和侧轴是会变化的，由flex-direction指定主轴的方向，剩下的就是侧轴，我们的子元素就是跟着主轴来排列的

属性	描述
row	默认值，从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

div {
    /* 给父元素添加flex属性控制子元素的排列 */
    display: flex;
    /* 默认的主轴是从左到右 元素根据主轴排列*/
    /* flex-direction: row; */
    /* 设置主轴为从右到左 */
    /* flex-direction: row-reverse; */
    /* 设置主轴为从上到下 */
    /* flex-direction: column; */
    /* 设置主轴为从下到上 */
    flex-direction: column-reverse;
    width: 80vw;
    height: 80vh;
    margin: 10%;
    background-color: rgb(121, 219, 60);
}

3.justify-content

justify-content属性设置了项目在主轴上的排列方式，在定义项目排列方式之前一定要先确定主轴

值	描述
flex-start	默认值，从头开始，如果主轴是X轴则从左向右
flex-end	从尾部开始排列
center	在主轴上居中对齐
space-around	平分剩余空间，分配的空间会叠加
space-between	先两边贴边，剩余项目再平分剩余空间

div {
    /* 给父元素添加flex属性控制子元素的排列 */
    display: flex;
    /* 默认的主轴是从左到右 元素根据主轴排列*/
    flex-direction: row;
    /* 默认值，从头开始，如果主轴是X轴则从左向右 */
    /* justify-content: start; */
    /* 从尾部开始排列 */
    /* justify-content: end; */
    /* 在主轴上居中对齐 */
    /* justify-content: center; */
    /* 平分剩余空间，分配的空间会叠加 */
    /* justify-content: space-around; */
    /* 先两边贴边，剩余项目再平分剩余空间 */
    justify-content: space-between;
    width: 80vw;
    height: 80vh;
    margin: 10%;
    background-color: rgb(121, 219, 60);
}

4.flex-wrap

flex-wrap属性设置项目是否换行，默认是不换行的，当项目大小超出容器时，会强制缩小项目大小，使得在一行显示

值	描述
nowrap	默认值，不换行
wrap	换行

div {
    /* 给父元素添加flex属性控制子元素的排列 */
    display: flex;
    /* 默认的主轴是从左到右 元素根据主轴排列*/
    flex-direction: row;
    /* 默认值，从头开始，如果主轴是X轴则从左向右 */
    justify-content: start;
    /* flex-wrap属性定义项目是否换行，默认是不换行的，
    当项目大小超出容器时，会强制缩小项目大小，使得
    在一行显示 */
    /* flex-wrap: nowrap; */
    /* 定义项目换行 */
    flex-wrap: wrap;
    width: 80vw;
    height: 80vh;
    margin: 10%;
    background-color: rgb(121, 219, 60);
}

5.align-items

align-items设置侧轴的单行项目的排列方式

值	描述
flex-start	从头开始
flex-end	从尾部开始排列
center	居中对齐
stretch	默认值，拉伸（当子盒子没有给定高度时）

div {
    /* 给父元素添加flex属性控制子元素的排列 */
    display: flex;
    /* 默认的主轴是从左到右 元素根据主轴排列*/
    flex-direction: row;
    /* 让项目沿主轴居中 */
    justify-content: center;
    /* 让项目沿侧轴从上到下 */
    /* align-items: flex-start; */
    /* 让项目沿侧轴从下到上 */
    /* align-items: flex-end; */
    /* 让项目沿侧轴居中 */
    /* align-items: center; */
    /* 默认，让项目沿侧轴拉伸 */
    align-items: stretch;
    width: 80vw;
    height: 80vh;
    margin: 10%;
    background-color: rgb(121, 219, 60);
}

6.align-content

align-items设置侧轴的多行项目（项目换行）的排列方式

值	描述
flex-start	默认值，从头开始
flex-end	从尾部开始排列
center	在侧轴上居中对齐
space-around	在侧轴上，平分剩余空间，分配的空间会叠加
space-between	在侧轴上，先两边贴边，剩余项目再平分剩余空间
stretch	设置子项高度平分容器高度

div {
    /* 给父元素添加flex属性控制子元素的排列 */
    display: flex;
    /* 默认的主轴是从左到右 元素根据主轴排列*/
    flex-direction: row;
    /* 让项目沿主轴平均分配空间 */
    justify-content: space-around;
    /* 让项目换行 */
    flex-wrap: wrap;
    /* 设置侧轴 */
    /* 默认值，从头开始  */
    /* align-content: flex-start; */
    /* 从尾部开始排列 */
    /* align-content: flex-end; */
    /* 在侧轴上居中对齐 */
    /* align-content: center; */
    /* 在侧轴上，平分剩余空间，分配的空间会叠加 */
    /* align-content: space-around; */
    /* 在侧轴上，先两边贴边，剩余项目再平分剩余空间 */
    /* align-content: space-between; */
    /* 设置子项高度平分容器高度 */
    /* align-content: stretch; */
    width: 80vw;
    height: 80vh;
    margin: 10%;
    background-color: rgb(121, 219, 60);
}

7.flex-flow

flex-flow是复合属性，相当于同时设置flex-dirextion和flex-wrap

div {
    /* 给父元素添加flex属性控制子元素的排列 */
    display: flex;
    /* 默认的主轴是从左到右 元素根据主轴排列*/
    /* flex-direction: row; */
    /* 让项目换行 */
    /* flex-wrap: wrap; */
    /* flex-flow是复合属性 */
    /* 把设置主轴方向和是否换行进行复合书写 */
    flex-flow: row wrap;
    width: 80vw;
    height: 80vh;
    margin: 10%;
    background-color: rgb(121, 219, 60);
}
div span {
    width: 38%;
    height: 10%;
    background-color: rgb(27, 132, 193);
}

（三）、flex布局子项常见属性

1.flex属性

flex属性定义项目分配剩余空间，用flex来表示占多少份数,默认为0份，最大为全部。

section {
    display: flex;
    width: 60%;
    height: 150px;
    background-color: rgb(185, 19, 19);
    margin: 0 auto;
}

section div:first-child {
    width: 100px;
    height: 150px;
    background-color: rgb(25, 210, 50);
}

section div:nth-child(2) {
    /* 占全部 */
    flex: 1;
    background-color: rgb(212, 19, 132);
}

section div:nth-child(3) {
    width: 100px;
    height: 150px;
    background-color: rgb(25, 87, 210);
}

将项目不设置宽度，那么剩余宽度就是容器宽度，给每个项目设置占剩余空间的份数，都是一份，即每个占1/3，即可实现每个盒子平均分配容器宽度

.section1 {
    display: flex;
    width: 60%;
    height: 150px;
    background-color: rgb(203, 136, 136);
    margin: 100px auto;
}

.section1 div {
    height: 150px;
    flex: 1;
}

.section1 div:first-child {
    background-color: rgb(25, 210, 50);
}

.section1 div:nth-child(2) {
    background-color: rgb(212, 19, 132);
}

.section1 div:nth-child(3) {
    background-color: rgb(25, 87, 210);
}

2.align-self

align-self单独控制某个项目自己在侧轴上的排列方式

值	描述
auto	默认。元素继承其父容器的 align-items 属性，如果没有父容器，则为 “stretch”。
stretch	定位元素以适合容器。
center	元素位于容器的中央。
flex-start	元素位于容器的开头。
flex-end	元素位于容器的末端。
baseline	元素被定位到容器的基线

.section {
    display: flex;
    width: 60%;
    height: 250px;
    background-color: rgb(185, 19, 19);
    margin: 0 auto;
    /* 让子盒子沿侧轴底侧对齐 */
    /* align-items: flex-end; */
}

.section div {
    width: 100px;
    height: 100px;
    background-color: rgb(30, 138, 54);
}

.section div:last-child {
     /* 我们只想让3号盒子下来 */
    align-self: flex-end;
}

3.order

order 属性设置子元素的排列顺序，数值越小越往前，默认是0，注意与z-index不一样

.section {
    display: flex;
    width: 60%;
    height: 250px;
    background-color: rgb(185, 19, 19);
    margin: 0 auto;
}

.section div {
    width: 100px;
    height: 100px;
    background-color: rgb(30, 138, 54);
}

/* 让2号盒子排在最前面 */
/* order默认是0，数字越小越往前 */
.section div:nth-child(2) {
    order: -1;
}

（四）弹性布局与定位冲突问题

手机端经常会要做固定在顶部或者底部的导航栏，
但当弹性盒子跟固定/绝对定位一起使用时，就会发生问题，具体情况如下：

<div class="flex-box">
	<div class="option">1</div>
	<div class="option">2</div>
	<div class="option">3</div>        
	<div class="option">4</div>    
</div>

*{		
    margin: 0;            
    padding: 0;        
}
.flex-box {         
    display: flex;            
    align-items: center;            
    background-color: aqua;        
}
.option {            
    width: 25%;            
    padding: 20px 0;            
    text-align: center;        
}

给flex-box加入绝对定位这时问题就出现了

弹性盒子的一些设置失效了。我看有的博主说被绝对/固定定位的盒子不参与flex布局，于是在外面再套一个盒子，宽度100%，用来定位，里面那个当弹性盒子。这方法也行，但是理解有偏差。

其实，固定/绝对定位会对元素宽度造成影响，导致弹性盒子定位后宽度发生变化（想要深入了解固定/绝对定位对元素宽度影响可以去百度下，有很多详细的资料），解决办法是给弹性盒子显式的加一个宽度100%就会恢复正常。如果看了资料还是不懂定位对元素宽度的影响，直接给元素显式的加上宽度就不用担心了。
总结下来就是，定位后宽度出问题，就给他加上一个确定的宽度，否则宽度为auto。
注：此问题针对html，wxml不给出宽度不会出现问题。

三、rem适配布局

（一）rem基础

rem(root em)是一个相对单位，类似于em,em是父元素字体大小，rem的基准是html元素的字体大小

rem是相对于html设置的，以html的字体大小为根，优点是可以通过修改html页面里的文字的大小来改变页面中元素的大小可以整体控制

（二）媒体查询

1.简介

媒体查询(Media Query)是CSS3的新语法

使用@media查询，可以针对不同的媒体类型定义不同的样式，可以根据屏幕尺寸设置不同的样式
当重置浏览器大小的过程中，页面也会根据浏览器的高度和宽度重新渲染页面

2.语法规范

@media mediatype and|not|only (media feature){
	CSS-Code
}

3.媒体类型：

值	描述
all	默认。用于所有媒体类型设备。
print	用于打印机。
screen	用于计算机屏幕、平板电脑、智能手机等。
speech	用于朗读页面的屏幕阅读器。

not、only 和 and 关键字的含义：

not：not 关键字排除某个媒体类型
only：only 关键字指定媒体类型。
and：and 关键字将媒体特性与媒体类型或其他媒体特性组合在一起。

它们都是可选的。但是，如果使用 not 或 only，则还必须指定媒体类型。

4媒体特性

值	描述
any-hover	是否有任何可用的输入机制允许用户（将鼠标等）悬停在元素上？在 Media Queries Level 4 中被添加。
any-pointer	可用的输入机制中是否有任何指针设备，如果有，它的精度如何？在 Media Queries Level 4 中被添加。
aspect-ratio	视口（viewport）的宽高比。
color	输出设备每个像素的比特值，常见的有 8、16、32 位。如果设备不支持输出彩色，则该值为 0。
color-gamut	用户代理和输出设备大致程度上支持的色域。在 Media Queries Level 4 中被添加。
color-index	输出设备的颜色查询表（color lookup table）中的条目数量。如果设备不使用颜色查询表，则该值为 0。
device-aspect-ratio	输出设备的宽高比。已在 Media Queries Level 4 中被弃用。
device-height	输出设备渲染表面（如屏幕）的高度。已在 Media Queries Level 4 中被弃用。
device-width	输出设备渲染表面（如屏幕）的宽度。已在 Media Queries Level 4 中被弃用。
display-mode	应用程序的显示模式，如 web app 的 manifest 中的 display 成员所指定在 Web App Manifest spec 被定义。
forced-colors	检测是用户代理否限制调色板。在 Media Queries Level 5 中被添加。
grid	输出设备使用网格屏幕还是点阵屏幕？
height	视口（viewport）的高度。
hover	主输入机制是否允许用户将鼠标悬停在元素上？在 Media Queries Level 4 中被添加。
inverted-colors	浏览器或者底层操作系统是否反转了颜色。在 Media Queries Level 5 中被添加。
light-level	当前环境光水平。在 Media Queries Level 5 中被添加。
max-aspect-ratio	显示区域的宽度和高度之间的最大比例。
max-color	输出设备每个颜色分量的最大位数。
max-color-index	设备可以显示的最大颜色数。
max-height	显示区域的最大高度，例如浏览器窗口。
max-monochrome	单色（灰度）设备上每种“颜色”的最大位数。
max-resolution	设备的最大分辨率，使用 dpi 或 dpcm。
max-width	显示区域的最大宽度，例如浏览器窗口。
min-aspect-ratio	显示区域的宽度和高度之间的最小比例。
min-color	输出设备每个颜色分量的最小位数。
min-color-index	设备可以显示的最小颜色数。
min-height	显示区域的最小高度，例如浏览器窗口。
min-monochrome	单色（灰度）设备上每种“颜色”的最小位数。
min-resolution	设备的最低分辨率，使用 dpi 或 dpcm。
min-width	显示区域的最小宽度，例如浏览器窗口。
monochrome	输出设备单色帧缓冲区中每个像素的位深度。如果设备并非黑白屏幕，则该值为 0。
orientation	视窗（viewport）的旋转方向（横屏还是竖屏模式）。
overflow-block	输出设备如何处理沿块轴溢出视口(viewport)的内容。在 Media Queries Level 4 中被添加。
overflow-inline	沿内联轴溢出视口(viewport)的内容是否可以滚动？在 Media Queries Level 4 中被添加。
pointer	主要输入机制是一个指针设备吗？如果是，它的精度如何？在 Media Queries Level 4 中被添加。
prefers-color-scheme	探测用户倾向于选择亮色还是暗色的配色方案。在 Media Queries Level 5 中被添加。
prefers-contrast	探测用户是否有向系统要求提高或降低相近颜色之间的对比度。在 Media Queries Level 5 中被添加。
prefers-reduced-motion	用户是否希望页面上出现更少的动态效果。在 Media Queries Level 5 中被添加。
prefers-reduced-transparency	用户是否倾向于选择更低的透明度。在 Media Queries Level 5 中被添加。
resolution	输出设备的分辨率，使用 dpi 或 dpcm。
scan	输出设备的扫描过程（适用于电视等）。
scripting	探测脚本（例如 JavaScript）是否可用。在 Media Queries Level 5 中被添加。
update	输出设备更新内容的渲染结果的频率。在 Media Queries Level 4 中被添加。
width	视窗（viewport）的宽度。

PS：
1.用@media开头，注意@符号
2.mediatype媒体类型
3.关键字 and | not | only
4.media feature媒体特性必须有小括号包含

5.媒体查询+rem实现元素动态大小变化

将控制元素大小的单位由像素大小改为rem控制。使用媒体查询，当屏幕的宽度变化时，改变根字体大小，即可实现页面元素随页面大小而改变。

@media screen and (min-width:320px) {
    html {
        font-size: 50px;
    }
}
@media screen and (min-width:640px) {
    html {
        font-size: 100px;
    }
}
div {
    position: absolute;
    top: 0;
    height: 1rem;
    text-align: center;
    line-height: 1rem;
    font-size: 0.5rem;
    background-color: lightgreen;
}

6.引入资源

当样式比较繁多的时候，我们可以针对不同的媒体使用不同的样式表（CSS文件），直接在link中判断设备的尺寸，然后引用不同的CSS文件

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- /* 当屏幕大小大于等于940，div 一行显示两个，
当屏幕大小小于640，div 一行显示一个 */ -->
<link rel="stylesheet" href="style640-.css" media="screen and (min-width:640px)">
<link rel="stylesheet" href="style940+.css" media="screen and (min-width:940px)">

（三）Less基础

1.CSS的弊端

CSS是一门非程序语言，没有变量、函数、作用域等概念
CSS会书写许多重复的代码，造成代码冗余
CSS没有很好的计算能力
CSS不方便维护及扩展，不利于复用

2.less介绍

Less(Leaner Style Sheets)是一门CSS扩展语言，也称为CSS预处理器
它在CSS语法的基础上引入了变量，Mixin(混入)运算，运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本，Less可以让我们用更少的代码做更多的事

Less中文网站：http://lesscss.com

常见的的CSS预处理器：Sass、Less、Stylus

3.less使用

建立.less文件，将less语句写到.less文件里，然后再编译，最后再在html文件上使用

4.less变量

@变量名:值;

变量命名规范：
必须有@前缀
不能包含特殊字符
不能以数字开头
不能以下划线开头
大小写敏感

//定义一个粉色的变量
@color: pink;
// 定义字体大小为14px
@font14: 14px;

div {
    background-color: @color;
    font-size: @font14;
}

5.less编译

vscode插件Easy LESS来进行将Less文件编译成CSS文件

只要保存一下less文件，插件即可自动生成css文件，最后在引入生成的CSS文件

<link rel="stylesheet" href="04-less.css">

6.less嵌套

子元素的样式直接写到父元素里面

header {
    width: 200px;
    height: 200px;
    background-color: deeppink;
    a {
        color: pink;
    }
}

如果遇见（交集、伪类、伪类元素选择器）要加&
内层选择器没有&符号，则它被解析为父元素的选择器的后代
如果有&符号，它就被解析为父元素自身或是父元素的伪类

// 解析为父元素的选择器的后代
a {
    color: pink;
    :hover {
        color: blue;
    }
}
//less解析为css
header a :hover {
  color: blue;
}

// 解析为父元素自身或是父元素的伪类
a {
    color: pink;
    &:hover {
        color: blue;
    }
}
//less解析为css
header a:hover {
  color: blue;
}

7.less运算

// 算数运算
@border: (5px + 5);

div {
    // width: 200 / 10rem;   
    //或者 
    width: (200px / 10);
    height: (200 * 2px);
    border: @border dashed red;
    color: #666666 - #444444;
}

PS：
运算符之间要有空格
最好加（）
颜色也可以运算
对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
如果两个值之间只有一个单位，则运算结果就取该值

（四）rem适配方案

1.目的

让一些不能等比例自适应的元素，达到当设备尺寸发生变化时，等比例适配设备

2.方法

使用媒体查询根据不同设备的比例设置html的根字体大小，然后页面元素使用rem做的尺寸单位，当html字体大小变化，元素尺寸也会发生变化，从而达到等比例缩放的适配

3.rem实际开发适配方案

1）按照设计稿与设备宽度的比例，动态计算html跟标签的font-size大小
2）CSS中，设计稿元素的宽高相对位置的取值，按照等比例换算rem的值

4.rem实际开发适配方案

1）less+媒体查询+rem
2）flexble.js+rem

5.元素大小取值方式

1）页面rem值=页面元素值（px） / （屏幕宽度 / 划分份数例如，将1400px的屏幕划分为140份，html font-size=10px,一个50px的元素=5rem
2）html font-size=屏幕宽度 / 划分分数
3)页面rem值=页面元素值（px） / html font-size

6.flexble.js+rem方案

不需要再写媒体查询，将屏幕换分为10等分，不同设备下比例还是一致的，只需要设置html的（页面大小/10）文字大小就可以啦

四、响应式布局

（一）响应式开发

1.响应式开发原理

通过媒体查询（@media）针对不同宽度的设备进行布局和样式的设置，从而达到适配不同设备的目的

设备划分	尺寸区间
超小屏幕(手机)	(0,768px)
小屏设备(平板)	[768px,992px)
中等屏幕(桌面显示器)	[992px,1200px)
宽屏设备(大桌面显示器)	[1200px,inf)

2.响应式布局容器

响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果
原理就是在不同的屏幕下，通过媒体查询来改变这个布局容器的大小，在改变里面元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化

设备划分	设置宽度
超小屏幕(手机)	100%
小屏设备(平板)	750px
中等屏幕(桌面显示器)	970px
宽屏设备(大桌面显示器)	1170px

/* 超小屏幕(手机) <768*/
@media screen and (max-width:768px) {
    .container {
        width: 100%;
    }
}
/* 小屏设备(平板) 768~992*/
@media screen and (min-width:768px) {
    .container {
        width: 750px;
    }
}
/* 中等屏幕(桌面显示器) 992~1200 */
@media screen and (min-width:992px) {
    .container {
        width: 970px;
    }
}
/* 宽屏设备(大桌面显示器) >1200*/
@media screen and (min-width:1200px) {
    .container {
        width: 1170px;
    }
}

（二）Bootstrap前端开发框架

1.简介

官网：http://getbootstrap.com
中文网站：http://www.bootcss.com
推荐网站：https://v3.bootcss.com/

框架：有一套比较完整的网页功能解决方案，有预设的样式库、组件和插件。使用者要按照框架所规定的某种规范化进行开发

优点：
标准化的html+css编码规范
提供了一套简洁、直观、强悍的组件
有自己的生态圈，不断的更新迭代
让开发更加简单

2.Bootstrap使用

步骤：
1)下载Bootstrap压缩包
2)创建Bootstrap文件夹将压缩包解压到文件夹里
3)创建HTML骨架

<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <title>Bootstrap 101 Template</title>

        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

        <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
        <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
        <!--[if lt IE 9]>
<script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
    </head>
    <body>
        <h1>你好，世界！</h1>

        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
        <script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    </body>
</html>

4)引入相关样式文件

<!-- 直接在网站上复制代码就可以啦 -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

5)书写内容
如果想要更改样式，只需要再添加一个类名，利用层叠性进行覆盖即可。但是要注意权重的问题。

3.布局容器

Bootstrap需要一个页面内容和栅格系统包裹一个.container容器，Bootstrap预定好了这个类，加。container，它提供了两个作此用处的类。

1）container类

响应式布局的容器，自动固定宽度，响应式布局

设备划分	设置宽度
超小屏幕(手机)	100%
小屏设备(平板)	750px
中等屏幕(桌面显示器)	970px
宽屏设备(大桌面显示器)	1170px

2）container-fluid类

流式布局容器，100%宽度
占据全部视口的容器
适合单独做移动端开发

（三）Bootstrap栅格系统

1.栅格系统简介

栅格系统（grid systems）也称为网格系统，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随屏幕或者视口尺寸的增加，系统会自动将.container分为最大12列

2.栅格选项参数

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

设备划分	设置宽度	类前缀
超小屏幕(手机)	100%	.col-xs-份数
小屏设备(平板)	750px	.col-sm-份数
中等屏幕(桌面显示器)	970px	.col-md-份数
宽屏设备(大桌面显示器)	1170px	.col-lg-份数

PS：
1.行（row）必须放到container布局容器里面
2.实现平均划分，需要给列添加类前缀
3.xs-extra small：超小，sm-samll：小，md-medium：中等，lg-large：大
4.列（column）大于12，多余的列，所在的元素将被作为一个整体另起一行排列
5.每一列默认有15px的padding
6.可以同时为一列指定多个设备的类名，以便划分不同的份数，例如class=“col-md-4 col-sm-6”
7.如果份数相加小于12，则占不满.container，会留空白；如果份数相加大于12，则超出.container，会另起一行

3.列嵌套

在父元素中嵌套子元素，然后将父元素看作.container容器，同样会分为12份，要想实现子元素平均分配，只需要添加类属性即可

<div class="row">
    <div class="col-md-6">
        <!-- 每个小盒子又分为为12份 -->
        <div class="row">
            <div class="col-md-4">a</div>
            <div class="col-md-4">a</div>
            <div class="col-md-4">a</div>
        </div>
    </div>
</div>

PS：如果要想实现元素之间有一定的间距，不能够加margin值，因为每一个元素都是浮动的，且大小相加正好等于100%，如果加了margin那么盒子一定会超出，另起一行。所以要实现这个间距，要在父元素里面放入子盒子，然后父元素添加padding值。
父元素里面直接添加子元素会有一定的padding值，要解决这个问题，只需要在子元素外再添加一个父元素，并且类名改为.row，所以列嵌套最好加一个行，这样可以去掉父元素的padding值，而且高度会和父元素一样高

4.列偏移

当份数相加不满12时，右侧会留出空白，使用.col-md-offset-"偏移份数"类可以实现将列向右偏移（水平居右），这些类实际上是通过通配符选择器为当前元素增加了左侧边距（margin），偏移份数=12-两个盒子的份数

<div class="row">
    <div class="col-md-4 ">左侧</div>
    <div class="col-md-4 col-md-oddset-4">右侧 </div>
</div>

实现一行中只有一个子元素，并且子元素居中显示。使用.col-md-offset-"偏移份数"类进行右偏移，偏移份数=（12-盒子份数）/ 2

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z0heay4I-1659520525084)(C:\Users\KongQingzhi\AppData\Roaming\Typora\typora-user-images\image-20220509213718200.png)]

<div class="row">
    <div class="col-md-4 col-md-offset-4">中间</div>
</div>

5.列排序

通过使用.col-md-push-"份数"和.col-md-pull-"份数"类就可以很容易的改变列的顺序。push向右推，pull向左拉。

<div class="row">
    <div class="col-md-4 col-md-push-8">左侧</div>
    <div class="col-md-8 col-md-pull-4">右侧 </div>
</div>

6.响应式工具

在不同屏幕下可以隐藏某些元素

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

在不同屏幕下可以显示某些元素

类名	超小屏	小屏	中屏	大屏
.visible-xs	可见	隐藏	隐藏	隐藏
.visible-sm	隐藏	可见	隐藏	隐藏
.visible-md	隐藏	隐藏	可见	隐藏
.visible-lg	隐藏	隐藏	隐藏	可见

<!-- 中屏隐藏 -->
<div class="row">
    <div class="col-md-3 ">1</div>
    <div class="col-md-3 ">2</div>
    <div class="col-md-3 hidden-md">中屏隐藏元素</div>
    <div class="col-md-3 ">4</div>
    <!-- 大屏显示 -->
    <span class="visible-lg">大屏显示元素</span>
</div>

（四）、vw和vh

1.移动端布局

rem：市场比较常见，需要不断修改html文字大小，需要媒体查询，需要flexble.js
vw/vh：未来趋势，省去各种判断和修改

2.vw/vh是什么？

vw/vh是一个相对单位，vw是视口宽度，vh是视口高度

1vw=1/100视口宽度，1vh=1/100视口高度

vw/vh与%是有区别的，%是相对于父元素来说的，vw/vh是相对于当前视口来说的

3.vw和vh的使用

div{
    width:20vw;
    height:50vh;
    background-color:red;
}

4.还原设计稿

50px*50px的盒子：

1.分析视口宽度为375px
2.计算1vw是多少px:375px/100=3.75px
3.用50px/3.75px=13.3333vw
4.高度也是如此

      <title>Bootstrap 101 Template</title>

        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

        <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
        <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
        <!--[if lt IE 9]>
<script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
    </head>
    <body>
        <h1>你好，世界！</h1>

        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
        <script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    </body>
</html>