CSS一些常用布局（技巧）

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} 大写字母跟小写一样高

大小写字母