前端面试题总结（3）

我会带着你远行 2022-10-07 13:54 780阅读 0赞

### 一、题目 ###

1、关于 BFC (block formatting context)，以下说法错误的有：

A、display 的值为 table-cell , table-caption和 inline-block 中的其中一个时，可触发 BFC

B、postion 的值为 relative 和 static 时可触发BFC

C、overflow-hidden 可作为常用 BFC 布局属性使用

D、只要元素可以触发BFC，就无须使用 clear:both 来清除浮动的影响

2、根据栅格系统的标准用法，错误的是

A、

B、

C、

D、

3、以下jQuery方法中那个方法可以设置渐变为给定的不透明度

A、$(selector).fadeIn()

B、$(selector).fadeOut()

C、$(selector).fadeToggle()

D、$(selector).fadeTo()

4、关于XML，JSON、HTML5下面哪些描述是错误的 ( ) 【不定项】

A、JSON比XML在数据编码上JSON更具有效率，更节约空间

B、HTML5是一种特殊的XML

C、XML对数据的类型描述表达比JSON更丰富

D、HTML5在跨系统交互面是一种理想的交换格式

E、XML比JSON更能表达结构化数据

F、存在一些数据库，直接支持XML或JSON数据的操作，如mongodb, postgresql

5、以下关于Histroy对象的属性或方法描述正确的是（）【不定项】

A、back回到浏览器载入历史URL地址列表的当前URL的前一个URL

B、go表示刷新当前页面

C、length保存历史URL地址列表的长度信息

D、forward转到浏览器载入历史URL地址列表的当前URL的下一个URL。

6、`<i><em>`标签语义分别表示斜体和加粗，是否正确？

7、以下Js程序的输出是什么（）

<SCRIPT LANGUAGE="JavaScript">
        var a="undefined";
        var b="false";
        var c="";
        function assert(aVar){
            if(aVar)     
                alert(true);
            else  
                alert(false);
        }
        assert(a);
        assert(b);
        assert(c);
    </SCRIPT>

8、html5的跨文档消息传输说法错误的是：

A、可以实现同域内的 web 页面之间可以互相通信

B、缺点是不能实现跨域通信

C、可以相互传递字符串和对象

D、使用这个功能，需要获取到网页所在窗口对象的实例

9、

(function() {
    
        var x=foo();
    
        var foo=function foo() {
            return "foobar"
        };
        return x;
    })();

A、foo() B、类型错误 C、undefined D、foobar

10、如果想要让一个P 标签，在1s内缓慢的以滑动方式隐藏，要怎么实现：

A、$("p").slideUp(1000);

B、$("p").slideDown(1000);

C、$("p").mergeUp(1000);

D、$("p").mergeDown(1000);

11、CSS3新增特性有（）【不定项】

A、font-size B、@media C、@keyframes D、flexbox

12、触摸事件包括以下哪几种？（）【不定项】

A、touchStart B、touchMove C、touchCancel D、touchEnd

13、下列定义的 css 中，哪个权重是最低的？（）

A、\#game div.name

B、\#game .name

C、\#game div

D、\#game .name span

14、下列 html 语义化标签中，描述存在错误的是

A、`<em>`强调文字，`<blockquote>`长文本引用

B、`<strong>`强调文字，`<h1>`文章栏目标题

C、`<a>`超链接，`<p>`文章段落

D、`<section>`定义文档中的节，`<nav>`导航

E、`<ul>`有序列表。`<ol>`无序列表

15、Number(null);

上面的代码将返回：

16、白屏时间first paint和可交互时间dom ready的关系是？

17、微信公众号相关的H5页面测试时，下列哪项说法是错误的？

A、H5页面在第一次打开时，需要测试公众号授权。

B、手机设置里定位未被打开时，H5页面的定位将要手动选择。

C、公众号未授权进行定位时，H5页面的定位将要手动选择。

D、H5页面需要测试页面是否能被浏览器正常打开。

18、下述代码，在浏览器中执行的结果是

