1.css布局模型
1.文档流（Normal Flow）
- 分为块级元素（div，p）独占一行【块级布局】，行内元素（button, input, label, select, textarea, a, img）在同一行【内联布局】
- 默认布局是元素按照HTML顺序从左到右，从上到下
- 可以通过
display属性（如block 块级、inline 行内、inline-block 行内块级）调整元素的行为 - 了解更多display三种常用属性值
注意： 行内元素宽高无效，是由内容本身高度撑起，也就不会自动换行；块级可以设置宽高，特别相比行内元素，设置垂直高度对margin和padding有效，也自动换行，按从上到下排列
2.浮动（float）
- 通过
float属性（如left、right）使元素脱离文档流，并向左或向右浮动 - 清除浮动（如：overflow：hidden）
3.定位（position） 通过position属性控制元素的定位方式：
static：默认值，元素在文档流中。relative：相对定位，元素相对于自身位置偏移。absolute：绝对定位，元素相对于最近的已定位祖先元素偏移。fixed：固定定位，元素相对于视口偏移。sticky：粘性定位，元素在滚动时固定在特定位置- 通过
display: flex将容器设置为弹性盒子布局。
4. Flexbox（弹性盒子布局）
-
适用于一维布局（行或列），可以轻松实现元素的对齐、分布和排序。
-
常用属性：
justify-content：主轴对齐方式。align-items：交叉轴对齐方式。flex-direction：主轴方向（行或列）。flex-grow、flex-shrink、flex-basis：控制子元素的伸缩行为。- flex详解
5. Grid（网格布局）
-
通过
display: grid将容器设置为网格布局。 -
适用于二维布局（行和列），可以创建复杂的网格结构。
-
常用属性：
grid-template-columns、grid-template-rows：定义网格的列和行。grid-gap：设置网格间距。grid-area：定义网格区域。
-
适合构建复杂的页面布局
了解完上面内容，给个面试官满意的回答吧：
CSS布局模型是控制网页元素排列和定位的核心机制。常见的布局模型包括文档流、浮动、定位、Flexbox和Grid。文档流是默认的布局方式，元素按照HTML顺序排列；浮动可以实现文字环绕效果；定位用于精确控制元素位置；Flexbox适合一维布局，如导航栏；Grid适合二维布局，如复杂的页面结构。在实际开发中，我会根据需求选择合适的布局模型，比如用Flexbox实现居中布局，用Grid构建复杂的网格布局。
2.盒模型理解
css3盒模型有两：标准盒子模型、IE盒子模型
盒模型都是由四个部分组成的，分别是margin、border、padding和content。
标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：
- 标准盒模型的width和height属性的范围只包含了content，
- IE盒模型的width和height属性的范围包含了border、padding和content。
可以通过修改元素的box-sizing属性来改变元素的盒模型：
box-sizeing: content-box表示标准盒模型（默认值）box-sizeing: border-box表示IE盒模型（怪异盒模型）
3.BFC规则是什么
块级格式化上下文，作用是盒子（空间）内的子元素不会影响外面布局。
1.BFC是一个块级元素，会垂直方向一个接着一个排列；
2.在页面是一个隔离的独立容器，内部不会影响到外部标签
3.垂直方向距离是margin决定，同一个BFC的相邻外边距会发生重叠
3.计算BFC高度，浮动元素也是参与
怎么触发BFC?
浮动元素：float 除了none其他值
display：inline-block ， flex ，（表格单元）table-cells，（表格标题）table-captions）， grid，inline-grid等
块级元素 overflow： 除visable 其他值（hidden，auto，scroll）
绝对定位 position :absolute 或 fixed
根元素 html
BFC的作用是？
- 解决子元素浮动造成父元素高度坍塌问题 将父元素触发 BFC
- 相领子元素使用 margin 时边距重叠问题 可以给 2 个子元素各套一个触发 BFC 的父元素 等等
详细BFC可以看看# 今天来尝尝KFC，哦是弄清楚BFC😂
4.两栏布局，怎么设置左边宽度固定，右边自适应
- 1.inline-block+calc
左边定宽，右边通过calc计算值（100%-宽度left）
css
.container {
width: 100%;
}
.left {
width: 120px; /* 左边固定宽度，您可以根据实际需求修改此值 */
display: inline-block;
}
.right {
width: calc(100% - 120px); /* 右边根据左边宽度自适应 */
display: inline-block;
}如果使用float替换inline-block 行内块级元素
换成float+calc
使用 float 使 2 个盒子处于同一行，左边固定宽度，右边根据计算来确定宽度实现自适应
css
.container::after {
display: block;
clear: both;
content: "";
}
.left,
.right {
float: left;
box-sizing: border-box;
}
.right {
width: calc(100% - 120px);
}- 2.float+BFC
使用 float 和 overflow:auto 将元素在同一行，左边设置固定宽度，右边由于 BFC 会自适应
css
.container::after {
display: block;
clear: both; /*父级清除浮动*/
content: ""; /*插入空内容*/
}
.left {
float: left;
}
.right {
margin-left: 0;
overflow: auto;
}- 3.grid布局
子元素不需要设置宽度，父元素设置即可
css
.grid {
display: grid;
grid-template-columns: 120px 100%;
height: 200px;
}- 4.子元素设置宽高，右边使用margin-left
css
.left {
position: absolute;
box-sizing: border-box;
}
.right {
margin-left: 120px;
}- 5.float+margin
使用 float 将 2 个元素在同一行，左边设置宽度，右边通过 margin-left 实现隔离 2 者重叠
css
.container::after {
display: block;
clear: both;
content: "";
}
.left {
float: left;
box-sizing: border-box;
}
.right {
margin-left: 120px;
}5.什么是重排和重绘？
- 重排（Reflow):当dom变化影响元素几何（位置或是尺寸），需要重新计算生成布局。比如添加或删除可见的DOM元素、改变元素尺寸（边距、填充、边框宽度、高度和宽度）、内容变化、字体大小变化等
- 重绘（Repaint）:仅仅是外观变化，不影响位置或大小，如颜色、背景色、透明度等，这样的操作只会引起重绘
重绘不一定重排，重排一定触发重绘。
重排消耗的性能比重绘大，所以我们尽量选择代价小一点的。
PS.未完待续，文中答案有误也欢迎评论指出！