布局“负数”的妙用——少年自负凌云笔（未完待续）

布局中巧妙运用"负数"

简介

在我们日常的网页布局中，我们鲜少使用负 margin 与 padding ，殊不知，我们可以利用它们解决很多布局的问题，达到极好的视觉体验。

温馨提示

本文参考以下网址：http://www.topcss.org

负值的应用场景

标签的水平垂直居中
去除列表的右边距
去除列表末尾元素的border-bottom
自适应布局
等高布局

1、标签的水平垂直居中

网页设计中，元素的水平居中，也是很常见的布局；其中，标签的大小可能不确定，但是对于大小确定的元素，我们可以使用一下方式进行布局，实现标签的水平垂直居中。

实现思路

使用 绝对定位 ，将 container 的定点定位到 body 的中心，然后使用负 margin （container 宽高的1/2），将 container 的中心拉回到 body 的中心，已到达 水平垂直居中 的效果。

HTML代码

	<div class="container">垂直居中对齐</div>

CSS代码

.container {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -210px;
    margin-top: -210px;
    border: 1px dashed rgb(28, 19, 163);
    background: #eee;
    border-radius: 10px;
    padding: 10px;
    font-size: 30px;
    line-height: 400px;
    text-align: center;
}

效果图

2、去除列表的右边距

对于项目中需要列表展示的视图，为了美观，我们需要在元素之间添加间隙 margin 。但是，会存在的问题是，对于每一个元素添加 右margin 时，显然， 每行末尾元素 的右边框是多余，需要特别处理。一般来讲，我们只需要找到对应的元素，设置 margin-right：0; 即可。采用添加对应的 className 或者利用 nth-child(An + B) 选择到元素，但是如果页面结构发生变化，我们的布局不能适应其变化，会产生错乱的情况。推荐使用 负margin 解决该布局问题：

实现思路

对于按按排列的单个元素 li ，我们均设置 margin-right：10px;margin-bottom: 10px; ，并且给对应的父级元素 ul 设置 margin-right: -10px; 即可。

HTML代码

<div id="sudoku">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</div>

CSS代码

 * {
     padding: 0;
     margin: 0;
     list-style: none;
 }

 #sudoku {
     width: 320px;
     height: 320px;
     background: rgb(228, 120, 120);
     margin: 100px auto;
 }

 #sudoku>ul {
     margin-right: -10px;
 }

 #sudoku>ul>li {
     width: 100px;
     height: 100px;
     background: rgb(56, 80, 216);
     margin-right: 10px;
     margin-bottom: 10px;
     float: left;
     text-align: center;
     line-height: 100px;
     font-size: 24px;
 }

效果图

思考

布局完成后，通过 F12 查看元素的盒模型，发现 sudoku为320x320 ，而 ul为330x0 ，最后一行 margin-bottom: 10px; 神奇的不见了？这是为什么呢？ 期待你的答案……

3、去除列表末尾元素的border-bottom

在项目中，我们往往需要使用菜单栏 menu ，并且需要使用 ul + li ，避免不了的是需要使用 border-bottom 来分割各个 li ，最后一个 li 的表边框与 ul 的边框重合，不美观，我们可以使用 负margin 来解决该问题。

实现思路

为 ul 添加 margin-bottom: -1px; 即可。
注意：我们使用的边框宽度值等于 margin-bottom的宽度的绝对值。

HTML代码

<ul id="container">
    <li style='font-weight:bold;font-size:20px;'>西江月 宋江</li>
    <li>自幼曾攻经史</li>
    <li>长成亦有权谋</li>
    <li>恰猛虎卧荒丘如</li>
    <li>潜伏爪牙忍受</li>
    <li>不幸刺文双颊</li>
    <li>那堪配在江州</li>
    <li>他年若得报冤仇</li>
    <li>血染浔阳江口</li>
    <li>心在山东身在吴</li>
    <li>飘蓬江海谩嗟吁</li>
    <li>他时若遂凌云志</li>
    <li>敢笑黄巢不丈夫</li>
</ul>

CSS代码

#container {
    margin: 20px auto;
    width: 270px;
    background: #f5f5f5;
    border-radius: 5px;
    border: 2px solid rgb(51, 13, 224);
}

#container>li {
    height: 25px;
    line-height: 25px;
    padding: 5px;
    border-bottom: 1px dashed rgb(197, 44, 44);
    margin-bottom: -1px;
    text-align: center;
}

效果图

4、自适应布局

请参考“双飞翼布局”，网址：点击此处学习“双飞翼布局”

5、等高布局

在一些列表中，需要嵌套图片和文字描述，但是文字描述的字数不同，导致标签的 高度不统一 ；如果给元素列表设置相同的高度，显然是不符合应用场景的。所以，我们必须解决 高度自适应 ，且 多列等高 的问题。

实现思路

问题的关键是给每个项目元素设置大的 padding-bottom ，然后用 数值相似的负margin-bottom 消除这个高度。这会导致每一列 溢出容器 元素，如果把 外包容器 的添加样式 overflow:hidden; ，列就在式 最高点被裁切。