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