1.标准流
1.1 浮动（了解）
注意：浮动本质是用来做图文混排而不是块级布局的
块级元素默认独占一行垂直显示，浮动的作用是让块级元素水平排列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.left,
.right {
/* 浮动后的盒子具备行内块的特点（一行可以有多个，且宽度由内容填充决定） */
height: 200px;
}
.left {
float: left;
background: pink;
margin-left: 20px;
}
.right {
float: left;
/* 浮动后的盒子顶对齐 */
height: 50px;
background: purple;
}
/* bottom占据标准流的位置，而left和right都因为添加了浮动，所以不占用标准流的位置，
所以bottom的铺盖不守left和right位置影响 */
.bottom {
height: 50px;
background: black;
}
</style>
</head>
<body>
<div class="left">左侧</div>
<div class="right">右侧</div>
<div class="bottom">black</div>
</body>
</html>
结果：
1.1.1 案例——使用浮动写小米盒子嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
/* 父级大盒子 */
.mi {
width: 1226px;
height: 614px;
background-color: #fff;
margin: 100px auto;
}
.left {
float: left;
width: 234px;
height: 614px;
background-color: palegoldenrod;
}
.right {
float: right;
width: 978px;
height: 614px;
background-color: green;
}
.right li {
float: left;
width: 234px;
height: 300px;
background-color: pink;
/* 设置外边框 */
margin-right: 14px;
margin-bottom: 14px;
}
.right li:nth-child(4n) {
/* 设置外边框 */
margin-right: 0;
}
</style>
</head>
<body>
<div class="mi">
<div class="left">左侧</div>
<div class="right">
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
</div>
</body>
</html>
结果：
1.1.2 清除浮动
1.1.3 浮动总结
浮动本质是用来做图文混排的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<img src="./images/bg.gif" alt="">
你好吗你好吗你好吗你好啊你好吗你好吗你好吗你好啊你好吗你好吗你好吗你好啊你好吗你好吗你好吗你好啊你好吗你好吗你好吗你好啊你好吗你好吗你好吗你好啊你好吗你好吗你好吗你好啊你好吗你好吗你好吗你好啊你好吗你好吗你好吗你好啊你好吗你好吗你好吗你好啊
</body>
</html>
1.2 flex布局
想使用flex布局，必须要有父盒子（弹性容器）；子盒子（弹性盒子）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
/* 使用flex排版 */
/* 且只需要父级或子级一方的高度，就可以填充显示 */
display: flex;
justify-content: space-between;
width: 800px;
/* height: 200px; */
background-color: pink;
}
.box>div {
width: 100px;
height: 200px;
background-color: purple;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
结果：
1.2.1 主轴(y轴方向)对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
/* 给父亲添加flex布局 */
display: flex;
/*让子盒子左对齐 */
/* justify-content: flex-start; */
/* 让子盒子右对齐 justify-content: flex-end*/
/* 让子盒子居中对齐 justify-content: center*/
/* justify-content: center;
*/
justify-content: space-between;
width: 800px;
height: 200px;
background-color: pink;
}
.box div {
width: 200px;
background-color: seagreen;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
1.2.2 测轴（x轴方向）的对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
/* 给父亲添加flex布局 */
display: flex;
justify-content: space-between;
/* 默认的，默认和父亲一样高，所以不用加孩子高度 */
align-items: stretch;
width: 800px;
height: 600px;
background-color: pink;
}
.box div {
width: 200px;
height: 200;
background-color: seagreen;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
2 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小兔仙</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.box {
width: 1240px;
height: 540px;
background-color: white;
margin: 100px auto;
}
.box-hd {
/* 给父亲添加flex里面的孩子，h2和a可以一样显示 */
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 40px 0;
background-color: goldenrod;
}
.box-hd h2 {
font-size: 32px;
font-weight: 400;
}
.box-hd span {
font-size: 16px;
color: white;
}
.box-hd a {
font-size: 16px;
color: white;
}
/* 主体部分 */
.box-bd {
/* 给父亲添加flex里面的孩子，h2和a可以一样显示 */
justify-content: space-between;
background-color: palegoldenrod;
}
.box-bd li {
width: 306px;
height: 406px;
/* display: flex; */
background-color: skyblue;
text-align: center;
}
.box-bd li img {
width: 100%;
}
.box-bd li h4 {
font-size: 22px;
font-weight: 400;
margin: 12px 0 20px;
}
.box-bd li p {
font-size: 18px;
color: orangered;
}
.box-bd ul {
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="box">
<div class="box-hd">
<h2>新鲜好物
<span> 新鲜出炉 品质靠谱</span>
</h2>
<a href="#">查看更多-> </a>
</div>
<div class="box-bd">
<ul>
<li>
<img src="./images/bg.gif" alt="">
<h4>全防水HABU旋钮</h4>
<p>12人民币</p>
</li>
<li>
<img src="./images/bg.gif" alt="">
<h4>全防水HABU旋钮</h4>
<p>12人民币</p>
</li>
<li>
<img src="./images/bg.gif" alt="">
<h4>全防水HABU旋钮</h4>
<p>12人民币</p>
</li>
<li>
<img src="./images/bg.gif" alt="">
<h4>全防水HABU旋钮</h4>
<p>12人民币</p>
</li>
</ul>
</div>
</div>
</body>
</html>
结果：
