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
CSS五种方式实现 Footer 置底
页脚置底（Sticky footer）就是让网页的footer部分始终在浏览器窗口的底部。当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。
响应式布局和自适应布局详解
自适应布局给了你更多设计的空间，因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较小，但仍然也算做差异。它使得把握设计最终效果变得更难，同样让响应式布局更加的难以测试和预测
前端响应式布局
Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
弹性（Flex）布局的使用
最近我参与实施的两个项目中，一个页面交互复杂，而另一个相对传统，两个项目相比之下凸显出了页面布局样式的时间占比不可忽视，使用了弹性布局代码量精简了不少
CSS：BFC规则的应用自适应两栏布局
两栏布局是写页面时经常用到的，要想实现两栏布局，就需要明白BFC规则，Block formatting context，直译为“块级格式化上下文”，可以简单的理解它为一个独立的区域，把区域内部元素与外部元素区分开，两者互不干扰。
css怎么让文字竖着排列？
css可以使用css样式writing-mode：tb-rl来设置文字竖着排列。writing-mode属性设置或检索对象的内容块固有的书写方向。
css3 弹性盒布局的使用-Flex
css3 的Flex弹性盒的布局是一个用于页面布局的全新CSS3模块功能。它可以把列表放在同一个方向（从左到右或从上到下排列），并且让这些列表能延伸到占用可用的空间。较为复杂的布局可以通过嵌套一个伸缩容器
CSS实现自适应两栏布局方法
浮动+margin第一种： 左侧栏固定宽度向左浮动，右侧主要内容则用margin-left留出左侧栏的宽度，默认宽度为auto，自动填满剩下的宽度。 第二种：左边绝对定位（脱离文档流，不占位置）
CSS中的圣杯布局与双飞翼布局
什么是圣杯布局?所谓圣杯布局就是用于实现一个两侧宽度固定，中间宽度自适应的三栏布局;什么是双飞翼布局?和圣杯布局一样，双飞翼布局也是用于实现一个两侧宽度固定，中间宽度自适应的三栏布局，就是布局的形式上存在差异
网站设计和布局的重要性和过程
网站的设计是吸引客户的非常重要的因素。如今，互联网上存在着很多竞争，每个人都可以点击其客户，但是只有少数人能吸引他们。这通常是由于网站给人的第一印象。