笔者在学习CSS布局后，汇总CSS布局技巧，分析他们的应用场景，并动手实践操作，并记录为此篇文章
标准流：元素的标准（默认）排布规则，例如：块级元素独占一行、行内元素一行可以多个
浮动布局
使块级元素同行显示（最初的目的是图文混排）
属性名：float:left/right（左对齐/右对齐）
特点：顶对齐；具有行内块显示模式的特点；脱标（不占用标准流的位置，可能出现与标准流重合的情况）；父级宽度不够时，浮动的子级会换行
应用场景：图片浮动、左右结构布局、多列布局
实践：产品区域布局
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style:none;
}
.product{
margin: 50px auto;
width: 1226px;
height: 628px;
background-color: white;
}
.left{
float: left;
width: 234px;
height: 628px;
background-color: skyblue;
}
.right{
width: 978px;
height: 628px;
background-color: white;
float: right;
}
.right li{
float: left;
margin-right: 14px;
margin-bottom: 14px;
width: 234px;
height: 300px;
background-color: skyblue;
}
.right li:nth-child(4n){
margin: 0;
}
</style>
</head>
<body>
<div class="product">
<div class="left"></div>
<div class="right">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
实现结果：
清除浮动
原因 ：由于浮动脱标，当父级没有设置height时，子级浮动无法撑开父级高度（可能导致父级没有高度）
做法：
1.额外标签法：在父级内容的最后添加一个块级元素，设置属性clear:both
2.单伪元素法：在父级内容的最后添加一个块级伪元素，设置属性clear:both
3.双伪元素法：
.cleafix::before,
.cleafix::after{
content: "";
display: table;
}
.cleafix::after{
clear: both;
}
4.overflow：为父级添加overflow:hidden
Flex布局
也叫弹性布局，浏览器倡导的布局模型，适合结构化布局，提供了强大的空间分步和对齐能力；不会产生脱标，布局页面更简单灵活
给父级元素添加属性：display:flex
子元素可以自动挤压或拉伸
组成部分：弹性容器；弹性盒子；主轴（默认在水平方向）；侧轴/交叉轴（默认在垂直方向）
弹性盒子沿着主轴排列
默认情况下，主轴方向尺寸由内容决定，侧轴方向尺寸拉伸
主轴对齐方式：justify-content：center（居中）/space-between（空白分配给盒子之间间距）/space-around（空白分配给盒子两侧）/space-evenly（盒子与容器之间间距相等）
侧轴对齐方式：align-items（所有盒子）/align-self（某个盒子）
属性值：stretch（拉伸，前提是盒子侧轴方向无尺寸）/center（居中）
修改主轴方向：flex-direction:column（主轴变为垂直方向，侧轴变为水平方向）
（主轴）弹性伸缩比flex：整数（表示盒子占用父级剩余尺寸的份数）
换行属性flex-wrap:wrap/nowrap（不换行，默认，自动挤压或拉伸）
行对齐方式align-content：center（居中）/space-between（空白分配给行之间间距）/space-around（空白分配给行两侧/space-evenly（行与容器之间间距相等）
）
应用场景：骰子布局、网格布局、百分比布局、圣杯布局、输入框布局、悬挂式布局等
实践：解决方案布局
实现代码：
<!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;
}
.solution{
width: 1400px;
height: 600px;
margin: 100px auto;
border: 1px solid #dddddd;
border-radius: 10px;
}
.solution ul{
padding: 50px;
height: 600px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
}
.solution ul li{
display: flex;
height: 200px;
width: 500px;
}
.solution .pic{
margin-right: 15px;
}
.solution .text h4{
line-height: 40px;
font-size: 20px;
font-weight: 400;
color: #333;
}
.solution .text p{
font-size: 14px;
color: #666;
}
</style>
</head>
<body>
<div class="solution">
<ul>
<li>
<div class="pic">
<img src="./images/档案管理.png" alt="转存失败，建议直接上传图片文件">
</div>
<div class="text">
<h4>解决方案</h4>
<p>解决方案内容</p>
</div>
</li>
<li>
<div class="pic">
<img src="./images/档案管理.png" alt="转存失败，建议直接上传图片文件">
</div>
<div class="text">
<h4>解决方案</h4>
<p>解决方案内容</p>
</div>
</li>
<li>
<div class="pic">
<img src="./images/档案管理.png" alt="转存失败，建议直接上传图片文件">
</div>
<div class="text">
<h4>解决方案</h4>
<p>解决方案内容</p>
</div>
</li>
<li>
<div class="pic">
<img src="./images/档案管理.png" alt="转存失败，建议直接上传图片文件">
</div>
<div class="text">
<h4>解决方案</h4>
<p>解决方案内容</p>
</div>
</li>
</ul>
</div>
</body>
</html>
实现效果：
定位布局
灵活地改变盒子在页面中的位置（将两个标签重合）
相对定位
相对原来的位置移动；不脱标，占位；不改变标签显示模式
position: relative
边偏移属性：top/left:100px
绝对定位
脱标，不占位；显示模式改变，宽高生效（行内块）
使用场景：子级绝对定位，父级相对定位；
参照物：在祖先元素中逐级寻找已定位的元素作为参照，若没找到，则以浏览器页面为参照
应用场景：轮播图；标签重合场景；定位居中（登录页面）
固定定位
页面滚动时元素位置不改变
position: fixed
top:0
以浏览器为参照改变位置
脱标，不占位
显示模式改变，行内块
应用场景：顶部搜索栏；侧边导航栏
定位标签重叠问题
默认情况：标签书写顺序靠后的在上面
解决：z-index属性，属性值为整数，整数越大越靠上
实践：图片与文字重叠（文字作为图片的标题或介绍）
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
div{
width: 200px;
position: relative;
background-color: skyblue;
}
p{
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div>
<img src="./images/档案管理.png" alt="转存失败，建议直接上传图片文件">
<p>档案管理</p>
</div>
</body>
</html>
实现效果
