1.左右布局
双浮动|左右布局：
<figcaption style="margin-top: calc(0.666667em); padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">双浮动，左右布局，右边自适应</figcaption>
双浮动：
- 在子元素下面添加float，在父元素上面加上clear，清除浮动效果后父元素的塌陷。
- 右边div加上%显示，可以根据页面的伸缩而拉伸，即为自适应。
2.左中右布局：
- 左中右布局布局与左右布局类似，就是中间多了一栏，也可以称为三栏布局。
- 首先在HTML结构上，相比左右布局，多了一个div，因为要多一个容器来容纳“中"。
<figcaption style="margin-top: calc(0.666667em); padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">添加了多一个div来容纳中“蓝色”，子元素设置浮动，父元素清除</figcaption>
- 在子元素上设置浮动，父元素清除，记得要清除，这是浮动属性会容易造成bug的原因。
- 也就是比左右布局多了一条div，跟float，其他的差别不大
3.水平|垂直居中
我们先来说说水平居中，水平居中有很多种，常用的有：一段文字在一个块级元素里面水平居中，一个块级元素在一个页面里面水平居中。
我们一个一个来，先来说说：
- 行内元素文字在一个块级元素里面水平居中
<figcaption style="margin-top: calc(0.666667em); padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">text-align:center</figcaption>
- 一个块级元素在一个页面里面水平居中：
<figcaption style="margin-top: calc(0.666667em); padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">margin: 0 auto; 上下为0，左右自适应</figcaption>
直接通过设置外边距使一个块级元素在页面水平居中。
垂直居中：
行内元素的垂直居中：
<figcaption style="margin-top: calc(0.666667em); padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">直接设置line-height属性与块级元素高度一样即可</figcaption>
块级元素的垂直居中：
<figcaption style="margin-top: calc(0.666667em); padding: 0px 1em; font-size: 0.9em; line-height: 1.5; text-align: center; color: rgb(153, 153, 153);">在已知块级元素高度情况下，利用定位完成。</figcaption>
水平垂直居中（多用于页面的登录框）：
position: absolute;
margin:auto;
left:0;
top:0;
right:0;
bottom:0
最后给大家带来一点CSS的小技巧，感谢互联网大神们的分享
CSS实现纯动画导航：
我们先来看一下效果：
HTML代码
HTML内容是一些用作菜单的链接，我们在里面添加了一些额外的SPAN标记来帮助实现3D效果：
在A链接标记旁边是一系列的SPAN元素，动画演示过程中，它将用来表现3D立方体的“正面”和“背面”。这些SPAN里的文字和A链接里的文字是一致的。
CSS代码
这个动画的过程就是实现3D变换和元素位置变化。但实际上A链接是没有移动的，动的是SPAN标签，而且是最外层的SPAN标签，内部的SPAN标签被初始化在它的位置上，以后就不做任何变动。每个元素都可以向上翻，并要翻回来，我们使用的是CSS transforms。
如果你想看看正面和反面各自是如何旋转移动的，我强烈推荐你们试一下，将其中的一个设置为display: none，让鼠标悬停在它们上面，你将会看到它们各自将完成整个动画的哪一部分动作。
这种实现方式的唯一的缺点是有重复的菜单名称，虽然技术上是隐藏看不出来的，但从代码质量上说存在代码重复问题。然而，从视觉效果上看，它的动画非常顺滑，毫无瑕疵。没有JavaScript，Flash或canvas技术，只是一些简单的CSS标记，这技术CSS动画….一种我们web程序员都应该感谢的技术。----------资料引用：
