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

最新推荐文章于 2024-03-29 03:23:26 发布

Yisonj

最新推荐文章于 2024-03-29 03:23:26 发布

阅读量167

点赞数

分类专栏： web前端面试题合集文章标签：前端面试

本文链接：https://blog.csdn.net/weixin_45554136/article/details/112620193

版权

web前端面试题合集专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

学习目标：

学习进度：70/501

学习内容：

请说说box-sizing属性的用法。
该属性用于设置或检索对象的盒模型组成模式。
box-sizing:content-box：padding和border不被包含再定义的width 和height内。表现为标准模式下的盒模型。
box-sizing:border-box：padding和border包含在width和height内。表现为怪异模式下的盒子模型。
浏览器标准模式和怪异模式之间的区别是什么？
标准模式：浏览器按照W3C标准解析执行代码。
怪异模式：使用浏览器自己的方式解析执行代码。因不同浏览器解析执行不同，所有称为怪异模式。
怪异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模式下却会失效。
谈谈对边距折叠的理解。
多边距折叠：相邻两个或多个外边距在垂直方向会合并成一个外边距。
相邻：没有被非空内容，padding，border,clear分隔开的margin特性。
垂直方向外边距合并计算：
参与折叠的margin都是正值：取较大的值为最终值。
…都是负值：取绝对值最大的，然后从0开始向负位位移。
…有正有负值：先取出负margin中绝对值最大的，然后和正margin值最大的相加。
内联与块级标签有何区别？
内联标签也就是行内标签。
内联元素在同一直线上排列，默认宽度和内容有关。块级标签各占一行，宽度和内容无关，垂直排列。

内联标签不可以包含块级标签，块级标签可以包含内联标签和块级标签。
盒模型属性上，内联标签设置width和height无效，margin和padding两者上下无效
说说隐藏元素的方式。
使用display:none：不占用原来位置。
使用css中visibility：hidden，占用原来位置。
使用hidden：hidden，不占用原来位置。
使用opacity：0，设置透明度为0，用户不可见
为什么要重置浏览器默认样式？如何重置？
因为浏览器兼容问题，不同浏览器对标签的默认值不一样。
重置办法：
margin:0;padding:0；
使用CSSReset将所有浏览器默认样式设置成一样。
谈谈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时元素将脱离标准流。
谈谈你对页面中使用定位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）
如何解决多个元素重叠问题。
使用z-index属性可以设置元素的层叠顺序
z-index属性
语法：z-index: auto | integer
默认值：auto
适用于：定位元素。即定义了position为非static的元素
取值：
auto：元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文，除非它是根元素。
整数：用整数值来定义堆叠级别。可以为负值。
说明：检索或设置对象的层叠顺序。
z-index用于确定元素在当前层叠上下文中的层叠级别，并确定该元素是否创建新的局部层叠上下文。
当多个元素层叠在一起时，数字大者将显示在上面。