css布局技巧

**

css布局技巧*

一、浮动与定位的对比
脱离正常文档流的属性：浮动：左浮动和右浮动 定位：固定定位和绝对定位
不同的地方：
浮动会脱离正常文档流，但是不脱离文本流 定位既脱离正常文档流，也脱离文本流
注意：
设置了定位和浮动的元素不再区分块级元素、行级元素，都可以设置宽高和所有盒模型属性 所有元素都可以设置浮动和定位

二、verticial-align属性
设置垂直对齐方式，用在行级元素或者行块级元素身上，对于块级元素不生效
常用属性值：
baseline 基线对齐（默认值） top 顶端对齐 bottom 底端对齐 middle 居中对齐 sub 下标对齐 super 上标对齐

二、出现的问题
1、图片的下间隙问题
盒子中装有一张图片时，图片与盒子之间有小间隙
解决方案：
（1）给图片设置vertical-align属性，值为middle、bottom、top都可以解决这个问题
（2）给img转块元素
（3）给图片的父盒设置font-size:0

2、文本框与按钮不对齐
（1）给input添加vertical-align:middle
（2）给input浮动
三、透明度属性及兼容
1、rgba() 颜色模式
alpha参数取值0-1，0代表透明，1代表不透明，0-1代表的是半透明 用于背景颜色、color、border-color时使用 兼容：ie9+及标准浏览器是支持的，ie6，7，8不支持
2、opacity属性
x的取值是在0-1之间，0代表透明，1代表不透明，0-1代表的是半透明 设置opacity的元素，不仅自己会有透明度的效果（整体透明），连子孙后代也会有透明度的效果 兼容：ie9+及标准浏览器是支持的，ie6，7，8不支持 用途：设置整个模块的透明度
3、IE专属滤镜 （filter: Alpha(opacity=x);）
x的取值是0-100之间 兼容：ie6,7,8,9下支持，ie10被废除 ie浏览器专属的属性，使用时需要注意： ie6、7中，如果设置filter不识别，需要加上以下代码：
如果想要实现元素的背景透明，子元素没有透明的效果时，需要给父元素添加静态定位 （position:static）,给子元素添加相对定位（position:relative）;

四、显示与隐藏
1、display属性
display:block 元素的显示 display:none 元素隐藏（原来的占位也不存在了）
2、visibility属性
visibility：visible 元素显示 visibility：hidden 元素隐藏（占位依然存在）
3、opacity属性
opacity:1 元素的显示 opacity:0 元素的隐藏（元素透明）