CSS笔记

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

笔记
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里只属于前端工程师。