1、左右布局
左侧 div 固定，右侧 div 自适应宽度，填充满剩余页面
①左侧 div 设置 float 属性为 left，右侧 div 设置 float 属性为 right。
①代码
①样式
② 左侧 div 设置 float 属性为 left，右侧 div 设置 margin-left
②代码
②样式
③左侧 div 设置 float 属性为 left，负边距100%，右侧 div 中嵌套一个 div，页面内容放入嵌套的 div 中，右侧内嵌 div 设置 margin-left
③代码
③样式
2、左中右布局
① float + margin
①代码
①样式
② float + absolute
②代码
②样式
3、水平居中
①文字水平居中
设置text-align属性即可。text-align: center；但是有个缺点，由于text-align是可继承属性，即父元素内部的所有元素都会继承这个属性，从而它的子元素内部的文本都会居中显示了。
②容器水平居中
为容器设置一个宽度，然后将margin的水平值设为auto即可。
第一种
4、垂直居中
①文字垂直居中
单行文字的垂直居中，只要将行高与容器高设为相等即可。{height: 50px; line-height: 50px;}
②容器垂直居中
大容器的定位为relative（相对），将小容器定位为absolute（绝对），再将小容器的左上角沿y轴下移50%，最后将它margin-top上移本身高度的50%即可
5、等其他小技巧
①图片宽度的自适应。
图片能够自动适应小容器的宽度，css用 img {max-width: 100%}
②使按钮具有3D效果。
将它的左上部边框设为浅色，右下部边框设为深色。(用google: css shadow generator)调试后复制代码即可。
3D按钮
③Text-transform和Font Variant。
Text-transform用于将所有字母变成小写字母、大写字母或首字母大写；Font Variant用于将字体变成小型的大写字母（即与小写字母等高的大写字母）。
p {text-transform: uppercase} 全部大写 p {text-transform: lowercase} 全部小写
p {text-transform: capitalize} 首写字母大写 p {font-variant: small-caps} 大写字母跟小写一样高
大小写字母
