CSS世界 http:demo.cssworld.cn

1.流布局的设计，自适应的优势

2.虚拟的元素容器，包裹性

https://demo.cssworld.cn/3/2-5.php

3.box-sizing 设计初衷

input,textarea,img,video,object{
  box-sizing: border-box;
}

4.min-* 与 max-*

初始值：min-* 初始值auto，max-* 初始值none

权重超越：max-* 超越 !important , min-* 超越 max-*

https://demo.cssworld.cn/3/3-2.php

.element{
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s;
}
.element.active{
  max-height: 666px; /*足够大的安全值,不小于实际height即可，太大会造成无效的动画时间*/
}

5.替换元素 与 非替换元素 的区别

替换元素与非替换元素相隔一个CSS content属性

CSS content属性改变的仅仅是视觉呈现，不会被捕捉到

6.图片懒加载

例子

https://demo.cssworld.cn/4/1-2.php

https://demo.cssworld.cn/4/1-4.php

img {
  display: inline-block; /* 解决firefox对替换元素的解析不一致 */
  visibility: hidden;
  width: 200px;
  height: 150px;
}
img[src]{
  visibility: visible;
}

7.伪元素的应用

loading效果 https://demo.cssworld.cn/4/1-9.php