佈局中巧妙運用"負數"

簡介

在我們日常的網頁佈局中，我們鮮少使用負 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

實現思路

對於按按排列的單個元素 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 來解決該問題。

實現思路

1. 為 ul 新增 margin-bottom: -1px; 即可。
2. 注意：我們使用的邊框寬度值 等於 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程式碼