css-深刻理解margin和padding

時間 2019-12-14

標籤 css 深刻理解 margin padding 欄目 CSS 简体版

原文原文鏈接

最近一階段重新學習了css，發現真的有不少不少的地方都是空白的，今天咱們來總結一下margin和padding的一些鮮爲人知的祕密！css

一利用float和margin實現佈局

咱們首先來實現一個兩列示佈局html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            float: right;
            background: red;
        }
        p{
            margin-right: 110px;
        }
    </style>
</head>
<body>
    <div>hello</div>
    <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>
</body>
</html>

大概的效果是這樣的佈局

隨着咱們總體的width不斷改變p標籤自動適應，這個也是咱們最長用的兩列布局或三列布局的原理。性能

而後若是咱們有這種需求，咱們須要這種佈局（如圖）：學習

那麼咱們通常怎麼作呢？咱們可能會把全部的li都加上margin-left而後咱們在吧第一個li加上margin負給拉回來，這樣子來實現佈局，可是這種方法有不少不少的問題，咱們若是元素不是三個，變成四個或更多，咱們就須要每個都添加margin負拉回來，因此這種方法並不可取，咱們來看下面這段代碼：測試

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .div{
            width: 1200px;
            background: #eee;
            margin: auto;
        }
        ul{
            overflow: hidden;
            padding:0; 
            margin-right: -20px;
        }
        li{
            height: 200px;
            width: 386.66px;
            margin-right: 20px;
            list-style:none;
            background: red;
            float: left;
        }
    </style>
</head>
<body>
    <div class='div'>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

咱們能夠經過設置ul的overflow：hidden；而後margin－right負來控制容器，這樣達到li不換行實現佈局，其實作後一個li的margin被ul拉回來了spa

這門來作一個測試，咱們給全部的li加一個border，以後添加li的數量3d

border:1px solid #000;
box-sizing: border-box;

注意，必定要添加第二行代碼限制width，而後多出的1px的border會把你的width撐開，這樣子你的container就會由於比內部小於6px的大小使每行第三個li下去！code

效果以下：htm

這樣咱們就可以獲得咱們想要的佈局啦，撒花！！！

有的時候咱們會遇到一些須要水平垂直居中的場景，必須作一個相似alert彈框提醒之類的，咱們須要水平垂直居中

說到居中，咱們第一的反應必定是定位，以後咱們top，left爲50%而後margin負，這種方法也是你們比較熟悉的，可是惟一的問題就是咱們須要知道元素的高和寬改改變元素的margin負，這個也是這種方法的惟一弊端，下面咱們用margin：auto來實現元素居中。

代碼以下：

<!DOCTYPE html>
<html>
<head>
    <style>
        span{
            position: absolute;
            width: 200px;
            height: 200px;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin:auto;
            background: red;
        }
    </style>
</head>
<body>
    <span class='span'></span>
</body>
</html>

這樣咱們就能夠不須要元素的width和height的具體來改變margin負，而用margin：auto來實現了佈局。

若是你不明白這種實現原理，建議去看看盒模型！

二margin重疊問題

首先咱們知道margin重疊只發生在block元素上（不考慮float和absolute），其次父元素和子元素重疊的時候父元素沒有設置border－top或者padding－top。

最後還有一個比較少見的就是咱們的父元素和子元素的第一個元素不存在inline元素分隔。

注：margin－bottom的條件多一條就是父元素並無設置height

下面咱們來

    <div class='father' >
        <div class='son'>hello</div>
    </div>

        .father{
            background: red;
        }
　　　　　.son{
　　　　　　　margin-top:80px;
        }

咱們獲得這樣的效果

咱們給父元素添加了背景元素，子元素margin：80px，可是咱們並無看到子元素margin，效果就像是給父元素margin同樣，咱們來改變style樣式

　　　　 .father{
            background: red;
            margin-top: 80px;
        }
        .son{
            
        }

　　　　 .father{
            background: red;
            margin-top: 80px;
        }
        .son{
            margin-top: 80px;
        }

咱們發現效果是同樣的，咱們獲得結論，由於發生了margin合併，因此失效，那麼咱們怎麼才能獲得咱們想要的子元素margin效果呢？

咱們只須要給父元素添加border-top:1px solid #fff;咱們獲得效果以下

這樣咱們就獲得了咱們想要的效果了！，那麼這個margin合併對於咱們開發有什麼用？

咱們常規開發表單的時候，咱們習慣的是把出了第一個元素的全部元素都添加margin-top: 20px ,可是這種作法並非太好，由於咱們都知道數據基本上都是從後臺查出來的，咱們並不知道會有多少條出局，可能空數據或者數據量過多就會形成佈局變亂，footer緊貼input的樣式發生，那麼咱們就能夠使用margin合併來解決這個問題：

   　　 .input{
            margin-top: 30px;
            margin-bottom: 30px;
        }

咱們把全部的li添加class爲input，咱們利用margin合併實現兩個li間距只30px的間距，這樣就解決了這個問題！

下面咱們來講一下padding

首先咱們說一下inline元素的padding，inline元素的padding會改變元素的width，height不會改變，可是會改變元素的背景顏色。什麼意思呢？咱們來看下面的代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .span{
            padding: 0px;
        }
        .div{
            padding: 20%;
            border:1px solid #000;
        }
        .div span{
            display: block;
            width: 100px;
            height: 100px;
            float: left;
            background: red;
        }
    </style>
</head>
<body>
    <p>hello</p>
    <span>
        <span>123</span>
        <span class='span'>hello</span>
        <span>123</span>
    </span>
</body>
</html>

效果以下：

而後咱們改變.span的padding

padding: 100px;

隨着咱們inline元素的padding改變，咱們發現元素的height並無撐開而是把上面的hello覆蓋了。

結下來咱們來利用padding來實現兩個效果圖：

有時候咱們想實現最下面的效果，可是咱們用｜只可以實現最上面的效果：很少說直接上代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{
            padding: 10px 6px 0px;
            border-left: 2px solid #000;
            margin-left: 12px;
            font-size: 0;
        }
    </style>
</head>
<body>
    <div>登陸｜退出</div>
    <div>註冊 登陸</div>
    <div>註冊<span></span>登陸</div>
</body>
</html>

這樣咱們利用span標籤就能實現分隔符號了，那麼咱們用padding還能實現什麼呢？

咱們經常有一些簡單的樣式，若是用圖片可能會多多少少影響加載性能，雖然性能不是很大，可是若是咱們能用css實現的話何樂而不爲呢？

咱們實現一個這樣的效果圖：

其實仍是比較簡單的，咱們直接上代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .span{
            width: 150px;
            height: 30px;
            padding: 15px 0;
            border-top: 30px solid;
            border-bottom: 30px solid;
            background-color: currentColor;
            background-clip: content-box; 
        }
    </style>
</head>
<body>
    <div class='span'></div>
</body>
</html>

這樣咱們就實現了最基本的padding來寫一些簡單的button！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。