你不知道的css(二) —-content與替換元素,margin,padding

• 2019 年 11 月 20 日
• 筆記

1.替換元素

• 替換元素的尺寸計算規則：css尺寸 > html尺寸 > 故有尺寸
• 當做懶加載時,直接拋棄掉src屬性<img>效率最高
• 替換元素沒有::after 和 ::before

2.如何將一個替換元素變成一個非替換

• 去掉src屬性
• 替換元素和非替換間隔了一個css的content屬性 chrome瀏覽器所有元素都支持content屬性，而在其他瀏覽器僅在::before或::after中支持

3.content的特性

• content生成的文本是無法複製選中的
• content動態生成的值無法獲取

4.content內容生成技術

• 清楚浮動
• content字符內容生成 正在加載…
• content生成圖片
• content屬性值內容生成（自定義的html屬性也可以）
• content生成couter計數值

5.padding屬性

• 對於內聯元素來說，padding在垂直方向上會起作用，但是不會影響布局，適用於手機端點擊區域過小的情況
• padding的百分比值無論水平和垂直都是相對於寬度計算的(塊狀元素),可以利用padding百分比來製作一個自適應的比例圖形

.box{      padding: 10% 50%;      position: reletive;  }  .box img{      position: absolute;      width: 100%;      height: 100%      left: 0;      top: 0  }

• 內聯元素默認的高度完全受font-size決定
• 按鈕實現小技巧

button{      position: absolute;      clip: rect(0,0,0,0);  }  label{      display: inline-block;      line-height: 20px;      padding: 10px;  }  <button id="btn"></button>  <label for="btn">click</label>

• padding進行圖形繪製

.icon{      display: inline-block;      width: 14px;      height: 1px;      padding: 3px 0;      border-top: 1px solid;      border-bottom: 1px solid;      background-color: currentColor;      background-clip: content-box;  }

• padding尺寸不為負

6.margin屬性

• 可以通過給父元素添加負margin，來增加容器的可用寬度 -利用margin實現等高

.column-box{      over-flow: hidden;  }  .son,  .child{      margin-bottom: -9999px;      padding-bottom: 9999px  }

• 內聯元素垂直方向上的margin是沒有任何影響的
• margin: auto的作用

如果一側定值，一側auto，則auto為剩餘空間大小（margin初始值為0） 如果兩側均是auto，則平分剩餘空間

觸發margin:auto的前提條件是對應方向會自動填充，所以一般高度不會自適應，可以使用writing-mode: vertical-lr改變文檔流方向，而這樣水平方向無法居中，所以需要設置position，將正常流寬度改變成格式化寬度和格式化高度

• margin無效的情況

(1) 絕對定位元素非定為方向的margin值無效 (2)定高容器的子元素的margin-bottom或者定寬元素的子元素的margin-right無效