var A = { n: 4399 }
    var B = function(){this.n = 9999}
    var C = function(){var n = 8888}
    B.prototype = A
    C.prototype = A
    A.n++
    console.log(b.n)
    console.log(c.n)

19、要将下面代码中超链接文本呈现为红色，不可以使用的样式表是（ ）。

A、a:link\{color:red\}

B、div a:link\{color:red\}

C、div>a:link\{color:red\}

D、div:first-child\{color:red\}

20、向当前\#list的最后元素之后添加100个新的li节点，合理的操作方式是？

A、通过循环方式创建新的li节点，并依次添加到\#list中

B、先将\#list节点的display设置为none，通过循环方式创建新的li节点，并依次添加到\#list中，最后再将\#list节点的display设置为block

C、取出\#list中现有的li节点的html，将它与新增的li节点对应的html代码拼接成字符串，一次性插入到\#list中

D、创建Fragment，通过循环方式创建新的li节点，添加到Fragment中，最后再将Fragment添加到\#list中

21、以下位于`<head>`间的代码片段是做什么用的

A、使得页面编码合乎要求

B、表示支持响应式设计

C、支持正常的绘制和缩放

D、表示针对滚屏进行适当的适配

22、css 中可继承的属性有哪些 【不定项】

A、height B、font-size C、border D、width E、color

23、分析下面代码：

<html>
     <head>
     <script>
     function myFunc() {
     document.write(a);
     document.write(func());
     var a = 1;
     function func() {
     return 2;
     }
     }
     </script>
     </head>
     <body>
     <p>1</p>
     <button onclick = "myFunc()">点击</button>
     </body>
     </html>

点击按钮后页面上的最终输出结果为：（）

24、在 HTML 页面上包含如下所示的层对象，则 javascript 语句 document.getElementById(“info”).innerHTML 的值是（）

A、请填写

B、`<p>请填写</p>`

C、id=”info” style=”display:block”

D、`<div id="info" style="display:block"><p>请填写</p></div>`

25、以下代码输出结果为（ ）

var str1=new RegExp("e");
    document.write(str1.exec("hello"));

26、以下 javascript 代码，在浏览器中运行的结果是

function foo() {
    	console.log('first')
    	setTimeout(function() {
    		console.log('seconde')
    	}, 5)
    }
    for (var i = 0; i < 43999999; i++) {
    	foo()
    }

A、first,second,first,second…依次顺序输出

B、首先全部输出first，然后全部输出second

C、first，second无顺序输出

D、首先输出first，超出5ms输出所有second，最后输出余下的first

27、css设置链接样式下列说法正确的是（）

A、a:hover可以在a:visited 之前生效

B、a:hover可以在a:link之前生效

C、a:active 必须位于 a:hover 之后

D、a:active - 链接被点击后的样式

28、下列说法正确的是？（）【不定项】

A、display: none；不为被隐藏的对象保留其物理空间；

B、visibility:hidden;所占据的空间位置仍然存在,仅为视觉上的完全透明；

C、visibility:hidden;产生reflow和repaint(回流与重绘)；

D、visibility:hidden;与display: none;两者没有本质上的区别；

29、下列属于HTML5新元素的是？（）【不定项】

A、header B、nav C、section D、viewport

### 二、解答 ###

#### 1、B ####

