"CSS World" reading notes, continuously updated

1. The padding percentage value is calculated relative to the width in both the horizontal direction and the vertical direction;

2. Implement a fixed header image effect with an aspect ratio of 5:1 (compatible with IE6)

 .box {
  padding: 10% 50%;
  position: relative;
}
.box > img {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

3. Padding and graphics drawing

 .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. Understanding of size

• Element size: Corresponds to the $().outerWidth() and $().outerHeight() methods in jQuery, including padding and border, which is the size of the element's border box. In the native DOM API, offsetWidth and offsetHeight are written, so it is sometimes called "element offset size".
• Element internal size: Corresponds to the $().innerWidth() and $().innerHeight() methods in jQuery, indicating the size of the internal area of the element, including padding but excluding border, that is, the size of the element's padding box. It is written clientWidth and clientHeight in the native DOM API, so it is sometimes called "element visual size".
• Element external size: Corresponding to the $().outerWidth(true) and $().outerHeight(true) methods in jQuery, indicating the external size of the element, including not only padding and border, but also margin, which is the margin box of the element size. There is no corresponding native DOM API.