CSS / HTML基础问题总结大全（二）

• 一、
• 二、script标签的defer和async
• 三、介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？
• 四、对 BFC 规范（块级格式化上下文：block formatting context）的理解？

一、<!DOCTYPE>

<!DOCTYPE>声明不是HTML标签，指示web浏览器关于页面使用哪个HTML版本进行编写的指令，也就是说<!DOCTYPE>规定了浏览器文档使用哪种html或者xhtml规范

如果没有<!DOCTYPE>声明，那么不同的浏览器将会以自己不同的怪异的模式去解析渲染页面，这样页面在不同的浏览器上呈现出来的效果也就不一样，人们把这称之为“怪异模式”。

但是如果声明了，将会开启“严格模式”，又有人称之为“标准模式”，浏览器将已w3c标准来解析渲染页面。

可扩展超文本标记语言（英语：eXtensible HyperText Markup Language，XHTML），是一种标记语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。从继承关系上讲，HTML是一种基于标准通用标记语言（SGML）的应用，是一种非常灵活的置标语言，而XHTML则基于可扩展标记语言（XML），XML是SGML的一个子集。

二、script标签的defer和async

默认情况下，浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到script标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部脚本，还必须加入脚本下载的时间。

如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞，用户会感觉到浏览器“卡死”了，没有任何响应。这显然是很不好的体验，所以浏览器允许脚本异步加载，下面就是两种异步加载的语法。

<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>

上面代码中，

defer与async的区别是：defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。

如果同时指定了两个属性，则会遵从async属性而忽略defer属性。

三、介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？

（1）有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）
（2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分

IE盒模型和W3C标准盒模型的区别：

（1）W3C标准盒模型：属性width，height只包含内容content，不包含border和padding

（2）IE盒模型：属性width，height包含content、border和padding，指的是content+padding+border。

在ie8+浏览器中使用哪个盒模型可以由box-sizing（CSS新增的属性）控制，默认值为content-box，即标准盒模型；
如果将box-sizing设为border-box则用的是IE盒模型。如果在ie6，7，8中DOCTYPE缺失会将盒子模型解释为IE
盒子模型。若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型

四、对 BFC 规范（块级格式化上下文：block formatting context）的理解？

BFC的定义

BFC（Block formatting context ）“块级格式上下文”。 是用于布局块级盒子的一块渲染区域。并且与这个区域的外部毫无关系。

触发BFC的条件

满足下列条件之一就可以触发BFC

1：根元素，即html元素
2：float的值不为none
3：overflow的值不为visible
4：display的值为inline-block、inline-flex、flex、flow-root、table-caption、table-cell。
5：position的值为absolute或者fixed

BFC的作用

BFC是页面独立的一个容器，与外界的毫无关系。
与不同容器的区别是：

1：可以阻止元素被浮动的元素覆盖（可做两栏布局自适应）

2: 可以包含浮动的元素—清除浮动

3：解决同一个BFC区域的垂直方向margin塌陷的问题

后续请关注作者，经常更新

本文地址：https://blog.csdn.net/weixin_44442581/article/details/110285994