共计 980 个字符,预计需要花费 3 分钟才能阅读完成。
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。
正文完