负margin技术

最新推荐文章于 2020-12-03 16:22:07 发布

weixin_30278311

最新推荐文章于 2020-12-03 16:22:07 发布

阅读量96

点赞数

原文链接：http://www.cnblogs.com/runhua/p/6429010.html

版权

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技巧元素垂直居中一篇中的随笔有记录，略

转载于:https://www.cnblogs.com/runhua/p/6429010.html