负margin技术
margin外边距的值也是可以取负值的,margin-top、margin-left取负值,则表示该元素朝这个方向拉近,margin-right、margin-bottom取负值,则表示后续元素朝该方向拉近,因此,margin-right、margin-bottom可以将后续元素拉近,进而覆盖“当前元素”。
常用的负margin技巧有三个:
(1)图片与文字对齐
图片与文字排在一起的时候,他们的对齐方式默认是基线对齐(vertical-align:baseline),所以在底部水平方向上往往都是不对齐的,要想实现对齐,除了使用vertical-align:text-bottom,还有一个兼容性更好的方法:img{margin:0 3px -3px 0}
(2)自适应两列布局
所谓自适应两列布局,指的是在左右两列中,其中有一列的宽度为自适应,另外一列宽度是固定的。
方法如下:
1.定义两个元素为同方向浮动元素
2.主体部分固定宽度元素右外边距为侧边栏部分自适应元素width的负值
3.防止文本重叠,定义主体部分的文本右外边距为固定的width+间距(界定浏览器边界)
eg:
<!doctype html> <html> <head> <title></title> <style type="text/css"> #content,#sidebar{ float:left; color:white; } #content{ width:100%; margin-right:-200px; background-color:Red; } #sidebar{ width:200px; background-color:Purple; } /*防止浏览器可视区域宽度不足时发生文本重叠*/ #content p{margin-right:210px;} /*它是200px+10px,10px是他们的间距*/ </style> </head> <body> <div id="content"><p>这是主体部分,自适应宽度</p></div> <div id="sidebar"><p>这是侧边栏部分,固定宽度</p></div> </body> </html>
(3)元素垂直居中
这个方法在css技巧元素垂直居中一篇中的随笔有记录,略