css的布局：float，position，flex、transform，grid，::after::before
两栏布局
<div class="main1"> <div class="box-m1 m1-left"> <p>leftleftleftleftleftleftleft</p> </div> <div class="box-m1 m1-right"> <p>rightrightrightrightrightright</p> </div> </div>第一种float and absolute and float+BFC 上面是float+BFC
.main1 { word-break: break-all; } .m1-left { float: left; margin-right: 20px; background-color: red; } .m1-right { overflow: hidden; /*左侧元素会因为浮动盖在右侧元素上，因而要将右侧元素变成BFC*/ zoom: 1; background-color: gray; }第二种flex IE10及以上 其余没故障
.main1 { display: flex; word-break: break-all; } .m1-left{ margin-right: 20px; background-color: red; } .m1-right{ flex: 1; background-color: gray; } 第三种grid 基于网格
.main1 { display:grid; grid-template-columns:auto 1fr; grid-gap:20px; word-break: break-all; } .m1-left{ margin-right: 20px; background-color: red; } .m1-right{ background-color: gray; }Flexbox 和Grid
Flexbox用于一维布局，Grid用于二维布局，即如果在一个方向上排列内容项用flex，
如果要在两个维度（包含行和列）中创立整个布局，那么应该应用CSS Grid，如9宫格等
两者之间的另一个外围差别是Flexbox基于内容，而Grid基于布局
三栏布局
1浮动 2相对定位 3.flexbox 4.display:table 5.grid 6.圣杯布局 7.双飞翼布局
其中flex:1设置在center上即可。
grid：左右留出200px 两头自适应
.main1 { display: grid; width: 100%; grid-template-columns: 200px auto 200px; }其余计划不列举了，毕竟当初都风行Flexbox 和Grid
垂直程度居中元素
margin | absolute-transform:translate
<div class="box1"> 程度垂直自适应布局 </div> .box1 { width: 200px; margin: 50% auto; border: 1px solid yellowgreen; } .box1 { position: absolute; top: 50%; right: 50%; width: 100px; height: 100px; background-color: pink; transform: translate(-50%,50%); }flex
<div class="box2"> <div class="inner"> 程度垂直自适应布局 </div> </div>.box2{ width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; }/*table*/.box2{ width: 500px; height: 200px; display: table-cell; vertical-align: middle; text-align: center; }/*grid*/.box2{ width: 100vw; height: 100vh; display: grid; align-items:center; justify-content: center; }视口单位(Viewport units)
依据CSS3标准，视口单位次要包含以下4个：
1.vw：1vw等于视口宽度的1%。 2.vh：1vh等于视口高度的1%。 3.vmin：选取vw和vh中最小的那个。 4.vmax：选取vw和vh中最大的那个。vh and vw：绝对于视口的高度和宽度，而不是父元素的（CSS百分比是绝对于蕴含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。
比方：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px。
vmax绝对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。
vmin绝对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。
什么是视口？
在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在挪动端，它波及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（现实视口）。
视口单位中的“视口”，桌面端指的是浏览器的可视区域；挪动端指的就是Viewport中的Layout Viewport, “视区”所指为浏览器外部的可视区域大小，即window.innerWidth/window.innerHeight大小，不蕴含任务栏标题栏以及底部工具栏的浏览器区域大小。。