【前端高频面试题】

精心整理，自用笔记，持续更新中。。。

meta标签

"Meta标签"是HTML中的一个元素，用于提供关于网页的元数据（metadata）。它们通常不会直接显示在网页上，但可以为搜索引擎和浏览器提供有关网页内容的信息。

常见的meta标签包括：

1. <meta charset="字符集">：指定网页所使用的字符集，确保正确显示文本内容。
2. <meta name="viewport" content="属性值">：定义网页在移动设备上的视口（可见区域）大小，以便适应不同屏幕尺寸。
3. <meta name="keywords" content="关键词">：指定与网页相关的关键词，有助于搜索引擎了解网页内容。
4. <meta name="description" content="网页描述">：提供网页的简短描述，有助于搜索引擎显示相关搜索结果的摘要。
5. <meta name="robots" content="属性值">：控制搜索引擎爬虫对网页的索引和抓取行为。

这些是一些常见的meta标签，通过在HTML文档中添加适当的meta标签，可以优化网页在搜索引擎中的显示和排名，并改善用户体验。

盒模型

盒模型：IE模型、W3C模型

盒模型：content、padding、border、margin

区别：IE的content部分把border（边框）和padding（填充）算进去

W3C标准盒子模型：

IE怪异盒子模型：

标准浏览器通过设置css3的box-sizing：border-box属性，触发怪异模式解析宽高

BFC

BFC全称：块级格式化上下文（Block formatting context）决定元素如何对其内容进行定位以及与其他元素的关系和相互作用。

形成独立的渲染区域，内部元素的渲染不会影响外界，IE下为Layout,通过zoom:1触发

触发BFC的条件：

1. 浮动元素  float不是none
2. 绝对定位元素 position是absolute或fixed
3. flex元素
4. 块级元素  overflow不是visible
5. 根元素或其他包含它的元素
6. 内联块（inline-block）
7. 表格单元格、表格标题

BFC约束规则：

1. 同一个BFC中元素相互影响，可能外边距重叠
2. 内部盒垂直排列
3. 浮动盒区域不叠加到BFC上,内部元素通过设置overflow清除浮动
4. BFC为页面上一个独立容器，不影响外界元素
5. 计算BFC高度，考虑BFC包含的所有元素，包括浮动元素
6. margin box左边与border box左边接触、

应用场景：

1. 垂直外边距重叠问题
2. 去除浮动
3. 自适用两列布局（float+overflow）