两栏布局
<!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）多行文字溢出显示省略号
