共计 4026 个字符，预计需要花费 11 分钟才能阅读完成。
两栏布局
!DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8" />
meta name="viewport" content="width=device-width, initial-scale=1.0" />
title>两栏布局/title>
style>
.contain {
display: flex;
height: 200px;
}
.left {
background-color: aqua;
width: 100px;
}
.right {
background-color: violet;
flex-grow: 1;
}
/style>
/head>
body>
div class="contain">
div class="left">左侧固定/div>
div class="right">右侧自适应/div>
/div>
/body>
/html>
三栏布局
!DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8" />
meta name="viewport" content="width=device-width, initial-scale=1.0" />
title>三栏布局/title>
style>
.contain {
display: flex;
height: 200px;
}
.left {
background-color: aqua;
width: 100px;
}
.right {
background-color: violet;
width: 100px;
}
.middle {
background-color: yellow;
flex-grow: 1;
}
/style>
/head>
body>
div class="contain">
div class="left">左侧固定/div>
div class="middle">中间自适应/div>
div class="right">右侧固定/div>
/div>
/body>
/html>
1. 两栏布局，三栏布局，居中。flex 和 绝对定位两种方案
flex 见上。父元素设置 dispaly:flex; 固定的元素设置宽度，自适应的元素用 flex-grow:1;
定位：子绝父相，子元素设置绝对定位后。如果是两栏布局，那么固定的左侧设置宽度和绝对定位，top 和 left 设为 0；自适应的右侧直接设置 margin-left 等于左侧的 width（可避免高度塌陷问题）
如果是三栏布局，那么固定的左侧设置宽度和绝对定位，top、left 和 bottom 设为 0；固定的右侧设置宽度和绝对定位，top 和 right 设为 0；自适应的中间部分直接设置 margin 上下为 0，左右为 width（可避免高度塌陷问题）
居中：
PS：margin 用法：
2. flex 了解不？讲一下
（2）flex 布局项目常见属性（子元素）：flex-grow属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。flex-shrink属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。flex属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为0 1 auto。后两个属性可选。align-self 定义子项目在侧轴上的排列方式
align-self:flex-start / flex-end / center / stretch;
order 定义子项目排列顺序，数量越小越靠前，默认为 0
3. inline 元素和 inline-block 以及 block 元素有什么区别？常见的哪些标签是内联元素
inline 元素：不可设置宽高，宽高由内容决定 span a
inline-block 元素：可设置宽高 input button img
block 元素：独占一行，可设置宽高 div h1 p
4. margin 可以为负值吗？如果是百分比，那么是相对于什么的？
margin 可以是负值，如果是百分比，相对于父元素宽度而言。
5. 说说盒子模型
content-box(标准 W3C 盒模型，默认): 块总宽度 =width(content 宽度)+margin+padding+border
元素的宽度仅仅是内容的宽度。
border-box(怪异盒模型): 块总宽度 =width(包含 padding+border)+margin
元素的宽度和高度包括了内容、内边距和边框，但不包括外边距。
6. 如何修改元素的盒子模型
用box-sizing。box-sizing: content-box（默认）标准盒模型box-sizing: border-box 怪异盒模型
7. 最常用的是什么样的盒子模型
通常我们使用 IE 怪异盒子模型的原因是因为它提供了更多的兼容性和灵活性，尤其是在处理元素的尺寸和布局时。
8. 说说 position 有几种类型，分别是什么作用
static(静态定位)：默认值。元素按照正常 DOM 流排列。relative(相对定位)：依旧占据原来的位置，依旧遵循原来的排布。相对于元素原本的位置进行定位。absolute(绝对定位)：脱离 dom 流排布，相对于祖先元素中，不为 static 的元素定位，没有就相对于最初包含块（多为页面）定位。由于脱离 dom 流，所以修改不会触发回流fixed(固定定位)：脱离 dom 流排布，相对于视口定位，和祖先元素无关。sticky(粘性定位)：在脱离和占据位置中切换，用于滚动到视区外，固定在视区内。滚动到指定位置时变为固定定位（导航栏）
9. 绝对定位是相对于什么定位的，如果父元素是 fixed，还是相对于它定位吗？
相对于祖先元素进行定位。会。但不糊相对于 statc 元素定位。
10. fixed 一定是相对于视口定位吗？如果父元素是 relative 呢？
是。与父元素定位无关。
11. 绝对定位的元素是否会脱离 dom 流呢？有什么好处?
会。修改不会触发回流（元素尺寸大小改变而需要重新渲染整个页面）
12. margin 边距重叠能解释下吗？如何解决。
兄弟元素之间的 margin 重叠：当两个垂直方向上的兄弟元素都设置了 margin，并且它们相邻时，它们的 margin 可能会重叠。重叠的规则是取两个相邻元素中 margin 较大的值作为实际的 margin，而另一个元素的 margin 会被忽略。
如何解决？包裹一个父元素，父元素触发 BFCC
13. 说一下 BFC
了解，块级格式化上下文，用来隔离元素的。
常见作用用来清除 float, 但是 float 布局早已过时。没有深入了解。
也可以用来清除 margin 折叠，但是实际用处并不大。
PS：BFC 如何触发？
（1）overflow 不为 visible（hidden）
（2）position 为 absolute 或者 fixed
（3）display 为 flex，inline-block（行内块元素）
14. 说说 css 中有哪些选择器
id 选择器(#）、类选择器（.）、标签选择器（div、span 等）、后代选择器（如 div span 中间是空格，只所有后代）、子选择器（如 div>p，只能是儿子）、相邻兄弟选择器（如 h1+p）、伪类选择器、伪元素选择器
伪类：
:visited: 被访问过的连接
:hover：鼠标悬浮
:first-child: 第一个子元素
伪元素：
:first-letter：首字母
:before：元素前
:after：元素后
15. 说说优先级。如何覆盖元素的内联属性
!important > 行内样式（内联）> id 选择器 > 类选择器 > 标签选择器
同等类型以数量作为权重，数量越多，权重越重
权重相同看 css 文件中的顺序
16. 你知道回流和重绘吗？如何减少回流？
回流：由于元素尺寸发生变化，导致元素排列进行调整，需要重新生成布局
重绘：元素样式发生变化，只重新绘制该元素无需重新布局
回流一定触发重绘，反之不是
如何减少回流？
批量修改样式，而不是一次一次的修改；
使用绝对定位和固定定位，使元素脱离 DOM 流；
减少对元素位置大小的获取，由于浏览器需要计算，从而触发回流。
17. 场景题：如何隐藏一个元素？
（1）opacity：0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如 click 事件，那么点击该区域，也能触发点击事件的 （仍旧占用空间，且绑定事件）
（2）visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件，隐藏对应元素，在文档布局中仍保留原来的空间（重绘）（仍占用空间，但绑定事件生效）
（3）display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素。不显示对应的元素，在文档布局中不再分配空间（回流 + 重绘）（不占用空间，会改变布局）
18. 场景题：如何用 css 画一个三角形
head>
meta charset="UTF-8" />
meta name="viewport" content="width=device-width, initial-scale=1.0" />
title>三角符号/title>
style>
div:after {
position: absolute;
width: 0;
height: 0;
content: "";
border-right: 100px solid transparent;
border-top: 100px solid #000;
border-left: 100px solid transparent;
border-bottom: 100px solid transparent;
}
/style>
/head>
body>
div>/div>
/body>
19. 场景题：单行文字溢出处理，多行文本溢出处理
（1）单行文字溢出显示省略号
（2）多行文字溢出显示省略号
原文地址: 前端面试题整理 -CSS
