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。