從零開始的前端生活--盒尺寸

padding

padding對塊級元素的影響

1. css中默認的box-sizing 是content-box,使用padding會額外增加元素的尺寸，

2. 當padding足夠大，把width擠沒掉了，這時width就無效，里面的內容表現為“首選最小寬度”

   首選最小寬度

   1. 對于中文，寬度表現為每個漢字的寬度
   2. 對于西方文字，寬度表現為特定的連續的英文字符單位組成，一般會終止于空格、短橫線、問號、以及其他非英文字符 （如果想要表現為每個字符為最小寬度，可用 word-break: break-all; ）
   3. 類似于圖片等替換元素，寬度就是該元素內容本身的寬度

padding對純行內元素(不包括替換元素)的影響

對上下元素的原本布局沒有任何影響，僅僅是垂直方向發生了層疊

看下下面這個例子，兩個div之間夾著inline元素a標簽

<div class="box"></div>
<a href=https://www.cnblogs.com/Dusks/p/"">padding

.box {
    height: 50px;
    background-color: pink;
}

a {
    background-color: skyblue;
    padding: 50px;
    text-decoration: none;
}

不了解的話，會認為a標簽撐開了div，兩個div之間距離會大于100px，實際上卻是這樣的，

結果是發生了層疊，在細品，兩個div之間的高度就是padding的font-size，也就是a標簽的content-box的高度，padding絲毫沒影響上下元素(注意這里特指純行內元素)

應用的話，我們可以利用純行內元素的padding不影響上下元素的特點來增加點擊區域，

還有一個應用就是，如果一個網頁有頂部固定fixed一個導航欄，當我們通過地址欄的hash值和頁面html的id值相對應元素發生瞄點定位或者電梯導航，標題就會被導航欄擋住了，如果我們希望不被擋住要怎么實作？

假設我們標題使用h3，然后在padding或者margin的話，雖然符合要求，但是頁面布局就亂了，這顯然不是我們想要的，我們要的是既能符合要求，又不影響上下元素，所以純行內元素的padding就很好解決了問題，可以這樣用

<nav>導航欄</nav>
<h3 id="hash1">這是我們的標題</h3>
<h4><span id="hash2">這是我們的標題四</span></h4>
<h4><span id="hash3">這是我們的標題四</span></h4>

h3 {
    background-color: pink;
    padding-top: 50px;
    height: 1000px;
}

h4 {
    background-color: pink;
    height: 600px;
}

h4 span {
    border: 1px solid black;
    padding-top: 50px;
}

簡單寫了代碼，就是在h4里面套一個純行內元素然后就可以滿足我們需求了，

3. padding是不支持負值的

margin

理清一下各類尺寸

margin和內部尺寸

padding會改變元素可視尺寸，畢竟上表寫著，margin只有在元素是“充分利用可用空間”狀態的時候，margin才會改變元素的可視尺寸，

什么是充分利用可利用空間 的狀態？如下代碼

<div class="father">
    <div class="son"></div>
</div>

.father{
    width:300px;
    margin: 0 -20px;
}

對于son這個div，他沒有設定width，也沒有保持包裹性，他就表現為“充分利用可利用空間”狀態，這個時候son的width就等于父元素的width，這個狀態就會受margin影響，如我們在son上加個 margin: -30px;此時son的寬度就等于父元素的寬度+30*2，無論垂直還是水平方向(這是對具有拉伸特性的絕對定位元素來說)，我覺得哪一個方向符合“充分利用可利用空間”狀態就會被margin影響，

margin和外部尺寸

記住一句話，只要是塊狀元素，margin就會影響其外部尺寸，無論垂直還是水平，

只能使用子元素的margin-bottom來實作滾動容器的底部留白，

margin的百分比值的計算規則和padding一樣，都是相對于寬度計算的，

margin合并

定義：塊級元素的上外邊距與下外邊距有時會合并成單個外邊距，這個現象稱為“margin合并”，

備注：1、這里的塊級元素不包括浮動和定位元素，2、默認是只發生在垂直方向上

margin合并的三種情況：

1. 相鄰兄弟元素margin合并

2. 父元素和第一個子元素/最后一個子元素

   解決辦法(舉例margin-top)：

   • 父元素設定為塊狀格式化背景關系元素，如設定overflow：hidden；
   • 父元素設定border-top值
   • 父元素設定padding-top值
   • 父元素和第一個子元素之間添加行內元素進行分隔

3. 空塊級元素的margin合并

   <div class="father">
       <div class="son">
       </div>
   </div>
   

   .father{ overflow: hidden;}
   .son{ margin: 10px 0;}
   

   分析: father設定 overflow是為了防止出現第二種情況(父子合并)，結果還真沒出現父子合并，不過出現了空塊級元素合并，father的div高度結果為10px，并不是所想的20px

   解決空塊元素合并：

   • 設定垂直方向的border或padding
   • 里面添加行內元素
   • 設定height或者min-height

合并的計算規則：

"正正取大值，正負值相加，負負最負值"

舉個栗子

<div class="a"></div>
<div class="b"></div>

.a{ margin-bottom: 50px;}
.b{ margin-top:20px;}

結果a與b之間的間距為50，正正取大值嘛

margin: auto;

先看個栗子

<div class="father">
    <div class="son">
    </div>
</div>

.father{
    width: 300px;
}
.son{
    width:200px;
    margin-right: 80px;
    margin-left: auto;
}

這是單側的auto，效果是這樣的，margin-left = 20px；auto其實就是計算后的剩余空間，原本300px-200px-80px = 20px

margin的auto就是為塊級元素的左中右對齊而設計的，和行內元素的text-align相對應，如果上面的son改成

.son{
    width: 200px;
    margin-left: auto;
}

這樣實作的是右對齊，

.son{
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}

這樣實作的是居中對齊，

剛開始的時候，我覺得margin: auto; 應該是垂直居中對齊的，可是有時顯示不出來，原因分析如下

margin: auto; 計算是有前提條件的，就是元素具有對應方向的填充特性的，什么意思？假設把son的寬度200px去掉，則son的寬度就會自動填充到和father一樣的寬度，這就是填充特性啊！height行不？當然不行，塊級元素的特點就是這樣，沒設height時就會默認為0，不會像width那樣填充，

所以由上分析，height沒有符合條件，默認下不會auto計算，

但是我們可以創造條件，如下

<div class="box">
    <div class="innerbox">hhhhhh</div>
</div>
<div class="father">
    <div class="son"></div>
</div>

.father {
    width: 300px;
    height: 150px;
    position: relative;
    background-color: pink;
}

.son {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: skyblue;
}

先看下效果

這樣就是垂直居中對齊，為什么？我們用定位，top：0；等這些，把son尺寸表現為："格式化寬度和格式化高度"，使寬高都具有填充特性，這樣他就可以auto計算了，

真的是太妙了！！！我人傻了，

margin無效

1. 純行內元素的垂直margin是無效的，并且對于行內替換元素，它的垂直margin有效且不發生合并現象

2. 有時候我們定位和float，margin會失效，記住方位要一致，否則只能影響兄弟元素，影響不了元素定位，比如，

   top: xx;對應 margin-top； float: right; 對應margin-right;

也許對于第一點，會有這樣例子

<div class="box">
    <img src=https://www.cnblogs.com/Dusks/p/"xxx.jpg">