css基础之布局 css

【css基础之布局】css的布局：float，position，flex、transform，grid，::after::before
两栏布局

leftleftleftleftleftleftleft rightrightrightrightrightright

第一种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

水平垂直自适应布局

.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

水平垂直自适应布局

.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大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。。