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
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：类似于绝对定位的方式.
CSS flex布局入门
都知道html正常的文档流是自上而下排列的，块级元素会像下左图一样排列。但是项目中尤其是移动端项目会有很多需求的排版方式是要求由左到右排列。虽然可以通过dispaly：inline-block、float、position完成排版，但是需要对距离进行计算，计算起来十分麻烦
实现三栏布局的5种方式
用五种方式实现三栏布局。高度已知，左右两边宽度300px。中间自适应。看到这个题目，我们首先会想起2-3种解决办法。今天我们就来挖一挖到底有多少种方法实现三栏布局。
css实现内容不相同的左右两个div等高
现在有两个div左右排列，但是两个div的内容不相同，如何设置两个div的css做到在两个div等高排列呢？下面是3种实现方法，觉得很有代表性，所以索性收藏起来。通过父元素设置 overflow:hidden