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
响应式布局
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
html/css弹性布局的几大常用属性详解
弹性布局的名称概念：1、容器：需要添加弹性布局的父元素；项目：弹性布局容器中的每一个子元素，称为项目。2、主轴：在弹性布局中，我们会通过属性规定水平/垂直方向（flex-direction）为主轴；与主轴垂直的另一方向，称为交叉轴。
css页面常用布局技巧
居中布局；水平居中（宽度自适应）；垂直居中（高度自适应）；水平垂直居中；多列布局；左边定宽，右边自适应；左边不定宽，右边自适应；等宽布局；等高布局
瀑布流的实现
现在很多网站都会使用瀑布流的一个效果，什么是瀑布流呢，用在哪些地方呢？大概就是这样的一个效果，一般用于无法保证图片大小的网站。先看下布局+css
底部粘连(stiky footer)布局
在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送