在一个Web页面的CSS渲染中，[块级格式化上下文][Link 1] (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

为了便于理解，我们换一种方式来重新定义BFC。一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：

1、float的值不是none。  
2、position的值不是static或者relative。  
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex  
4、overflow的值不是visible

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

#### 2、C ####

Bootstrap 框架的网格系统工作原理如下：

1 、数据行 (.row) 必须包含在容器（ .container ）中，以便为其赋予合适的对齐方式和内距 (padding) 。

如：

2 、在行 (.row) 中可以添加列 (.column) ，但列数之和不能超过平分的总列数，比如 12 。

如：

3 、具体内容应当放置在列容器（ column ）之内，而且只有列（ column ）才可以作为行容器 (.row) 的直接子元素

4 、通过设置内距（ padding ）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（ margin ）来抵消内距 (padding)的影响

详： [http://www.imooc.com/code/2325][http_www.imooc.com_code_2325]

D（正确）

关于列的嵌套

Bootstrap 框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（ row ）容器，然后在这个行容器中插入列。但在列容器中的行容器（ row ），宽度为 100% 时，就是当前外部列的宽度。

详： [http://www.imooc.com/code/2329][http_www.imooc.com_code_2329]

#### 3、D ####

.fadeIn() 使用淡入效果显示元素

.fadeOut() 淡入效果隐藏元素

.fadeToggle() 淡入效果显示 / 隐藏元素来回切换

.fadeTo() 元素的透明度逐渐变化到制定的值

#### 4、BDE ####

B ----- HTML-Hyper Text Markup Language超文本标记语言，被设计用来显示数据，核心在于数据的外观。HTML文档网页 XML-EXtensible Markup Language可扩展标记语言，被设计用于结构化、传输和存储数据，核心在于数据的内容。XML文档纯文本 你可以选择在web应用程序中，使用XML传输数据，使用HTML格式化并显示数据。它们不是相似竞争互相替代的关系，它们互相合作和互补。 所以从设计理念上看，HTML和XML的关系，就像Java和Javascript、雷锋和雷峰塔的关系-即相互独立，基本没啥关系。

D ----- JSON 是存储和交换文本信息的语法，是轻量级的文本数据交换格式；而HTML5是为了能在移动设备上支持多媒体而被创造，是HTML（用来描述网页的一种标记语言）最新的修订版本。

https://www.jianshu.com/p/5f5ebefd0cbe

E -----JSON可以包含更多的结构化信息，更容易表达不同的数据格式，像numbers ，string 和NULL值，甚至是数组。

#### 5、AD ####

考察的是浏览器的**内置对象**管理模型，简称BOM(Browser Object Model)中的Histroy属性和方法。

*  length 返回浏览器历史列表中的URL数量。**所以C中表述的长度信息是错误的。**
 *  back() 加载 history列表中的**前一个URL**。
 *  forward() 加载 history 列表中的**下一个URL**。
 *  go() 加载history列表中的**某个具体页面**。**所以B的表述刷新当前页面是错误的。**

#### 6、错误 ####

*都表示斜体，如果这种斜体字对该浏览器不可用的话，可以使用高亮、反白或加下划线等样式。区别在于表示强调，单纯表示斜体*

*标签可以被设备识别，而标签不能被识别。*

#### 7、true，true，false ####

变量abc都是字符串型的变量，而不是真正的undefined和false，在判断里都会被认为是真值，显示true，只有空串为false

<table> 
 <thead> 
  <tr> 
   <th>数据类型</th> 
   <th>转换为true</th> 
   <th>转换为false</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>boolean</td> 
   <td>true</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>String</td> 
   <td>任何非空字符串</td> 
   <td>空字符串</td> 
  </tr> 
  <tr> 
   <td>Number</td> 
   <td>任何非零数字值</td> 
   <td>0和NaN</td> 
  </tr> 
  <tr> 
   <td>Object</td> 
   <td>任何对象</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>Undefined</td> 
   <td>n/a</td> 
   <td>undefined</td> 
  </tr> 
 </tbody> 
</table>

#### 8、B ####

跨文档已经是跨域的一种

h5提供了网页文档之间发送信息和互相接收的功能。使用这个功能，只要获得网页窗口所在对象的实例，即可以同域（端口号+域）可以相互通信，跨域也可以相互通信。

#### 9、B ####

var x = foo();
    var foo=function foo() {...}

语句中变量的声明会提升，但是定义不会提升。以上代码等同于：

var foo;
    var x = foo();
    foo = function foo() {...}

当执行到 x = foo() 时，由于foo未被定义为函数，所以会返回

TypeError: foo is not a function

foo变量“被提前”了，但是他的赋值（也就是函数）并没有被提前，从这一点上来说，和前面我们所讲的变量“被提前”是完全一致的，并且，由于“被提前”的变量的默认值是 undefined。

函数声明可以被提前，但函数表达式不能被提前

#### 10、A ####

slideUp()和slideDown都是jQuery函数，

slideUp()通过使用滑动效果，隐藏被选元素，如果元素已显示出来的话。

slideDown() 方法通过使用滑动效果，显示隐藏的被选元素。

#### 11、BCD ####

[css3新增特性][css3]

1、CSS3选择器

2、CSS3边框(Borders)

3、CSS3背景

4、CSS3渐变

5、CSS3文本效果

6、CSS3字体(@font-face规则)

7、CSS3转换和变形

1）2D转换方法

2）3D转换属性

8、CSS3过度（transition属性）

9、CSS3动画（@keyframes规则 animation属性）

10、CSS3多列

11、CSS3盒模型

12、CSS3伸缩布局盒模型(弹性盒子)（flexbox）

13、CSS3多媒体查询（@media）

#### 12、ABCD ####

**以下是四种touch事件**

touchstart: //手指放到屏幕上时触发

touchmove: //手指在屏幕上滑动式触发

touchend: //手指离开屏幕时触发

touchcancel: //系统取消touch事件的时候触发，这个好像比较少用

每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表

touches: //当前屏幕上所有手指的列表

targetTouches: //当前dom元素上手指的列表，尽量使用这个代替touches

changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches

#### 13、C ####

优先级是：

内联样式 > id 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器。

多个选择器组合的时候，不应该简单地给这些选择器分配权值，然后相加比较大小。因为上面所说的优先级是不能越级的，比方说 1 个 id 选择器能顶你 n 个类选择器…所以要逐级比较，同级的就比较数量，数量多的优先级高。 当然，!important 的优先级最高。

#### 14、E ####

`<blockquote>` 标签定义块引用。

`<h1> - <h6>`标签可定义标题。

`<strong>`标签和`<em>`标签一样，用于强调文本，但它强调的程度更强一些。

`<a>`标签定义超链接，用于从一张页面链接到另一张页面。

`<p>`标签定义段落。 `<section>` 标签定义文档中的节（section、区段）。 `<nav>` 标签定义导航链接的部分。 `<ul>`标签定义无序列表。 `<ol>` 标签定义有序列表。

#### 15、0 ####

下面几个都会转化为0：

Number()
    Number(0)
    Number('')
    Number('0')
    Number(false)
    Number(null)
    Number([])
    Number([0])
    
    console.log(Number(""));           //0
    console.log(Number(null));         //0
    console.log(Number(undefined));    //NaN
     
    console.log(parseInt(""));        //NaN
    console.log(parseInt(null));      //NaN
    console.log(parseInt(undefined)); //NaN
     
    console.log(null == 0); //false
    console.log(undefined == 0); //false

#### 16、没关系 ####

页面的性能指标详解：

白屏时间（first Paint Time）——用户从打开页面开始到页面开始有东西呈现为止

首屏时间——用户浏览器首屏内所有内容都呈现出来所花费的时间

用户可操作时间(dom Interactive)——用户可以进行正常的点击、输入等操作，默认可以统计domready时间，因为通常会在这时候绑定事件操作

总下载时间——页面所有资源都加载完成并呈现出来所花的时间，即页面 onload 的时间

#### 17、B ####

手机定位未打开，H5和微信公众号没有权限，手动选择也不行

#### 18、9999 4400 ####

new运算的具体执行过程：

1)创建一个空对象

2)把这个空对象的\_\_proto\_\_指向构造函数的prototype

3)把这个空对象赋值给this

