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 放尾部）
