前端校招面试题目合集练习-7

题目来自于牛客网题库-前端校招面试题目合集。
该题库共501题
学习目标：题库501道题目学习一遍。

学习目标：

• 学习进度：70/501

---

学习内容：

1. 请说说box-sizing属性的用法。
   该属性用于设置或检索对象的盒模型组成模式。
   box-sizing:content-box：padding和border不被包含再定义的width 和height内。表现为标准模式下的盒模型。
   box-sizing:border-box：padding和border包含在width和height内。表现为怪异模式下的盒子模型。

2. 浏览器标准模式和怪异模式之间的区别是什么？
   标准模式：浏览器按照W3C标准解析执行代码。
   怪异模式：使用浏览器自己的方式解析执行代码。因不同浏览器解析执行不同，所有称为怪异模式。

3. 怪异Quirks模式是什么?它和标准Standards模式有什么区别？
   如果写了文档类型定义(DOCTYPE)，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。没有DOCTYPE的文档用怪异模式，但是有DOCTYPE不一定不一定不用怪异模式。
   区别在于：
   盒模型： 在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。
   设置行内元素的高宽： 在Standards模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
   设置百分比的高度： 在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

4. 谈谈对边距折叠的理解。
   多边距折叠：相邻两个或多个外边距在垂直方向会合并成一个外边距。
   相邻：没有被非空内容，padding，border,clear分隔开的margin特性。
   垂直方向外边距合并计算：
   参与折叠的margin都是正值：取较大的值为最终值。
   …都是负值：取绝对值最大的，然后从0开始向负位位移。
   …有正有负值：先取出负margin中绝对值最大的，然后和正margin值最大的相加。

5. 内联与块级标签有何区别？
   内联标签也就是行内标签。
   内联元素在同一直线上排列，默认宽度和内容有关。块级标签各占一行，宽度和内容无关，垂直排列。

   内联标签不可以包含块级标签，块级标签可以包含内联标签和块级标签。
   盒模型属性上，内联标签设置width和height无效，margin和padding两者上下无效

6. 说说隐藏元素的方式。
   使用display:none：不占用原来位置。
   使用css中visibility：hidden，占用原来位置。
   使用hidden：hidden，不占用原来位置。
   使用opacity：0，设置透明度为0，用户不可见

7. 为什么要重置浏览器默认样式？如何重置？
   因为浏览器兼容问题，不同浏览器对标签的默认值不一样。
   重置办法：
   margin:0;padding:0；
   使用CSSReset将所有浏览器默认样式设置成一样。

8. 谈谈BFC与IFC的理解。（是什么，如何产生，作用）
   (1)、什么是BFC与IFC
   a、BFC即“块级格式化上下文”， IFC即"行内格式化上下文"。

   b、BFC是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。

   c、在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ，类型可以是 block ，或者是 inline ，但不能同时属于这两者。并且， Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化， Inline boxes(块内框) 则在 Inline Formatting Context(行内格式化上下文) 里格式化。

   (2)、如何产生BFC
   当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context：
   a、float的值不为none
   b、overflow的值不为visible
   c、display的值为table-cell, table-caption, inline-block中的任何一个
   d、position的值不为relative和static

   CSS3触发BFC方式则可以简单描述为：在元素定位非static，relative的情况下触发，float也是一种定位方式。

   (3)、BFC的作用与特点
   a、不和浮动元素重叠，清除外部浮动，阻止浮动元素覆盖

   如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个重叠的现象。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态，当float不为none时，position为absolute、fixed时元素将脱离标准流。

9. 谈谈你对页面中使用定位positon的理解。
   position：static | relative | absolute | fixed | center | page | sticky
   默认值：static，center、page、sticky是CSS3中新增加的值。
   (1)static
   可以认为静态的，默认元素都是静态的定位，对象遵循常规流。此时4个定位偏移属性不会被应用，也就是使用left，right，bottom，top将不会生效。
   (2)relative
   相对定位，对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
   (3)absolute
   a、绝对定位，对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。
   b、元素定位参考的是离自身最近的定位祖先元素，要满足两个条件，第一个是自己的祖先元素，可以是父元素也可以是父元素的父元素，一直找，如果没有则选择body为对照对象。第二个条件是要求祖先元素必须定位，通俗说就是position的属性值为非static都行。
   (4)fixed
   固定定位，与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
   (5)center
   与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。（CSS3）
   (6)page
   与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3）
   (7)sticky
   对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）

10. 如何解决多个元素重叠问题。
    使用z-index属性可以设置元素的层叠顺序
    z-index属性
    语法：z-index: auto | integer
    默认值：auto
    适用于：定位元素。即定义了position为非static的元素
    取值：
    auto： 元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文，除非它是根元素。
    整数： 用整数值来定义堆叠级别。可以为负值。
    说明：检索或设置对象的层叠顺序。
    z-index用于确定元素在当前层叠上下文中的层叠级别，并确定该元素是否创建新的局部层叠上下文。
    当多个元素层叠在一起时，数字大者将显示在上面。

---

学习时间：

2021/1/14 17:00-17:35
花费时间：35min

---

寄语

新旧交替,万物更新.
又是努力学习的一天，加油！