负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{
100%;
margin-right:-200px;
background-color:Red;
}
#sidebar{
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技巧元素垂直居中一篇中的随笔有记录,略

原文地址:https://www.cnblogs.com/runhua/p/6429010.html