前端高频面试题–HTML+CSS

1.什么是BFC,如何触发，有什么特点，如何解决margin塌陷

概念

BFC（Block Formatting Context）块级格式化上下文，是页面中一个渲染区域，有一套自己的渲染规则，是CSS中的一种渲染模式，用于控制块级盒子布局、定位和浮动等属性的影响范围。BFC 是一个独立的渲染区域，具有一套渲染规则，规定了内部块级盒子如何布局，并且与外部的元素相互不影响。

特点

• BFC容器在计算高度时浮动元素的高度也会计算在内，在开发的时候经常会发现我们将一个块级元素设置为浮动之后，父容器的高度塌陷了，这个时候就需要将子元素设置为BFC容器，这样的话父容器的高度就不会因为子容器的浮动而塌陷了
• margin-top不重叠，指的是BFC容器内的子元素的margin-top不会和BFC这个父容器的margin-top重叠。
• 遵循从上往下从左往右的布局排列，BFC容器内的元素遵循自上而下、自左而右的布局排列方式，确保布局的有序性和可预测性。

解决塌陷
与弹性容器不一样的在于并不是直接一行display：flex就可以让一个容器变为BFC弹性容器，想把容器变为BFC容器有多种方法

1. overflow：
   只有visible不行，其他常用的都行，例如hidden，auto等都可以
2. Float
   将容器属性设置为浮动也可以将其变为BFC容器
3. display：
   flex,grind,inline-block(flex,table)大多数inline和table都行，其中我最喜欢的是将元素变成display: inline-block，使其在BFC容器里自由排列，不再受限于行内元素的束缚。
4. position：
   absolute，fixed都可以，最常用的还是推荐绝对定位，具体按照开发需求就行

2.CSS如何出现溢出，overflow不同值的区别

当使用DIV+CSS布局时，会出现很多的div嵌套——父div内嵌套一个或多个的子div。默认情况下，父div的高度是auto——它可以被子div任意的撑大。然而父div也可以有固定的高度(或宽度)，比如height:100px，那么如果子div的高度超过了这个值，在默认情况下，子div会超出父div的束缚，这就是溢出。我们可以通过设置父div的CSS属性——overflow来对子div进行控制。这里使用overflow:hidden来隐藏子元素溢出的部分。

overflow 属性用于当一个元素太大而无法适应父级容器的大小时需要做什么。该属性有四个常用的值：

• visible: 默认值。内容不会回修剪，可以呈现在元素框之外。
• hidden: 如果内容超出父级容器，超出部分将会被隐藏
• scroll: 无论是否超出容器，都会出现一个滚动条。
• auto: 如果没有超出容器的显示，将会正常显示，如果超出，将会出现一个滚动条。

3.三栏布局有什么实现方式。

1. 浮动float + calc()

先使用浮动将三栏水平排列，然后对中间栏使用calc()函数来计算去除左右两栏固定宽度后剩余的宽度。

2. 浮动float + margin 负值
利用浮动的方式，为左右两栏设置对应方向的浮动。中间一栏设置左右两个方向的margin负值。注意这种方式，中间一栏必须放到最后。

3. 圣杯布局：浮动，外边距负值和相对定位来实现。

• 父级元素设置左右的padding，三列均设置向左浮动；
• 中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行；
• 再通过设置margin负值将其移动到上一行；
• 再利用相对定位，定位到两边。

4. 双飞翼布局：浮动 + 外边距负值

双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的margin值来实现的，而不是通过父元素的padding来实现的。

5. 定位position
利用绝对定位的方式。这种实现方式的三栏HTML结构可以任意摆放，不用考虑先后次序。

6. 弹性布局 flex
利用flex布局的方式，左右两栏设置固定宽度，中间一栏设置为flex: 1;这种实现方式代码非常简洁。

7. 网格布局 grid
利用grid布局的方式，左右两栏设置固定宽度，中间一栏设置为auto。这种实现方式代码也非常简洁。

4.CSS的calc属性作用是什么，主要用于解决什么问题。

1、calc() 函数允许在指定 CSS 属性值时执行计算。它对于计算 [length]、 [percentage]、 [time]、 [numbers]、[integers]、[frequencies] 和 [angles]等特别有用。CSS calc() 函数的一个强大功能是能够组合不同的单位。这个函数可以执行预处理器不能执行的数学计算。

