《CSS世界》阅读笔记,持续更新
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。
转载自:https://segmentfault.com/a/1190000041721233