《CSS世界》阅读笔记，持续更新

padding的理解

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。