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;相对定位
- 不影响元素本身特性
- 不会使元素脱离文档流
- 没有定位偏移量时对元素无影响
- 使元素完全脱离文档流
- 使内联元素在设置宽高的时候支持宽高
- 使区块元素在未设置宽度时由内容撑开宽度
- 相对于最近一个有定位的父元素偏移
- 相对定位一般配合绝对定位使用
- 除了相对于可视区偏移外与绝对定位一致
- ie6及更低版本不兼容