《CSS世界》閱讀筆記,持續更新

我養了一窩汪汪發表於2022-04-18

1、padding百分比值無論是水平方向教師節哦垂直方向均是相對於寬度計算的;

2、實現一個寬高比為5:1的比例固定的頭圖效果(相容IE6)

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

3、padding與圖形繪製

.icon-menu {
  display: inline-block;
  width: 140px;
  height: 10px;
  padding: 35px 0;
  border-top: 10px solid;
  border-bottom: 10px solid;
  background-color: currentColor;
  background-clip: content-box;
}
.icon-dot {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 10px solid;
  border-radius: 50%;
  background-color: currentColor;
  background-clip: content-box;
}

4、尺寸的理解

  • 元素尺寸:對應jQuery中的$().outerWidth()和$().outerHeight()方法,包括padding和border,也就是元素的border box的尺寸。在原生的DOM API中寫作offsetWidth和offsetHeight,所以有時候也稱為“元素偏移尺寸”。
  • 元素內部尺寸:對應jQuery中的$().innerWidth()和$().innerHeight()方法,表示元素的內部區域尺寸,包括padding但不包括border,也就是元素的padding box的尺寸。在原生的DOM API中寫作clientWidth和clientHeight,所以有時候也稱為“元素可視尺寸”。
  • 元素外部尺寸:對應jQuery中的$().outerWidth(true)和$().outerHeight(true)方法,表示元素的外部尺寸,不僅包括padding和border,還包括margin,也就是元素的margin box的尺寸。沒有相對應的原生的DOM API。

相關文章