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
css3 弹性盒布局的使用-Flex
css3 的Flex弹性盒的布局是一个用于页面布局的全新CSS3模块功能。它可以把列表放在同一个方向（从左到右或从上到下排列），并且让这些列表能延伸到占用可用的空间。较为复杂的布局可以通过嵌套一个伸缩容器
CSS实现自适应两栏布局方法
浮动+margin第一种： 左侧栏固定宽度向左浮动，右侧主要内容则用margin-left留出左侧栏的宽度，默认宽度为auto，自动填满剩下的宽度。 第二种：左边绝对定位（脱离文档流，不占位置）
网站设计和布局的重要性和过程
网站的设计是吸引客户的非常重要的因素。如今，互联网上存在着很多竞争，每个人都可以点击其客户，但是只有少数人能吸引他们。这通常是由于网站给人的第一印象。
Web布局：display属性
经过 CSS盒模型 和视觉格式化模型两个章节中的学习，我们有了一个清晰的概念。即 在CSS中插何一个元素都是一个盒子，甚至是文本节点也是一个盒子（匿名盒子）；都有自己的视觉格式化（不同的盒子）
IOS 浏览器页面布局错位（如：点不到）的分析与解决
IOS 浏览器软键盘的拉起与收缩、微信 IOS 浏览器底部导航条的显示与隐藏，很容易导致页面布局错位（相对窗体的绝对定位元素）：明明按钮在这里，却要在上面一点儿点击屏幕才能点到它
移动端布局方案，简单高效，完美适配各种机型
rem布局：使用rem作为元素大小的单位，rem=fount-size，根据不同的屏幕宽度设置不同的fount-size值，这样元素也会跟着屏幕变大或变小，第二步：使用postcss-px2rem-exclude将px转换为rem
flex的各种布局
Flex是Flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。任何一个容器都可以指定为Flex布局。
响应式布局
Responsive web page响应式布局/自适应网页，可以根据浏览器设备不同（pc，pad，phone）而自动的更改布局，图片，文字效果，不会影响用户体验
css如何实现n宫格布局?
现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在.带边框, 先解释一个小技巧, 如何实现正方形, 保证看一遍就会, 结论就是:padding的值如果是百分比
css之定位
定位是css当中一种操作html元素布局的方案;属性position:static：默认值，无特殊定位，对象遵循HTML原则；absolute：绝对定位，将对象从文档流中完全拖离出来;fixed：类似于绝对定位的方式.