CSS 中的预处理器只能组合具有固定关系的单位，如角度单位、时间单位、频率单位、分辨率单位和特定长度单位。
calc( Expression)

calc( Expression)

2、calc() 函数接受一个表达式作为参数。然后将表达式的结果用作值。它可以采用任何形式并使用以下任何运算符，遵循标准运算符优先规则。 calc() 函数使用了四个基本运算符:

• 加法 +：calc(50px + 50px)
• 减法 -：calc(100% – 30px)
• 除法 /：calc(100% / 2)
• 乘法 *：calc(100vh * 2)

3、使用 CSS calc() 函数时需要注意的几件事。

• 在编写 calc() 函数语法时，必须在每个操作之间包含空格，特别是在使用 + 和 - 操作符时，否则表达式将无效。
• 当应用于媒体查询时，它不能工作
• 当除 0 时，HTML 解析器会生成一个错误
• 可以嵌套 calc() 函数

4、使用场景

• 当我们处理 CSS 变量时
• 为了得到一个新的值
• 用于不同单元之间的计算，这是预处理器无法做到的
• 定位
• 调整我们网站的结构和其他元素
• 当我们想避免重复做相同的计算时

5.如何实现水平居中和垂直居中

水平居中较为简单, 一般情况下 text-align:center,marin:0 auto; 足矣

• text-align:center;
• margin:0 auto;
• width:fit-content;
• flex
• 盒模型
• transform
• 两种不同的绝对定位方法

垂直居中:

• 单行文本, line-height
• 行内块级元素, 使用 display: inline-block, vertical-align: middle; 加上伪元素辅助实现
• vertical-align
• flex
• 盒模型
• transform
• 两种不同的绝对定位方法

我们发现, flex, 盒模型, transform, 绝对定位, 这几种方法同时适用于水平居中和垂直居中.

6.渐进增强和优雅降级

优雅降级是指首先开发一个功能完整的网站，并确保其在现代浏览器中正常运行。然后，为较老的浏览器提供降级方案，使其能够以某种方式工作，而不是完全崩溃。这种方法的目标是确保网站在各种环境中都能正常运行，同时保留一些现代浏览器的高级功能。

渐进增强是指先考虑较老的浏览器和设备，确保网站在这些环境中能够良好运行。然后，为现代浏览器提供额外的功能和优化，以提供更好的用户体验。这种方法的目标是确保网站在任何情况下都可以工作，并为一些现代浏览器提供额外的优化和功能。

两者区别：

• 优雅降级和渐进增强都是确保网站在不同浏览器和设备上的兼容性和提供更好的用户体验的设计哲学。
• 优雅降级更注重现代浏览器的性能和功能，并在必要时提供降级方案。渐进增强更注重网站的基础功能，并为现代浏览器提供额外的优化和功能。
• 在优雅降级中，先开发功能完整的网站，然后为较老的浏览器提供降级方案。在渐进增强中，先考虑较老的浏览器和设备，确保网站在这些环境中能够良好运行，然后为现代浏览器提供额外的优化和功能。
• 优雅降级可能会导致在旧版浏览器或设备上出现问题，如果没有提供降级方案，网站可能会出现错误或根本无法使用。渐进增强可以确保网站在各种浏览器和设备上都能够良好运行，但是在现代浏览器上无法充分利用浏览器的性能和功能。
• 在实践中，开发人员通常会结合两种方法，以确保网站在任何环境下都能够良好运行，并尽可能提供更好的用户体验。例如，先开发基本功能并确保其在所有浏览器和设备上都能正常运行，然后为现代浏览器提供额外的优化和功能，同时为较老的浏览器提供降级方案。

7.iframe有优缺点，解决什么问题

IFrame是一种强大的技术，它可以为我们在网页中嵌入其他网页或内容，提高网页的丰富性和可用性。但是在使用IFrame时，我们需要注意一下它的优点和缺点，选择最适合的方案，或者通过使用其他技术、异步加载或者延迟加载、框架或者模板技术等方式来解决这些问题，提高网页的性能和用户体验。只有合理使用IFrame，才能发挥它最大的效果。

iframe的优点：

1. iframe能够原封不动的把嵌入的网页展现出来。
2. 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
3. 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
4. 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

iframe的缺点：

1. 会产生很多页面，不容易管理。
2. iframe 框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
3. 代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。
4. 很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
5. iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。

8.css的盒模型

