內外邊距、浮動、佈局相關

時間 2019-11-10

標籤內外邊距浮動佈局相關简体版

原文原文鏈接

關於清除元素的內外邊距：css

一、行內元素只有左右邊距、沒有內外邊距、內邊距在ie6等低版本的瀏覽器中也會有問題。儘可能不要給元素指定行內的內外邊距；html

二、外邊距的合併瀏覽器

使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併；佈局

相鄰塊元素垂直外邊距的合併：spa

當相鄰兩個塊元素相遇時，若是上面的元素有下邊距margin-bottom，下面的元素有上外邊距margin-top,則他們之間的垂直間距不是margin-bottom與margin-top之和，而是二者中的較大者。這種現象稱之爲相鄰元素垂直外邊距的合併，又稱之爲外邊距的塌陷。3d

嵌套塊元素垂直外邊距的合併：code

對於兩個嵌套關係的塊元素，若是父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合併，合併後的外邊距爲二者中的較大者，即便父元素的上外邊距爲0，也會發生合併。htm

解決方案blog

能夠爲父元素定義1px的上邊框和上內邊距繼承

能夠爲父元素添加overflow：hidden；

關於padding不會撐開盒子的狀況

注意tips：

一、寬度屬性width和高度屬性height僅僅適用於塊級元素，對行內元素無效（img標籤和input例外）；

一點妙用【若是已經給行內元素添加了浮動，此時不須要轉換這個元素也能夠有寬高！】

二、計算盒子模型的總高度時還應該考慮上下兩個盒子垂直外邊距合併的狀況；

三、若是一個盒子沒有給定寬度/高度或者繼承父親的寬度/高度，則padding不會影響本盒子的大小；

設定兩個盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>padding盒子不會撐開的狀況</title>
</head>
    <style>
        .father {
            height: 200px;
            background-color: pink;
            width: 200px;/* 由於父盒子有寬度給定值了，因此盒子被撐開； */
        }
        .son {
            padding-left: 30px;/* 兒子沒有給寬度，用的是默認，因此不會被撐開； */
        }
        }
    </style>
<body>
    <div class="father">
        <div class="son">
        123
    </div>
</div>
</body>
</html>