CSS 常问知识点

css盒子模型的理解

在网页中一个元素占有空间的大小由内容(content),内边距(padding),边框(border),外边距(margin)四部分构成

• 盒模型又分为W3C盒模型和IE盒模型。
• W3C(box-sizing:content-box 默认值)：盒子定义宽高=内容宽高
• IE(box-sizing:border-box)：盒子定义宽高=内容宽高+边框+内边距

:before和::after中单冒号和双冒号的区别是什么？这两个伪元素有什么用?

• 单冒号是伪类，是类 比如:hover
• 双冒号是伪元素，是元素 比如::before和::after
• 作用：分别在元素前后插入内容

style标签写在body前和body后的区别是什么？

渲染顺序不同

• body前：resources downloading->CSSOM+DOM->RenderTree(composite)->Layout->paint
• body后：会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染；

优雅降级和渐进增强?

优雅降级和渐进增强代表了css3在不同浏览器进行应用的两种观点

• 优雅降级：认为应该首先去设计最高级，最完善浏览器的浏览器内容，而对相对低等级的浏览器进行一些调整。

• 渐进增强：认为应该从低版本浏览器设计，让内容都正常显示出来，再逐步的对高版本浏览器进行调整。

viewport常见设置都有哪些？

viewport 就是视qu窗口,也就是浏览器显示网页的部分,PC 端基本等于设备区域,但在移动端设备默认 viewport 在 980~1024 之间
为了让移动端可以很好的显示页面,因此需要对 viewport 进行设置

• width :设置 layout viewport 的宽度,为一个正整数,或者字符串 width-device
• initial-scale: 设置页面的初始化缩放值,为一个数字,可以带小数
• minimum-scale: 允许用户的最小缩放值,为一个数字,可以带小数
• maximum-scale: 允许用户最大缩放值,为一个数字,可以带小数
• height : 设置 layout viewport 的高度
• user-scable : 是否允许用户进行缩放,值为 no 或者yes

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>

css 会造成阻塞吗？

• css 加载不会阻塞Dom解析 （css 渲染树 和 dom树 解析是并行的）
• css 加载会阻塞DOM渲染
• css 会阻塞JS执行（css 放头部 js 放尾部）