Sticky Footer
经典的上-中-下布局。
当页面内容高度小于可视区域高度时，footer 吸附在底部；当页面内容高度大于可视区域高度时，footer 被撑开排在 content 下方
<body>
<header>HEADER</header>
<article>CONTENT</article>
<footer>FOOTER</footer>
</body>body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
article {
flex: auto;
}Fixed-Width Sidebar
在上-中-下布局的基础上，加了左侧定宽 sidebar。
<body>
<header>HEADER</header>
<div class="content">
<aside>ASIDE</aside>
<article>CONTENT</article>
</div>
<footer>FOOTER</footer>
</body>body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex: auto;
display: flex;
}
.content article {
flex: auto;
}Sidebar
左边是定宽 sidebar，右边是上-中-下布局。
<body>
<aside>ASIDE</aside>
<div class="content">
<header>HEADER</header>
<article>CONTENT</article>
<footer>FOOTER</footer>
</div>
</body>body {
min-height: 100vh;
display: flex;
}
aside {
flex: none;
}
.content {
flex: auto;
display: flex;
flex-direction: column;
}
.content article {
flex: auto;
}Sticky Header
还是上-中-下布局，区别是 header 固定在顶部，不会随着页面滚动。
<body>
<header>HEADER</header>
<article>CONTENT</article>
<footer>FOOTER</footer>
</body>body {
min-height: 100vh;
display: flex;
flex-direction: column;
padding-top: 60px;
}
header {
height: 60px;
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 0;
}
article {
flex: auto;
height: 1000px;
}Sticky Sidebar
左侧 sidebar 固定在左侧且与视窗同高，当内容超出视窗高度时，在 sidebar 内部出现滚动条。左右两侧滚动条互相独立。
<body>
<aside>
ASIDE
<p>item</p>
<p>item</p>
<!-- many items -->
<p>item</p>
</aside>
<div class="content">
<header>HEADER</header>
<article>CONTENT</article>
<footer>FOOTER</footer>
</div>
</body>body {
height: 100vh;
display: flex;
}
aside {
flex: none;
width: 200px;
overflow-y: auto;
display: block;
}
.content {
flex: auto;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.content article {
flex: auto;
}
来源：https://github.com/meikidd/flex-layout
rem布局原理
rem 是（根）字体大小相对单位，也就是说跟当前元素的font-size没有关系，而是跟整个body的font-size有关系，物理像素是硬件的一个实际像素；而逻辑像素是我们在网页设计中使用的像素
布局和WEB性能
在初始页面加载问题之外，“布局颠簸”是我在动态Web应用程序中看到的最常见的性能问题。 对于单页应用程序尤其如此，它可以动态构建和销毁视图
网站首页设计常见的6种布局方式
看到太多的网页设计师发布企业站的个人作品，设计中总是摆脱不了大框套小框的设计布局思路，不加思索的跳入单一的网页布局形式中，于是就有了把企业站常用的页面布局方式总结一下的想法
前端之移动页面布局
Native App 原生app手机应用程序使用原生的语言开发的手机应用，Android系统用的是java，iOS系统用的是object-C；Hybrid App 混合型app手机应用程序混合使用原生的程序和html5页面开发的手机应用
浮动，定位，flex布局
正常的布局流是将元素放置在浏览器视口内的系统：块级元素（display:block）在视口中垂直布局——每个都将显示在上一个元素下面的新行上，并且它们的外边距将分隔开它们。
CSS三栏布局的5种方法详解
假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应.将浏览器窗口压窄，可以看到变化。由于上面的代码中设置的高度是min-width，而不是设置的固定高度width，所以现在看到的也就是高度不固定的情况。
CSS自定义属性+CSS Grid网格实现超级的布局能力
我在工作中使用CSS Grid已经有几个月了，我非常喜欢它在页面布局时给我的灵活性。这么长时间以来，我们一直没有一个真正的网格布局解决方案——用浮动和flexbox总是有各种各样的限制。但现在，我真的无法想象没有Grid的CSS！
css Grid布局
Gird布局是什么？Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格 ; 能够将网页分成具有简单属性的行和列来完成我们需要的网格布局
css实现div垂直水平居中的2种常用方法
利用vertical-align：middle进行垂直方向上的居中对齐，此方法需要满足的条件；这种方法比较暴力，利用定位解决：父元素开启相对定位，子元素绝对定位
前端必懂之Sticky Footer(粘性页脚)
Sticky Footer是css的一种布局场景。页脚footer永远固定在页面的底部，页面内容不够长的时候页脚黏在视窗底部，内容足够长时会被向下移动。老式门户网站由于内容过短常常版权页脚前移