网页布局的那些样儿
- 固定布局
- 流式布局
- 弹性布局
- 网格grid布局
- 自适应布局
- 响应式布局
- 伸缩布局
固定布局
固定布局（Fixed Layout）：网页上所有的元素宽度以像素（px）为单位，不用去在乎什么设备什么浏览器，都是用同一套尺寸去进行布局。在不同环境下的状态时相同的，最常见PC端网页上。
流式布局
流式布局（Liquid Layout）：元素的宽度按照屏幕分辨率自动进行适配调整，保证当前屏幕分辨率发生改变的时候，页面中的元素大小也可以跟着改变。移动端一般采用流式布局（百分比布局）
- 左侧固定，右侧自适应等
- 两侧固定，中间自适应（圣杯布局）
- 等分布局
（1）左侧固定，右侧自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.father {
display: flex;
height: 800px;
background-color: pink;
}
.left {
200px;
height: 300px;
background-color: red;
}
.right {
flex: 1;
height: 500px;
background-color: green;
}
</style>
<body>
<div class="father">
<div class="left"></div>
<div class="right"></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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
height: 800px;
background-color: pink;
margin-left: 200px;
margin-right: 200px;
}
.left {
200px;
height: 400px;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
.right {
200px;
height: 600px;
background-color: green;
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>（3）等分布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
overflow: hidden;
}
li {
25%;
float: left;
list-style: none;
background-color: pink;
height: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>弹性布局
弹性布局跟流布局很像，网页宽度不固定，使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。但弹性布局也有局限性，如果不对这种布局设置一个最小宽度，当用户缩小窗口到足够小时会造成布局严重错位。（插件flexible.js）。
rem 结合vw进行移动端适配
设计图为640px情况下：
dpr=2
640px/2=320px
100vw=320px
1vw=3.2px
100px/3.2px=31.25vw
font-size：31.25vw;
总结
设计图640px
html{ font-size：31.25vw；}
设计图750px
html{ font-size：26.67vw；}
移动端可以直接加*{box-sizing：border-box；}
不用再去对border和padding相减
移动端:
1、准备工作
1: meta标签的设置(禁止缩放)
2: dpr设备像素比
3: rem单位 vw单位
vw 结合 rem实现移动端适配
设计图为 640px html{ font-size:31.25vw; }
设计图为 750px html{ font-size:26.67vw; }
rem的设置流程:
设计图中的大小 / dpr / html的font-size == rem
2、分两列的内容 宽度写成百分比
flexible.js
流程：
1:引入插件 flexible.js
<script src="flexible.js"></script>
2:删除视口代码 mate
3：设计图的大小 /100==rem
网格grid布局
在我们的Web内容中，可以将其分割成很多个内容块，而这些内容块都占据自己的区域(regions)，可以将这些区域想像成是一个虚拟的网格。到目前为止，在一个模板中使用不同的结构标签，使用多个浮动和手动计算实现一个布局。这对于Web前端人员来说，这是一件痛苦之事。而网格布局将让你摆脱这样的困局，让你的布局方法变得非常简单与清晰。
网格布局给了我们一种方法——创建的结构与使用表格(table)布局并没有什么不同。然而，他是在CSS中实现而不是在HTML中实现，同时还可以依赖于媒体查询根据不同的上下文得新定义布局。这对于喜欢响应式设计的同学来说是一个绝对利好的消息。因为你不在需要再担心你的HTML结构而影响你的布局。
网格布局还可以让我们摆脱现在布局中存在的文档流限制，换句话说，你的结构不需要根据设计稿从上往上布置了。这也意味着您可以自由地更改页面元素位置。这最适合你在不同的断点位置实现你最需要的布局，而不再需要为响应你的设计而担心HTML结构的问题。
网格布局
1、触发网格布局：
display：grid；（父元素）
2、设置几行几列
grid-template-columns：；
grid-template-rows：；
根据属性值的个数确定行列数，属性值可以使百分比，也可以是具体像素
3、关键字 repeat（参数1，参数2）
参数1：重复几次
参数2：列宽或行高
如：grid-template-columns：repeat（3,200px）；
4、关键字 auto-fill
在repeat（auto-fill）：不确定重复多少次
当容器不确定的情况下，不能用
5、关键字 fr（片段，分数）
注意：列宽的分数
如：grid-template-columns：1fr，2fr，3fr；
6、minmaix（最小最大）
列宽最小不低于多大，最大不超过某一直
7、关键字
auto：自动填充
8、设置行间距和列间距
grid-row-gap：；
grid-colum-gap：；
grid-gap：；
9、规定元素占有的网格区域
grid-templete-areas：“a b c”“”；
注意：网格里面每个元素必须通过grid-area：； 指定名称
10、排列顺序
grid-auto-flow：；colum、row
11:设置每一个内容在单元格内部的对齐方式:
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items: <justify-items> <align-items> /*复合式写法*/
12:设置整个内容区域在容器里面的水平 | 垂直 对齐方式
justify-content:start | end | center | stretch | space-around |
space-between | space-evenly;
align-content: start | end | center | stretch | space-around |
space-between | space-evenly;
place-content: <justify-content> <align-content> /* 复合式写法 */；
13、添加在子元素
grid-column：；
gird-row：；
自适应布局
不同类别的设备创建不同的静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换调用相应的布局（页面元素位置发生改变而大小不变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
使用自适应布局时，首先在网页代码的头部，加入一样 viewport 标签：
<meta name="viewport" content="width=device-width, initial-scale=1" />
响应式布局
响应式布局的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、ipad等）都能显示出令人满意的效果。通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的展示效果，一般情况下是检测设备屏幕的宽度来实现。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /
width = device-width： 宽度等于当前设备的宽度
initial-scale： 初始的缩放比例（默认设置为1.0）
minimum-scale： 允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale： 允许用户缩放到的最大比例（默认设置为1.0）
user-scalable： 用户是否可以手动缩放
媒体查询
媒体类型和一个或多个检查媒体特性的条件表达式组成
语法（媒体查询一般放在 css代码最后面）
@media 媒体类型 and （ 表达式） and （表达式）{
选择符{css样式}
}
自适应布局和响应式布局对比：
不同点：
1.自适应需要开发多套界面； 响应式只需开发一套界面。
2. 自适应对页面的屏幕适配是在一定的范围； 响应式是一套页面同时兼容在 pc 端、平板和手机端的各个不同视口，而不是为每个终端做一个特定的版本，所以需要考虑的状态非常多。
相同点：
都是通过检测视口分辨率，使页面适应不同分辨率的视口。
伸缩布局（Flex box）
使用 css3 Flex 系列属性进行相对布局，用来为盒模型提供最大的灵活性。对于富媒体和复杂排版的支持非常大，但是存在兼容性问题。任何一个容器都可以指定为 flex 布局，行内元素也可以使用。
注意：设为 flex 布局后，子元素的 float、clear、vertical-align 属性将失效。
initial-scale： 初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）