needs to be displayed in a scrollable state, do not declare overflow:auto to allow the container to scroll adaptively. Doing so may cause other problems The formatting context may cause adaptive scrolling to fail or produce other unknown effects. You need to insert a within and declare it as follows. div {
overflow: hidden;
height: 100%;
}Two-column layout
ClassicTwo-column layout is composed of left and right columns, and its characteristics areThe width of one column is fixed, The width of the other column is adaptive and The height of the two columns is fixed and equal. The following takes the left column width as fixed and the right column width as adaptive as an example, and vice versa.
<div class="two-column-layout">
<div class="left"></div>
<div class="right"></div>
</div>
float margin-left/rightLeft column declaration
float:leftand fixed width, Since float causes nodes to deflow, the right column needs to declare margin-left as the width of the left column to ensure that the two columns do not overlap.
.two-column-layout {
width: 400px;
height: 400px;
.left {
float: left;
width: 100px;
height: 100%;
background-color: #f66;
}
.right {
margin-left: 100px;
height: 100%;
background-color: #66f;
}
}
overflow floatThe left column declares the same as above, and the right column declares
overflow:hidden to form a BFC areawith Isolated from the outside world.
.two-column-layout {
width: 400px;
height: 400px;
.left {
float: left;
width: 100px;
height: 100%;
background-color: #f66;
}
.right {
overflow: hidden;
height: 100%;
background-color: #66f;
}
}
flexIt will be more concise to use
flex. The left column declares a fixed width, and the right column declares flex:1adaptive width.
.two-column-layout {
width: 400px;
height: 400px;
.left {
float: left;
width: 100px;
height: 100%;
background-color: #f66;
}
.right {
overflow: hidden;
height: 100%;
background-color: #66f;
}
}
Three-column layout
ClassicThree-column layout is composed of left, middle and right columns, and its characteristics are: The width of two consecutive columns is fixed, the width of the remaining column is adaptive and the height of the three columns is fixed and equal. The following takes the fixed width of the left middle column and the adaptive width of the right column as an example, and vice versa. The overall implementation principle is consistent with the above two-column layout.
<div class="three-column-layout">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>In order to make the width of the right column adaptively calculated, the float margin-left method is not used. If you use margin-left It must also be calculated based on the width of the left middle column.
overflow float.three-column-layout {
width: 400px;
height: 400px;
.left {
float: left;
width: 50px;
height: 100%;
background-color: #f66;
}
.center {
float: left;
width: 100px;
height: 100%;
background-color: #66f;
}
.right {
overflow: hidden;
height: 100%;
background-color: #3c9;
}
}
flex
.three-column-layout {
display: flex;
width: 400px;
height: 400px;
.left {
width: 50px;
background-color: #f66;
}
.center {
width: 100px;
background-color: #66f;
}
.right {
flex: 1;
background-color: #3c9;
}
}圣杯布局/双飞翼布局
经典的圣杯布局和双飞翼布局都是由左中右三列组成，其特点为左右两列宽度固定、中间一列宽度自适应和三列高度固定且相等。其实也是上述两列布局和三列布局的变体，整体的实现原理与上述N列布局一致，可能就是一些细节需注意。
圣杯布局和双飞翼布局在大体相同下也存在一点不同，区别在于双飞翼布局中间列需插入一个子节点。在常规实现方式里也是在这个中间列里做文章，如何使中间列内容不被左右列遮挡。
-
<li>相同
-
<li>中间列放首位且声明其宽高占满父节点
<li>被挤出的左右列使用
float和margin负值将其拉回与中间列处在同一水平线上
-
<li>圣杯布局：父节点声明
padding为左右列留出空位，将左右列固定在空位上
<li>双飞翼布局：中间列插入子节点并声明margin为左右列让出空位，将左右列固定在空位上
圣杯布局float + margin-left/right + padding-left/right
由于浮动节点在位置上不能高于前面或平级的非浮动节点，否则会导致浮动节点下沉。因此在编写HTML结构时，将中间列节点挪到右列节点后面。
<div class="grail-layout-x">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>.grail-layout-x {
padding: 0 100px;
width: 400px;
height: 400px;
.left {
float: left;
margin-left: -100px;
width: 100px;
height: 100%;
background-color: #f66;
}
.right {
float: right;
margin-right: -100px;
width: 100px;
height: 100%;
background-color: #66f;
}
.center {
height: 100%;
background-color: #3c9;
}
}双飞翼布局float + margin-left/right
HTML结构大体同上，只是在中间列里插入一个子节点<div>。根据两者区别，CSS声明会与上述圣杯布局有一点点出入，可观察对比找出不同地方。<pre class="brush:html;toolbar:false;"><div class="grail-layout-y">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<div></div>
</div>
</div></pre><pre class="brush:css;toolbar:false;">.grail-layout-y {
width: 400px;
height: 400px;
.left {
float: left;
width: 100px;
height: 100%;
background-color: #f66;
}
.right {
float: right;
width: 100px;
height: 100%;
background-color: #66f;
}
.center {
margin: 0 100px;
height: 100%;
background-color: #3c9;
}
}</pre><blockquote><p>圣杯布局/双飞翼布局flex</p></blockquote>
<p>使用flex实现<code>圣杯布局/双飞翼布局可忽略上述分析，左右两列宽度固定，中间列宽度自适应。
<div class="grail-layout">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>.grail-layout {
display: flex;
width: 400px;
height: 400px;
.left {
width: 100px;
background-color: #f66;
}
.center {
flex: 1;
background-color: #3c9;
}
.right {
width: 100px;
background-color: #66f;
}
}均分布局
经典的均分布局由多列组成，其特点为每列宽度相等和每列高度固定且相等。总体来说也是最简单的经典布局，由于每列宽度相等，所以很易找到合适的方式处理。
<div class="average-layout">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>.one {
background-color: #f66;
}
.two {
background-color: #66f;
}
.three {
background-color: #f90;
}
.four {
background-color: #09f;
}float + width
每列宽度声明为相等的百分比，若有4列则声明width:25%。N列就用公式100 / n求出最终百分比宽度，记得保留2位小数，懒人还可用width:calc(100% / n)自动计算呢。
.average-layout {
width: 400px;
height: 400px;
div {
float: left;
width: 25%;
height: 100%;
}
}flex
使用flex实现会更简洁。节点声明display:flex后，生成的FFC容器里所有子节点的高度都相等，因为容器的align-items默认为stretch，所有子节点将占满整个容器的高度。每列声明flex:1自适应宽度。
.average-layout {
display: flex;
width: 400px;
height: 400px;
div {
flex: 1;
}
}居中布局
居中布局由父容器与若干个子容器组成，子容器在父容器中横向排列或竖向排列且呈水平居中或垂直居中。居中布局是一个很经典的问题，相信大家都会经常遇到。
在此直接上一个目前最简单最高效的居中方式。display:flex与margin:auto的强行组合，同学们自行体会。
<div class="center-layout">
<div></div>
</div>.center-layout {
display: flex;
width: 400px;
height: 400px;
background-color: #f66;
div {
margin: auto;
width: 100px;
height: 100px;
background-color: #66f;
}
}自适布局
自适布局指相对视窗任何尺寸都能占据特定百分比的占位布局。自适布局的容器都是根据视窗尺寸计算，即使父节点或祖先节点的尺寸发生变化也不会影响自适布局的容器尺寸。
搭建自适布局就离不开视窗比例单位。在CSS3里增加了与viewport相关的四个长度单位，随着时间推移，目前大部分浏览器对这四个长度单位都有较好的兼容性，这也是未来最建议在伸缩方案里使用的长度单位。
-
<li>
1vw表示1%视窗宽度
<li>
1vh表示1%视窗高度
<li>
1vmin表示1%视窗宽度和1%视窗高度里最小者
<li>
1vmax表示1%视窗宽度和1%视窗高度里最大者
视窗宽高在JS里分别对应window.innerWdith和window.innerHeight。若不考虑低版本浏览器兼容性，完全可用一行CSS代码秒杀所有移动端的伸缩方案。
/* 基于UI width=750px DPR=2的网页 */
html {
font-size: calc(100vw / 7.5);
}上述代码使用calc()实现font-size的动态计算。calc()是自适布局里的核心存在，无它就不能愉快地实现自适布局所有动态计算了。
calc()用于动态计算单位，数值、长度、角度、时间和百分比都能作为参数。由于执行数学表达式后返回运算后的计算值，所以可减少大量人工计算甚至无需人工计算。
calc()饥不择食，所有计量单位都能作为参数参加整个动态计算。
-
数值：
整数、浮点数 -
长度：
px、em、rem、vw、vh等 -
角度：
deg、turn -
时间：
s、ms -
百分比：
%
calc()虽然好用，但新手难免会遇到一些坑，谨记以下特点，相信就能玩转calc()了。
-
<li>四则运算：只能使用
+、-、*、/作为运算符号
<li>运算顺序：遵循加减乘除运算顺序，可用()提升运算等级
<li>符号连接：每个运算符号必须使用空格间隔起来
<li>混合计算：可混合不同计量单位动态计算
第三点尤为重要，若未能遵守，浏览器直接忽略该属性。
上述font-size:calc(100vw / 7.5)其实就是根据设计图与浏览器视窗的比例动态计算的font-size：100/750 = x/100vw。
在SPA里有遇过因为有滚动条或无滚动条而导致页面路由在跳转过程里发生向左或向右的抖动吗？这让强迫症患者很难受，此时可用calc()巧妙解决该问题。
.elem {
padding-right: calc(100vw - 100%);
}不直接声明padding-right为滚动条宽度是因为每个浏览器的默认滚动条宽度都可能不一致。100vw是视窗宽度，100%内容宽度，那么100vw - 100%就是滚动条宽度，声明padding-right用于保留滚动条出现的位置，这样滚动条出不出现都不会让页面抖动了。
有了calc()做保障就可迅速实现一些与视窗尺寸相关的布局了。例如实现一个视窗宽度都为50%的弹窗。
<div class="modal">
<div class="modal-wrapper"></div>
</div>.modal {
display: flex;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, .5);
&-wrapper {
width: 50vw;
height: 200px;
background-color: #f66;
}
}当然使用calc()也不一定结合视窗比例单位计算。例如自适布局已知部分节点高度，不想手动计算最后节点高度但又想其填充布局剩余空间。
<ul class="selfadaption-layout">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
</ul>.selfadaption-layout {
width: 200px;
height: 567px;
.box-1 {
height: 123px;
background-color: #f66;
}
.box-2 {
height: 15%;
background-color: #3c9;
}
.box-3 {
height: calc(100% - 123px - 15%);
background-color: #09f;
}
}吸附布局
吸附布局指相对视窗任何滚动都能占据特定位置的占位布局。视窗滚动到特定位置，布局固定在该位置，后续不随视窗滚动而滚动。该布局产生的效果俗称吸附效果，是一种常见网页效果。譬如吸顶效果和吸底效果都是该范畴，经常在跟随导航、移动广告和悬浮提示等应用场景里出现。
In the jQuery era there were many adsorption effect plug-ins, and now the three major front-end frameworks also have their own third-party adsorption effect components. They all have a common implementation principle: monitor the scroll event, determine the location range of scrollTop and target node, and if the conditions are met, target node's position is declared as fixed to position the target node relative to the window, making the user appear to be nailed to the specified position in the window.
There are a lot of JS codes to achieve the adsorption effect found online, not to mention that the author likes to play with CSS, so I won’t post the relevant JS code here. Here we recommend a rarely seen and rarely used CSS property position:sticky. A simple two lines of core CSS code can complete the functions of more than ten lines of core JS code, so why not do it.
A brief reviewpositionAttribute value, I won’t go into how to use it, everyone should be familiar with it.
| Value | Function | Version |
|---|---|---|
| inherit | Inherit |
2 |
| ##static | Standard flow | 2|
| relative | Relative positioning | 2|
| absolute | Absolute positioning | 2|
| fixed | Fixed positioning | 2|
| sticky | ##sticky positioning
|
