一些常见问题

1.去除inline-block的间隔

（1）用注释去掉换行符；（ 不推荐，因为会使页面结构混乱和不利于阅读)

<div>div1</div><!--注释--><div>div2</div>

（2）ps测量间距，然后把margin-left设置为负值（ 不推荐，ps测量字体大小会麻烦，并且各浏览器解析结果不同）

div{margin-left:-7px;}

 (3)设置字间距-npx( 不推荐，同样有字体大小问题，且在欧朋和ie7浏览器中会有问题)

body{letter-spacing:-5px;}

 (4)先设置父元素字体大小为0，然后在子元素中重新设置字体大小（ 勉强推荐，仅仅是低版本谷歌浏览器有问题）

t

body{font-size:0px;}
div{font-size:16px;}

2.去除浮动

(1)为父元素设置高度( 不推荐，高度有时是未知的)

div{height:npx;}

(2)给父元素overflow:hidden/scroll/auto（ 不推荐，虽然hidden可以清除浮动但有可能隐藏有用的东西）

div{overflow:hidden;}

(3)在浮动元素的后面添加一个（style="clear:both"）( 不推荐，多出一个空标签，使内容复杂化)

（4）给父元素设置before,after伪类。（ 推荐，但是兼容性不太好）

div:after{display:block; content:""; clear:both;}

3.文字和区块居中

（1）文字居中

水平：text-align:center;

垂直：line-height:npx;

（2）当子小于父元素的时候(只能做水平方向的居中)

div{margin:0 auto;}

（3）水平上可以相对或者绝对定位其位置；垂直只能利用绝对定位。( 该方法适用各种情况，只需要注意是否可以脱离文档流)

div{position:relative;left:50%;margin-left:-npx;}

div{position:absolute;top:50%;margin-top:-npx;}

(4)直接利用绝对定位进行居中。( 适用范围，子元素比父元素小，且需要知道尺寸)

div{position:absolute;margin:auto;left:0;top:0;right:0;bottom:0}

4.position的属性

（1）position:static;没有定位，元素出现在正常的流中

（2）position: relative;相对定位

• 不影响元素本身特性
  
• 不会使元素脱离文档流
  
• 没有定位偏移量时对元素无影响

（3）position: absolute;绝对定位

• 使元素完全脱离文档流
  
• 使内联元素在设置宽高的时候支持宽高
  
• 使区块元素在未设置宽度时由内容撑开宽度
  
• 相对于最近一个有定位的父元素偏移
  
• 相对定位一般配合绝对定位使用
  

（4）position: fixed;固定定位

• 除了相对于可视区偏移外与绝对定位一致
  
• ie6及更低版本不兼容