4)执行构造函数内的代码，注意此时的this指向新对象，this.n=9999 等价于b.n=9999;

在查找 b.n 是首先查找 b 对象自身有没有 n 属性，如果没有会去原型（prototype）上查找

当执行 var b = new B() 时，函数内部 this.n=9999(此时this指向b) 返回b对象，b对象有自身的n属性，所以返回 9999

console.log(c.n);

同理

当执行 var c = new C() 时，c对象没有自身的n属性，向上查找，找到原型 （prototype）上的 n 属性，因为 A.n++(此时对象A中的n为4400)，所以返回4400

#### 19、D ####

div:first-child

表示选择属于父元素的第一个子元素的每个

元素。

#### 20、D ####

合理的方式应当是在保证性能的同时避免安全问题。

A 显然不行，每次插入都会触发重绘和重排；

B 也不行，虽然因为隐藏避免了重绘，但因为没有脱离文档流，每次插入时重排还是会发生；

CD 可能有争议，因为都只会触发一次重绘和重排。按理来说直接操作HTML是性能最好的手段，因为就是一个简单的字符串操作，但是可能存在XSS攻击的风险，就不如 Fragment 安全。

#### 21、B ####

1) <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />   
    
     //强制让文档的宽度与设备的宽度保持1:1，   
    
     //文档初始化缩放比例是1:1，   
    
     //不允许用户点击屏幕放大浏览，    
    
    //允许用户缩放到的最大比例，   
    
     //尤其要注意的是content里多个属性的设置一定要用逗号+空格来隔开，如果不规范将不会起作用。其他属性有：width;height; initial-scale; minimum-scale; maximum-scale; user-scalable;
    
    2) <meta name="apple-mobile-web-app-capable" content="yes" />    
    
     //iPhone私有标签，它表示：允许全屏模式浏览
    
    3) <meta name="apple-mobile-web-app-status-bar-style" content="black" />    
    
    //iPhone私有标签，它指定的iPhone中safari顶端的状态条的样式
    
    4) <meta name="format-detection" content="telephone=no; email=no" />    //不识别邮件和不把数字识别为电话号码

