css实现各种布局及方法

1：pc端网页
我们做pc端网页，一定要保证网页整体是居中显示，并且不能出现横向滚动条，所以我们可以在所有部位设置一个class为middle的div，然后每个部分都让其居中显示，然后网页的内容都在.middle里面布局即可。一般需要背景的话，我们给外面的大盒子（宽度百分百的盒子）即可。
比如case（这里指首页中的案例）部分。我们可以命名
为index_case,然后在里面再套一个class为middle的居中div，所有的布局，在middle中进行。
index_case的宽度应该设置为100%，而.middle的宽度就是设计图里的给定宽度，这个时候将.middle居中即可。

2：响应式网页
首先，我们需要写一段meta标签语句。

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

这段代码的意思是禁止用户缩放，避免出现滚动条，导致所分区间无用

接下来我们使用媒体查询分好我们需要做的响应式区间。
例如我们想做手机版，pad版，电脑版三个区间的响应式，此时我们的媒体查询可以大致作以下区间分布
@media screen and (min-width:320px) and (max-width:750ox){} ------------------------- 手机版
@media screen and (min-width:751px) and (max-width:1024ox){} ---------------------- pad版
@media screen and (min-width:1025px) {} ----------------------------------------------- pc版

然后由于我们不想让pc端无限拉升，可以定一个固定的宽度，然后居中，例如我们定为1200
那么还有个区间是pc版区间的子区间，防止pc端无线拉升，区间应该写成如下。
@media screen and (min-width:1230px) {
.middle{width:1200px;margin-left:auto;margin-right:auto;}
} ----------------------------------------------- pc版
这句话的意思是当宽度大于1230px时，.middle的盒子宽度固定为1200（.middle就是pc端中居中的那个盒子，响应式中也应该有这个盒子，但是除了pc端，其他端不用写固定宽度和居中，可以不用管，所以这里只在这个pc版的子区间写上如上代码）。这里写1230之后才为1200px，是因为如果刚好1200时，确定里面的.middle为1200px，右边出现的滚动条（高度很高时，右边会出现滚动条）会占一部分宽度导致浏览器可用宽度将没有1200，此时固定里面的1200将导致出现横向滚动条。

3：移动端布局
做移动端布局首先也是要在head里面写一个meta标签（同响应式）

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

然后我们不需要.middle居中的盒子，记住删除初始化中的.middle

然后我们在初始化的代码中做好等比缩放。
html{font-size:calc(100vw/设计图的百分之一)}（此代码的意思是将根元素的字体大小定义为设计图1px的100倍，主要是为了解决一些小bug，如果定义为1:1,根元素1px的字体大小会自动被浏览器设置为最小8px像素，所以我们设计为100:1,那么我们根元素的初始字体大小就位100px；这样就不存在此bug了，此时如果我们在设计图中量的1px，我们将其除以100,就是我们实际代码中的0.01rem了，此时可以无bug设计成1：1的实际图，由于100vw是可变的，所以我们实现了等比缩放）等比缩放是移动端的根本。移动端里面所有的像素我们都用rem算。

然后移动端里面我们还需要注意的一个是语义化标签，即h5新增的为移动端打造的标签
header头部 与div无异，对浏览器更友好，一个页面只能用一次
footer脚部 同header
section区块，可以多次使用，例如我们有一个case区间，我们可以设置一个section，将其class设置为case即可（如果有多个页面，我们需要加上页面前缀，index_case）
article.这是一个类似于放文章的标签，里面可以放标题，图片，文章。
aside侧边栏，放在侧边的广告或者啥
nav导航标签。写导航可以用nav标签。

4：三栏布局（两栏布局方法同三栏布局）
三栏布局在pc端的 3中方法

1：先左右两边盒子浮动。然后中间的盒子飘上去（注意在html中的结构，应该是左边盒子和右边盒子写在中间盒子的上面，先渲染先漂浮留出下方空间，中间盒子再飘上去，不然会出问题）
飘上去之后设置overflow:hidden（给中间盒子设置）触发BFC规则即可

2：先左右两边盒子浮动。然后中间的盒子飘上去（注意在html中的结构，应该是左边盒子和右边盒子写在中间盒子的上面，先渲染先漂浮留出下方空间，中间盒子再飘上去，不然会出问题）
飘上去之后给中间盒子设置左右边距（margin-left和margin-right）对应为左右盒子宽度即可

3：
可以使用position:absolute定位。不给宽度，设置左边的left为左边盒子的距离，设置右边的right为右边盒子的距离即可

5:圣杯布局
首先我们固定上方head和下方foot的位置，上方head可以直接写，下方foot建议定位到下方（fixed或者absolute）然后让中间的高度自适应（此处只能使用Position：absolute,离上方的top为上方盒子高度，离下方的bottom为下方的盒子高度）实现高度自适应后，我们在中间的盒子里面完成3栏布局即可，
三栏布局实现方式随意
1：左边的盒子左浮动，宽度固定，高度百分百即可
2：右边的盒子右浮动，宽度固定，高度百分百
3：中间的盒子高度百分百并超出隐藏，然后可以使用overflow：hiddenc触发中间盒子的bfc即可实现三栏布局，（还可以使用之前介绍的三栏布局中的另外两种方法）
最后实现圣杯布局。