布局中巧妙运用"负数"

2019-01-31 本文已影响0人 CHH5431

布局中巧妙运用"负数"

简介

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

温馨提示

本文参考以下网址：响应式SPRITES图片实现方法探究

负值的应用场景

标签的水平垂直居中
去除列表的右边距
去除列表末尾元素的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;，列就在式最高点被裁切。

HTML代码

  **代码暂无**

布局中巧妙运用"负数"