1.视口布局：meta
1.viewport：视口
2.width=device-width：视口宽度 = 设备宽度
3.initial-scale=1.0：缩放1倍（不缩放）
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
2.百分比布局：流式布局
1.百分比布局， 也叫流式布局
2.效果： 宽度自适应，高度固定。
3.多倍图：
（1.市场上手机不会有1倍清晰度屏幕 2.各大it公司直接使用高清图3倍图或者2倍即可）
1.3倍图：3倍清晰屏幕（2倍清晰屏幕至多只能感受2倍清晰浪费了一点点流量去加载不能直接显示完毕的3倍图）
2.2倍图：3倍清晰屏幕只能感受到2倍清晰图片使用2倍
3.1倍图：1倍清晰屏幕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 前端需要解决的问题
1.一套代码 可以识别当前屏幕的清晰度 自动加载对应清晰度的图片
美工 说 前端呀 我给你三张图片 1倍清晰 2倍清晰 3倍清晰
2 解决方案 很简单！！ srcset
PC 端 1 1.jpg
iphone SE 2 2.jpg
iphone 12 pro 3 3.png
3目前前端主流看待多倍图解决方式
1 市场上手机不会有1倍清晰度屏幕
2各大it公司直接使用高清图3倍图或者2倍即可
图片使用3倍->3倍清晰屏幕完美
图片使用3倍 ->2倍清晰屏幕至多只能感受2倍清晰浪费了一点点流量去加载不能直接显示完毕的3倍图
图片使用3倍->1倍清晰屏幕手机淘汰很少
图片使用2倍->3倍清晰屏幕只能感受到2倍清晰图片使用2倍->2倍清晰屏幕完美
图片使用2倍->1倍清晰屏幕
-->
<!-- 2倍清晰度来访问你的网页 出问题 -->
<img srcset="./01-3种图片/001.jpg 1x, ./01-3种图片/002.jpg 2x, ./01-3种图片/003.jpg 3x" />
</body>
</html>
4.flex布局/弹性布局：
1.是一种浏览器提倡的布局模型
2.布局网页更简单、灵活
3.避免浮动脱标的问题
5.Flex布局模型构成：
1.作用：
1.基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
2.Flex布局非常适合结构化布局
2.设置方式：
1.父元素添加 display: flex，子元素可以自动的挤压或拉伸
3.组成部分
1.弹性容器
2.弹性盒子
3.主轴
4.侧轴/交叉轴
6.主轴对齐方式：justify-content：（简写：jc）
1.flex-start：默认值, 起点开始依次排列（左对齐）
2.flex-end：终点开始依次排列（右对齐）
3.center：沿主轴居中排列（居中对齐）
4.space-around（sd）：弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 （间隔存放-两侧空间小于中间）
5.space-between （sb）：弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间（先两侧对齐，间隔存放）
6.space-evenly （sv）：弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等 （绝对平均）
7.侧轴对齐方式：单行 多行
1.单行： align-items:
1.center 居中
2.flex-start 上对齐
3.flex-end 下对齐
4.stretch 默认值 弹性盒子沿着主轴线被拉伸至铺满容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 500px;
height: 500px;
background-color: green;
display: flex;
/* 垂直对齐居中 */
align-items: center;
/* 侧轴对齐方式（垂直对齐）：align-items
1.center 居中
2.flex-start 上对齐
3.flex-end 下对齐
4.stretch 默认值 弹性盒子沿着主轴线被拉伸至铺满容器
*/
}
span {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
2.多行：align-content
-
align-content: flex-start; 上对齐
-
align-content: flex-end; 居中对齐
-
align-content: center;下对齐
-
4.space-around（sd）：弹性盒子沿侧轴均匀排列, 空白间距均分在弹性盒子两侧 （间隔存放-两侧空间小于中间）
-
5.space-between （sb）：弹性盒子沿侧轴均匀排列, 空白间距均分在相邻盒子之间（先两侧对齐，间隔存放）
-
6.space-evenly （sv）：弹性盒子沿侧轴均匀排列, 弹性盒子与容器之间间距相等 （绝对平均
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 500px;
height: 500px;
background-color: green;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
/*
4.space-around（sd）：弹性盒子沿侧轴均匀排列, 空白间距均分在弹性盒子两侧 （间隔存放-两侧空间小于中间）
5.space-between （sb）：弹性盒子沿侧轴均匀排列, 空白间距均分在相邻盒子之间（先两侧对齐，间隔存放）
6.space-evenly （sv）：弹性盒子沿侧轴均匀排列, 弹性盒子与容器之间间距相等 （绝对平均） */
}
span {
width: 100px;
height: 100px;
/* 如果不给子盒子设置高度 子盒子会默认平分父盒子高度 */
background-color: red;
align-self: center;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
</div>
</body>
</html>
8.换行：flex-wrap
1.flex-wrap:warp 换行
2.flex-wrap：nowrap 不换行
3.注意：如果说设置了换行就不能使用 flex:1 均分属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 500px;
height: 500px;
background-color: green;
display: flex;
flex-wrap: wrap;
/* 默认情况下
1.flex不会换行
当子元素总宽度大于父元素宽度的时候 不会换行 只会压缩子元素的宽度
2.设置 换行属性
flex-wrap
1.nowrap 不换行 */
}
span {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
</div>
</body>
</html>
9.flex子项
1.子项均分父项的宽（改变主轴方向：高）flex:1
1.如果不给子盒子设置高度 子盒子会默认平分父盒子高度
2.子项平分父项 1份宽度（改变主轴的方向下平分高度）
2.设置子项在侧轴的对齐方式：aline-self
1.flex-start
2.flex-end
3.center
3.子项:
1.主轴未改变
1.默认的宽度等于内容撑开
2.默认的高度 等于父项的高
3.flex:1 设置 子项的宽度
4.align-seft 设置 子项在侧轴上的对齐
2.主轴方向改变了 column
1.默认的高度 等于内容撑开
2.flex:1 设置 子项的高度
3.align-seft 设置 子项在侧轴上的对齐（水平）
4.默认的宽度等于父项的宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
width: 500px;
height: 500px;
background-color: green;
display: flex;
/* 修改主轴方向： flex-direction
1.row 默认值 水平方向 从左到右 少用
2.row-reverse 从右到左 少用
3.column 从上到下 会用
4.column-reverse 从下到上 少用 了解 */
flex-direction: column-reverse;
/* 当父项主轴发生改变
子项由平分父项的宽度 改为平分父项的高度 */
/* justify-content: center; */
/* 理解：flex 是可以修改主轴方向的
理解 ：当主轴方向修改了之后
设置主轴对齐属性 效果也会跟着发生改变
justify-content
align-items */
}
span {
/* width: 100px; */
height: 100px;
/* 如果不给子盒子设置高度 子盒子会默认平分父盒子高度 */
background-color: red;
flex: 1;
/* 子项平分父项 1份宽度（改变主轴的方向下平分高度） */
}
span:nth-child(3) {
flex: 2;
background-color: black;
/* 第三盒子平分父项的 2份宽度(改变主轴的方向下平分高度) */
}
</style>
</head>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
</html>
10.flex布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
width: 1000px;
height: 700px;
background-color: pink;
display: flex;
/* 转成 flex布局 */
margin: 100px auto;
flex-wrap: wrap;
/* 换行 */
list-style: none;
/* 设置主轴对齐方式 */
justify-content: space-around;
/* 设置侧轴多行对齐方式 */
align-content: space-around;
}
li {
width: 22%;
height: 44%;
background-color: red;
display: flex;
flex-direction: column;
/* 设置主轴方向：从上到下 */
align-items: center;
/* 侧轴对齐 水平对齐 */
justify-content: space-evenly;
/* 设置主轴对齐方式 */
padding: 70px 0;
}
span {
width: 50px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>
<span></span>
<h6>食堂</h6>
<p>干饭</p>
</li>
<li>
<span></span>
<h6>食堂</h6>
<p>干饭</p>
</li>
<li>
<span></span>
<h6>食堂</h6>
<p>干饭</p>
</li>
<li>
<span></span>
<h6>食堂</h6>
<p>干饭</p>
</li>
<li>
<span></span>
<h6>食堂</h6>
<p>干饭</p>
</li>
<li>
<span></span>
<h6>食堂</h6>
<p>干饭</p>
</li>
<li>
<span></span>
<h6>食堂</h6>
<p>干饭</p>
</li>
<li>
<span></span>
<h6>食堂</h6>
<p>干饭</p>
</li>
</ul>
</body>
</html>