#### 22、BE ####

继承就是指子节点默认使用父节点的样式属性。

不可继承的属性太多了不要背，记住可以继承的属性有哪些就行了。可以继承的属性很少，只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承。这么来记很轻松的呀！不要被下边的吓到了哦~

所有元素可继承：visibility和cursor。
    内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
    终端块状元素可继承：text-indent和text-align。
    列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

#### 23、undefined2 ####

题目问的是点击按钮后页面上的最终输出结果，所以原来页面上的p标签的1，会被document.write函数输出的内容覆盖。所以没有1。

打印a是undefined是因为var a的时候进行了变量提升，但是要执行到那一步才会真的赋值。

<html>
     <head>
     <script>
     function myFunc() {
     document.write(a); // a已变量提升，但是因为赋值在后面，所以打印undefined
     document.write(func()); // 执行函数 打印出2
     var a = 1; // 这里的a已经变量提升了，但是在这一步才赋值
     function func() {
     return 2;
     }
     }
     </script>
     </head>
     <body>
     <p>1</p>
     <button onclick = "myFunc()">点击</button>
     </body>
     </html>

document.write 需要向文档流中写入内容，所以，若在一个已完成加载的文档上调用 document.write，就会自动调用 document.open，这将清空该文档已加载的内容。

变量提升，赋值不提升！！！

#### 24、B ####

**test.innerHTML**:

也就是从对象的起始位置到终止位置的全部内容,包括Html标签。

上例中的test.innerHTML的值也就是“`<span style="color:red">test1</span> test2` ”。

**test.innerText:**

从起始位置到终止位置的内容, 但它去除Html标签

上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

**test.outerHTML:**

除了包含innerHTML的全部内容外, 还包含对象标签本身。

上例中的text.outerHTML的值也就是`<div id="test"><span style="color:red">test1</span> test2</div>`

#### 25、e ####

RegExp 对象的主要方法是 exec()，该方法是专门为捕获组而设计的。 exec()接受一个参数，即要应用模式的字符串，然后返回包含第一个匹配项信息的数组；或者在没有匹配项的情况下返回 null。

如果匹配成功，exec() 方法返回一个数组，并更新正则表达式对象的属性。返回的数组将完全匹配成功的文本作为第一项，将正则括号里匹配成功的作为数组填充到后面。

如果匹配失败，exec() 方法返回 [null][]。

> [https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global\_Objects/RegExp/exec][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_RegExp_exec]