网页上的每个元素都是一个矩形的盒子，这个盒子由元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。

• 内容区域（Content） ：指元素内部实际包含内容的区域，例如文字、图片等。
• 内边距（Padding） ：内容区域与边框之间的空白区域，用来控制内容与边框的距离。
• 边框（Border） ：内边距外部的边框，用来围绕内容和内边距的区域。
• 外边距（Margin） ：边框外部的空白区域，用来控制元素与其他元素之间的距离。

盒模型的分类

在 CSS 中，有两种盒模型：标准盒模型（content-box）和 IE 盒模型（border-box）。

标准盒模型（content-box） 在标准盒模型中，元素的宽度和高度仅包括内容区域的尺寸，不包括内边距（padding）、边框（border）和外边距（margin）。这意味着，当你设置一个元素的宽度为 200px 时，这个宽度值仅包括元素的内容区域，而不包括内边距、边框和外边距的宽度。

怪异盒模型（IE盒模型） 在 IE 盒模型中，元素的宽度和高度包括了内容区域、内边距和边框的尺寸，但不包括外边距。换句话说，当你设置一个元素的宽度为 300px 时，这个宽度值包括了内容区域、内边距和边框的宽度。还是上面的那个例子，但是我们需要在style中加box-sizing: border-box要求浏览器以IE盒子模型来加载盒子。

9.css3的特性

1. 边框圆角（border-radius）：左上角，右上角，右下角，左下角。
2. 过渡（transition）：CSS 属性，持续时间，效果曲线(默认 ease)，延迟时间(默认 0)
3. 动画（animation）：动画名称，一个周期花费时间，运动曲线（默认 ease），动画延迟（默认 0），播放次数（默认 1），是否反向播放动画（默认 normal），是否暂停动画（默认 running）
4. 阴影（box-shadow）:水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置 inset 就是从外往里)
5. 背景大小（background-size）:background-size: length|percentage|cover|contain
6. 文本溢出（text-overflow）:text-overflow：clip|ellipsis|string
7. 渐变：线性渐变linear-gradient、径向渐变radial-gradient
8. 滤镜（Filter）：filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
   （实用拓展：对图片置灰 背景图高斯模糊视觉优化 图片透明度调整等等）
9. 字体（font-face）：@font-face（实用拓展：为项目配置特殊字体 引用iconfont字体图标）
10. 媒体查询：@media（实用拓展：移动端适配的解决方案之一 可以个性化定制pc端和移动端样式）

10.less和scss的区别

相同点：

• LESS和SCSS都是css的预处理器，可以拥有变量，运算，继承，嵌套的功能，使用两者可以使代码更加的便于阅读和维护。
• 都可以通过自带的插件，转成相对应的css文件。
• 都可以参数混入，可以传递参数的class，就像函数一样
• 嵌套的规则相同，都是class嵌套class

不同点：

• 声明和使用变量：LESS用@符号，SCSS用$符号表示
• 变量插值：LESS采用@{XXXX}的形式，SCSS采用${XXXX}的形式
• scss支持条件语句：SCSS可以使用if{}else，for循环等等，LESS不支持
• 应用外部css文件方式：SCSS应用的css文件名必须以‘_’开头（下划线），文件名如果以下划线开头的话，sass会认为改文件是一个应用文件，不会将它转成css文件
• 颜色函数：调整色相的话，LESS使用spin（）的函数；SCSS使用名为adjust_hue()的函数
• 引用父选择器&符号：LESS和SCSS都可以使用&符号表示父选择器，但是SCSS的&符号只能出现在一个组合选择器的开始位置，LESS则没有这个限制

SCSS和LESS都是一种基于css之上的高级语言，两者之间各有优点，sass在功能上面比LESS更强大，LESS比较的清晰明了，容易上手，主要是看大家的工作中，更倾向于使用那个进行开发，两者都能够大大提高书写代码的效率

11.::before和::after中双冒号和单冒号的区别

（1）单冒号（:）用于css3的伪类，双冒号（::）用于css3的伪元素

（2）双冒号（::）例如 ::before ::after 使用之后就会变成一个子元素存在于页面中。并没有真实存在于DOM中，可以通过查看网页源代码验证

注意： :before 和 :after 这两个伪元素，起初是在CSS2.1里新出现的。当时伪元素的前缀使用的也是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before、::after。

原文链接：https://juejin.cn/post/7342678690667921444 作者：清欢OvO