负margin技术

当margin取值为负数时，margin对普通文档流元素和对浮动元素的影响是不一样的。其中，margin对普通文档流元素的影响，可以分为以下两种情况：

当元素的margin-top或者margin-left为负数时，“当前元素”会被拉向指定方向。
当元素的margin-bottom或者margin-right为负数时，“后续元素”会被拉向指定方向。

对于浮动元素，我们只需要比普通文档流元素多考虑一点，那就是浮动元素的“流动方向”。

负margin技巧

图片与文本对齐

当图片与文本放到一起的时候，它们在底部水平方向上往往都是不对齐的。这是因为在默认情况下，图片与周围的文本是基线对齐，也就是vertical-align:baseline。如果想让它们在底部水平方向上对齐，有两种方法：一种是使用vertical-align:text-bottom；另一种是使用负margin技术。

默认情况下，图片与文字在底部水平方向上是不对齐的。我们在CSS中添加：

img{
	margin:0 3px -3px 0;
    }

自适应两列布局

自适应两列布局，指的是在两列布局中，其中一列的宽度是固定的，而另外一列宽度自适应。如果使用浮动来做的话，只能实现固定的左右两列布局，并不能实现其中一列为自适应的布局。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <style type="text/css">
        #main,#sidebar
        {
            float: left;
            color: white;
        }
        #main
        {
            width: 100%;
            background-color: red;
            margin-right: -200px;
        }
        #sidebar
        {
            width: 200px;
            background-color: blue;
           
        }
        /* 防止浏览器可视区域宽度不足时发生文本重叠 */
        #main p {margin-right: 210px;}
    </style>
    <script>
       
    </script>
</head>

<body>
   <div id="main"><p>这是主体部分，自适应宽度</p></div>
   <div id="sidebar"><p>这是侧边栏部分，固定宽度</p></div>
</body>

</html>

元素垂直居中

想要实现块元素的垂直居中，一般来说比较麻烦，不过有一个经典的方法就是使用position结合负margin来实现：首先，给父元素写上position:relative，这样做是为了给子元素添加position:absolute的时候不会定位到外太空去；然后给子元素添加如下属性：

父元素{
        position: relative;
      }
子元素{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: “height值一半的负值”;
        margin-left: “width值一般的负值”;
      }