6

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

 2 years ago
source link: https://segmentfault.com/a/1190000041721233
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

《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。

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK