从五种网页布局到八种常用布局四十二种CSS方法
- 1 列：一般用于移动端
- 2 列：一般用于平板设备
- 3 列：一般用于 PC 桌面设备
七、响应式布局（Responsive Layout）
通过使用媒体查询（Media Queries）和百分比单位等技术，根据不同的设备尺寸和屏幕宽度，调整页面布局和元素样式，以适应不同的设备。
八、圣杯布局（Holy Grail Layout）
圣杯布局（Holy Grail Layout）是一种常用的三列布局方式，其中中间列为主内容区域，左右两列为侧边栏。
九、sticky footer布局（底部栏目固定在底部的布局）
延伸？媒体查询和rem组合
rem单位大小是跟着html的字体大小来变化的，所以我们可以通过媒体查询设置不同设备的字体大小，从而实现不同设备不同效果。
页面中的宽度发生变化时，页面中的div高度也会随之变化：
vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位
1.首先分清楚，哪些是块级元素，哪些是行内块级元素等概念。子元素级加 display:inline-block可以在父元素加 text-align:center 实现水平居中。
2.对于定宽的子元素，直接margin:0 auto;实现水平居中。注意必须设置宽度。
3.开启定位的子元素，position:relative;通过left:50%;和margin-left:-150px.为负的宽度的一半。
4.定宽块级元素水平居中，position:relative;height:300px;子元素设置position:absolute;用left和right一起设置拉满屏幕，left:0;right:0;weight:300px;拉满屏幕后用margin:auto实现水平居中；
5.定宽块级元素水平居中，父元素position:relative；子元素开启定位：position:absolute;自动计算宽度。left:50%;transform:translatex(-50%);
6.flex方案。父元素display:flex;justify-content:center;子元素:margin:auto;
7.grid方案。父元素：display:grid;justify-items:center;justify-content:center;子元素margin:auto;
8.行内块级元素垂直居中。父级元素设置高度height:500px;子级元素设置为块inline-block元素，通过vertical-align:middle;实现居中。
9.定位垂直居中。父元素开启相对定位。 position:relative;子元素position:absolute;设置子元素magin-top:150px;top:50%即margin-top等于负高度的一半。
10.定位垂直居中方法2.父元素开启相对定位。 position:relative;子元素position:absolute;设置子元素高度垂直拉满后margin:auto;实现。height:300px;top:0;botton:0;margin:auto;
11.定位垂直居中多种场合。父元素开启相对定位。 position:relative;子元素position:absolute;子元素设置top:50%;transform:translateY(50%);
12.垂直居中flex方案。父元素parent开启flex布局。display:flex;一种是父元素设置align-items:center;一种是子元素设置margin:auto;
13.垂直居中grid方案。父元素parent设置成网格display:grid;父元素中设置align-items:center;或者父元素设置:align-content:center;
或者子元素设置margin:auto;或者子元素设置：align-self:center;
14.行内块级水平垂直居中。设置父元素parent行高等于容器高度line-height:500px;通过text-align:center;实现水平居中。将子元素设置为水平块级元素。display:inline-block;通过vertical-align:middle;实现垂直居中。
15.定位实现水平垂直居中。使子元素相对本元素定位。position:relative;子元素position:absolute;设置元素偏移量，值为50%减去宽或高度的一半。left:calc(50%-150%);top:calc(50%-150px)
16.定位实现水平垂直居中。使得子元素相对本元素定位。开启父子相离。position:relative;position:absolute;子元素设置left:50%top:50%;margin-left:-150px;margin-top:-150px;
17.定位实现水平垂直居中。开启父子相离。position:relative;position:absolute;设置边距拉满。top:0;left:0;right:0;bottom:0;通过margin:auto;实现水平垂直居中。
18.定位实现水平垂直居中。开启父子相离。position:relative;position:absolute;设置元素偏移量。left:50%;top:50%;通过反向偏移实现居中。transform:translate(-50%,-50%)
19.实现水平垂直居中的flex方案。父元素设置为display:flex;子元素通过margin:auto;实现。
或者通过在父元素设置justify-content以及align-items:center实现。
20.水平垂直的guid方案。父元素设置成display:grid;子元素设置：place-self：center;实现。或者其它在父元素或子元素设置两种组合。
或者在父元素设置items属性实现。align-items:center;justify-items:center;或缩写place-items:center;
或者在父元素设置content属性实现。align-content:center;justify-content:center;或者缩写：place-content:center;
在子元素设置margin:auto;或者设置self属性。align-self:center;justify-self:center;或者缩写：place-self:center;
两列布局
21.float+calc()完成左列定宽右列自适应。float:left;右边也开启浮动。float:left。宽度减去左列的宽度。width:calc(100%-200px);
22.float+margin-left:左列定宽右列自适应。float:left;左列开启浮动，右边不开启浮动。通过外边距的方式使容器的左边有200px;margin-left:200px;
23.absolute+margin-left:左列定宽右列自适应。左列开启定位脱离文档流。position:absolute;右边通过外边距的方式使得该容器的左边有200px。margin-left:200px;
24.float+overflow完成左列定宽右列自适应。左侧元素开启浮动。float:left;右侧自适应元素设置overflow会创建一个bfc完成自适应。overflow:hidden;
25.flex方案，父元素container开启flex即display:flex；右侧设置flex属性为1.表示flex-grow:1;即该项占所有剩余空间。
26.grid方案，通过grid设置grid-template-columns属性。即display:grid，将其划分为两行，其中一列有本身宽度决定，一列占剩余宽度。设置grid-template-columns:auto 1fr;
三列布局
27.通过float实现，左列容器开启左浮动float，中间自适应元素设置overflow会创建一个bfc完成自适应。overflow:hidden;右侧容器开启右浮动。float:right;
28.通过float实现，左列容器开启左浮动float，中间自适应元素宽度为父级元素减去两个定宽的列即 width:cacl(100%-400px);overflow:hidden;右侧容器开启右浮动。float:right;
29.通过position实现，左右两列脱离文档流，并通过偏移的方式到达自己的区域。position:absolute;left:0;top:0;
使中间自适应的宽度为父级容器减去两个定宽的列。width:calc(100%-400px);通过外边距将容器往内缩小。margin-right:200px;margin-left:200px;
右侧元素靠边。position:absolute;right:0;top:0;
30.通过flex方案实现。container设置disolay:flex；右侧设置成flex:1;表示flex-grow:1;即该项占所有剩余空间。
31.Grid方案。container设置display:grid；将其划分为两行，其中一列有本身宽度决定，一列占剩余宽度。grid-template-columns:auto 1fr auto;
等分布局
32.浮动+百分比方案。item开启浮动float:left；每个元素占25%的宽度。width:25%,float:left；
33.行业块级+百分比方式。设置每个元素为行业块级元素，每个元素占24.5%的宽度。设置item内元素为行内块级元素display:inline-block;并设置宽度为width=24.5%;因为行内块级元素有一些类似于边距的几个像素，导致各占25%会超出容器。
34.flex方案。container开启flex布局，display:flex；子元素item设置每个元素占相同的宽度。flex:1;
35.grid方案。container开启grid布局，display:grid；设置grid-template-columns:repeat(4,1fr);原理是使用repeat函数生成代码grid-template-columns:1fr 1fr 1fr 1fr;
sticky footer布局（底部栏目固定在底部的布局）
36.绝对定位方式。设置最外层容器为100%。即html,body(height:100%;) 其次，让子元素元素相对于容器元素进行定位，并设置容器元素最小高度为100%。main{position:relative;min-height:100%;}
在中间区域设置padding-bottom为footer的高度即padding-bottom:100px;由于开启了绝对定位，宽度成了自适应，设置为100% bottom:0；始终保持底部。footer{position:absolute;width:100%;bottom:0;}
37.使用calc函数实现。这里的中间部分的容器最少为视口宽度的100%；头部和底部两部分的高度即可完成该功能。container{min-height:calc(100vh-200px);}。此种方法最简单。
38.flex方案。main开启flex布局。display:flex;将元素布局方向修改为垂直排列，flex-flow:column;设置最小高度为当前视口，使不管中间部分有多高，始终可以保持在底部。min-height:100vh;设置中间部分自适应。container{flex:1;}
39.grid方案。main开启grid布局。display:grid；设置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部。grid-template-rows:auto 1fr auto;min-height:100vh;
全屏布局顶部和底部固定，导航固定，内容自适应。
40.使用calc函数实现。通过calc函数计算出容器高度，content溢出隐藏。overflow:hidden;计算高度height:calc(100vh-200px);设置左边高height:100%;右边设置.right{overflow:auto;height:100%;}.right-in{height:500px;}假设容器内有500px的元素。
41.flex方案。开启flex将子元素布局方向修改为垂直排列。.container{display:flex;flex-flow:column};如果超出则出现滚动条overflow:auto;设置中间部分自适应flex:1;即content{overflow:auto;flex:1;}.假设容器内元素高度500px.。.right-in{height:500px;}
42.grid方案。通过template属性实现。开启grid布局display:grid;设置grid-template-rows:auto 1fr auto;内容超出则滚动条。.content{overflow:auto;}内部元素高度right-in{height:500px;}
