前端：每天5道面试题（css）

1. 说说你对盒子模型的理解?

每个 HTML 元素都可以看作是一个矩形的盒子，这个盒子包括内容区域、内边距、边框和外边距四个部分。
盒模型有2种 ie盒子模型（IE6以下版本浏览器)和标准w3c盒子模型

标准盒模型

总宽度 = 内容宽度 + 内边距 + 边框 + 外边距

ie 盒子模型

总宽度 = 内容宽度 + 外边距

2. 谈谈你对BFC的理解？

BFC（Block Formatting Context）是指块级格式化上下文，是 Web 页面中用来布局块级盒子的一种 CSS 渲染模式。BFC 定义了一个独立的渲染区域，其中的元素按照特定规则进行定位、排列和渲染，不会影响到外部元素的布局。

触发条件

1. 根元素 html
2. 浮动元素：float值为left、right
3. 绝对定位元素（position 为 absolute 或 fixed）
4. 行内块元素（display 为 inline-block）
5. overflow 属性值不为 visible 的块级元素。

应用场景

防止margin重叠（塌陷）
清除内部浮动

3. 如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？

这块举例几个就行

两栏布局:

1. 使用 float 布局

<div class="container">
    <div class="left-column">左侧内容</div>
    <div class="right-column">右侧内容</div>
</div>

<style>
.container {
    overflow: hidden; /* 清除浮动 */
}
.left-column {
    float: left;
    width: 200px; /* 左侧固定宽度 */
}
.right-column {
    margin-left: 210px; /* 左侧宽度 + 左右间距 */
}
</style>

2. 使用 flexbox 布局

<div class="container">
    <div class="left-column">左侧内容</div>
    <div class="right-column">右侧内容</div>
</div>

<style>
.container {
    display: flex;
}
.left-column {
    flex: 0 0 200px; /* 左侧固定宽度 */
}
.right-column {
    flex: 1; /* 右侧自适应剩余空间 */
}
</style>

三栏布局:

1. 使用 float 布局

<div class="container">
    <div class="left-column">左侧内容</div>
    <div class="middle-column">中间内容</div>
    <div class="right-column">右侧内容</div>
</div>

<style>
.container {
    overflow: hidden; /* 清除浮动 */
}
.left-column, .middle-column, .right-column {
    float: left;
}
.left-column, .right-column {
    width: 200px; /* 左右侧固定宽度 */
}
.middle-column {
    margin: 0 210px; /* 左右侧宽度 + 左右间距 */
}
</style>

2. 使用 flexbox 布局

<div class="container">
    <div class="left-column">左侧内容</div>
    <div class="middle-column">中间内容</div>
    <div class="right-column">右侧内容</div>
</div>

<style>
.container {
    display: flex;
}
.left-column, .right-column {
    flex: 0 0 200px; /* 左右侧固定宽度 */
}
.middle-column {
    flex: 1; /* 中间自适应剩余空间 */
}
</style>

4. 什么是响应式设计？响应式设计的基本原理是什么？

就是在不同的设备不同的屏幕尺寸显示最佳的页面和用户体验

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

实现响应式布局的方式有如下：

1. 媒体查询 通过媒体查询可以针对不同的设备特性（如屏幕宽度、设备类型等）应用特定的样式规则，从而实现针对不同设备的定制化布局。
2. 百分比 将元素的宽度设置为百分比，使其能够随着视口大小的改变而自适应调整
3. vw/vh 和百分比布局差不多
4. rem rem是相对于根元素html的font-size属性，默认情况下浏览器字体大小为16px，此时1rem = 16px

说一说重绘和重排？

重绘指的是在不改变页面布局的情况下更新元素样式，导致浏览器重新绘制元素的过程。例如，修改了元素的颜色、背景等样式属性，会触发重绘。重绘不会影响元素的几何尺寸和位置，所以它的开销相对较小。

重排指的是当页面布局发生改变，导致浏览器重新计算元素的几何尺寸和位置的过程。例如，添加或删除元素、修改元素的尺寸、内容等操作都可能导致重排。重排会影响整个页面甚至整个文档的布局，因此开销比重绘大得多。

重排一定重绘，重绘不一定重排

如何减少

使用 CSS3 动画和过渡
合并样式
减少DOM操作