var str1=new RegExp("e");
    str1.exec("hello")
    ["e", index: 1, input: "hello", groups: undefined]
    
    var str1=new RegExp("l");
    str1.exec("hello")
    ["l", index: 2, input: "hello", groups: undefined]

#### 26、B ####

JavaScript 是单线程的，setTimeout 设置的是异步任务，会放在 macrotask 里面，等待执行栈的代码执行完毕之后才会执行 macrotask 里面的异步任务，所以这里会等待 for 循环执行完毕才会执行定时器设置的任务。

当我们调用一个方法的时候，js会生成一个与这个方法对应的执行环境（context），又叫执行上下文。这个执行环境中存在着这个方法的私有作用域，上层作用域的指向，方法的参数，这个作用域中定义的变量以及这个作用域的this对象。 而当一系列方法被依次调用的时候，因为js是单线程的，同一时间只能执行一个方法，于是这些方法被排队在一个单独的地方。这个地方被称为执行栈。

当一个脚本第一次执行的时候，js引擎会解析这段代码，并将其中的同步代码按照执行顺序加入执行栈中，然后从头开始执行。如果当前执行的是一个方法，那么js会向执行栈中添加这个方法的执行环境，然后进入这个执行环境继续执行其中的代码。当这个执行环境中的代码 执行完毕并返回结果后，js会退出这个执行环境并把这个执行环境销毁，回到上一个方法的执行环境。这个过程反复进行，直到执行栈中的代码全部执行完毕。

以上的过程说的都是同步代码的执行。那么当一个异步代码（如发送ajax请求数据）执行后会如何呢？前文提过，js的另一大特点是非阻塞，实现这一点的关键在于下面要说的这项机制——事件队列（Task Queue）。

js引擎遇到一个异步事件后并不会一直等待其返回结果，而是会将这个事件挂起，继续执行执行栈中的其他任务。当一个异步事件返回结果后，js会将这个事件加入与当前执行栈不同的另一个队列，我们称之为事件队列。被放入事件队列不会立刻执行其回调，而是等待当前执行栈中的所有任务都执行完毕， 主线程处于闲置状态时，主线程会去查找事件队列是否有任务。如果有，那么主线程会从中取出排在第一位的事件，并把这个事件对应的回调放入执行栈中，然后执行其中的同步代码…，如此反复，这样就形成了一个无限的循环。这就是这个过程被称为“事件循环（Event Loop）”的原因。

#### 27、C ####

解析：a:link,a:visited,a:hover,a:active 分别是什么意思?

1.  link:连接平常的状态
2.  visited:连接被访问过之后
3.  hover:鼠标放到连接上的时候
4.  active:连接被按下的时候

正确顺序：“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。再重复一遍正确的顺序：a:link、a:visited、a:hover、a:active .

因为当鼠标经过未访问的链接，会同时拥有a:link、a:hover两种属性，a:link离它最近，所以它优先满足a:link，而放弃a:hover的重复定义。当鼠标经过已经访问过的链接，会同时拥有a:visited、a:hover两种属性，a:visited离它最近，所以它优先满足a:visited，而放弃a:hover的重复定义。究其原因，是css的就近原则“惹的祸”。

#### 28、BD ####

A、 display: none；不为被隐藏的对象保留其物理空间；

B、 visibility:hidden;所占据的空间位置仍然存在,仅为视觉上的完全透明；

C、 visibility:hidden;产生reflow和repaint(回流与重绘)；

D、 visibility:hidden;与display: none;两者没有本质上的区别；

#### 29、ABC ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70]

[Link 1]: http://www.w3.org/TR/CSS21/visuren.html#block-formatting
[http_www.imooc.com_code_2325]: http://www.imooc.com/code/2325
[http_www.imooc.com_code_2329]: http://www.imooc.com/code/2329
[css3]: https://www.cnblogs.com/sunyang-001/p/10957925.html
[null]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/null
[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Reference_Global_Objects_RegExp_exec]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70]: /images/20221005/75fd1d2c99b742439c5ef1f2f456082a.png