一、什么是 BFC？如何触发？有何特点？如何解决外边距重叠的问题？
BFC 的概念
BFC 是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，它决定了其子元素如何定位，以及与其它元素的相互关系和作用。简单来说就是，BFC 是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。
触发 BFC 的方式
- 文档的根元素（
<html>）
- 浮动元素（即
float 值不为 none 的元素）
- 绝对定位元素（
position 值为 absolute 或 fixed 的元素）
- 行内块元素（
display 值为 inline-block 的元素）
display 值为 flow-root 的元素
BFC 的特点
- 包含内部浮动 - 实现浮动元素与周围内容等高
- 排除外部浮动 - 实现双列布局
- 防止外边距重叠
解决外边距重叠的方案
overflow: autodisplay: flow-root
二、三栏布局有哪些实现方式？
三、calc() 函数的作用是什么？主要用于哪些场景？
calc() 函数的作用
calc() 允许在声明 CSS 属性值时执行一些计算。
calc() 函数的使用场景
- 动态计算尺寸：
calc() 允许将不同单位进行计算，从而使元素的尺寸能够根据其它属性或容器尺寸的变化而动态调整。例如，可以使用 calc() 将两个固定像素值相加，并将结果设置为元素的宽度。
- 响应式设计：
calc() 函数非常有用于实现响应式设计，因为它使开发者能够根据不同视窗宽度或其它条件进行灵活调整。通过将百分比单位与 calc() 结合使用，可以实现基于视窗大小的动态布局。
- 处理不可预测的内容：有时候，元素的尺寸可能受到其内容的限制，而内容的长度或大小是不确定的。使用
calc() 可以处理这种情况，使元素的尺寸能够自适应内容的变化。
四、Google Chrome 如何支持小于 12px 的字体？
display: inline-block;
font-size: ...; // <length> values
transform: scale(0.5);
-webkit-transform: scale(0.5);
五、描述盒子模型？
CSS 盒子模型又称为框模型 (Box Model)，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素组成了盒子模型。- 框模型中，最内部的框是元素的实际内容，也就是元素框，紧挨着元素框外部的是内边距（
padding），其次是边框（border），然后最外层是外边距（margin），整个构成了框模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距（margin）是透明的，不会遮挡周边的其它元素。
六、HTML5 的特性有哪些？
- 语义化标签：
HTML5 引入了一些新的语义化标签，如 header、nav、section、article、aside 和 footer，用于更好地描述和组织网页内容，使搜索引擎和浏览器能更好地理解和处理页面结构。
- 音视频标签：
HTML5 提供了 video 和 audio 标签，使得在网页中嵌入视频和音频变得更加简单和直观。这消除了对插件（如 Flash）的依赖，并提供了更好的可访问性和可定制性。
- 画布标签：
HTML5 的 canvas 标签允许使用 JavaScript 在网页上绘制图形、动画和图像。这提供了一种原生的方法来创建交互式和动态的图形，如游戏和数据可视化。
- 存储：
HTML5 引入了两种新的客户端存储机制，即 localStorage 和 sessionStorage。这些机制允许在浏览器中存储数据，以便在不同页面和会话之间共享和保留数据。这为离线使用和本地缓存提供了更好的支持。
- 地理位置：
HTML5 通过 navigator.geolocation API 提供了一种在 Web 应用程序中获取用户位置的标准方法。这使得开发者可以创建基于位置的应用程序，如地图导航、附近的店铺和社交媒体。
Web Workers：HTML5 的 Web Workers 允许在后台运行脚本，而不会阻塞用户界面。这使得创建多线程 Web 应用程序成为可能，提高了性能和响应能力。
七、CSS3 的特性有哪些？
- 选择器：
CSS3 增加了多种新的选择器，如：E:last-child，E:nth-child(n)，E:nth-last-child(n)，它们可以更方便地选取需要的元素。
- 圆角：
CSS3 可以使用 border-radius 属性轻松实现圆角效果，使元素的边角更加平滑。
- 多背景图：
CSS3 可以在一个元素上设置多背景图像，例如，可以设置背景图片、背景渐变或背景附件等。
- 阴影：
CSS3 支持阴影效果，包括 text-shadow 和 box-shadow，可以为元素添加深度和立体感。
- 弹性盒子布局：
CSS3 引入了 Flexbox 模型，可以更灵活地控制元素在页面上的布局和排列方式。
- 网格布局：
CSS3 提供了 Grid 布局模型，可以更直观地定义元素在页面上的位置和大小。
- 颜色：
CSS3 支持更多的颜色空间，例如 RGBa 和 HSL，以及 opacity 等属性，让设计更加丰富多彩。
- 字体：
CSS3 通过 @font-face 规则可以加载本地或网络上的字体文件，让网页可以使用更多个性化的字体。
八、如何实现水平或垂直居中？
- 对于行内块元素来说，通过设置
text-align: center 来实现水平居中；通过设置 line-height 来实现垂直居中。
- 对于块级元素来说，通过设置
margin: auto 来实现水平居中。
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: ...; // <length> values
height: ...; // <length> values
- 无论是行内块元素，还是块级元素，通过弹性布局或绝对定位来实现水平居中和垂直居中。
九、CSS 单位中，px、em 和 rem 的区别？
px 是绝对单位，相对于显示器屏幕的分辨率，不随页面缩放而变化。计算方式为：1px = 1/96 英寸。em 是相对长度单位，相对于元素自身的字体大小，如果元素没有设置字体大小，则相对于父元素的字体大小。计算方式为：1em = 元素字体大小。rem 是相对于根元素（即 html 元素）的字体大小，它不受元素字体大小和父元素字体大小的影响，只受根元素字体大小的影响。计算方式为：1rem = 根元素字体大小。
十、隐藏一个元素有哪些方法？这些方法有什么区别？
display: none - 元素隐藏，且不占页面空间。此外，它不会触发任何绑定的事件。height: 0 - 元素隐藏，且不占页面空间。如果元素中有文本的话，需要给元素添加 overflow: hidden 和 font-size: 0px 以防止出现溢出和字体大小问题。此外，它不会触发任何绑定的事件。opacity: 0 - 这意味着元素变为完全透明，但它会占据页面上的空间，并且如果绑定了事件（如点击事件），那么这些事件仍然可以被触发。visibility: hidden - 元素隐藏，但它会占据页面上的空间。与 opacity: 0 不同的是，如果该元素绑定了事件，不会触发。transform: scale(0) - 元素隐藏，但它会占据页面上的空间。与 opacity: 0 不同的是，如果该元素绑定了事件，不会触发。
十一、如何解决文本溢出的问题？
width: ...; // <length> values
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: auto;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
