【20230508】面试题每日打卡-CSS（一）待业已经两个月了，该复习的面试题也都过了一遍，不过由于面试很少，每天学习

待业已经两个月了，该复习的面试题也都过了一遍，不过由于面试很少，每天学习的状态都是心浮气躁的，也没有对每日的学习做一些明确的规划。而面试题这种东西，有的东西忘记了自己都不知道......因此我决定以更文打卡的形式来将自己的学习记录进行量化，个人认为这是费曼学习法践行的一种方式，也是一种习惯和执行力的养成。

两种盒子

标准盒子和怪异盒子（IE盒子）
在css中使用box-sizing设置，标准对应content-box，怪异对应border-box
从上面的属性也可以看出来，标准盒子的宽高只包括content，怪异盒子的宽高包括content、padding、border

BFC

块级格式化上下文
是独立的布局容器，容器内部元素样式不影响外部
形成方式：
- overflow为除了visible外的值
- display: inline-block、display: flex、display: grid等
- 元素浮动
- 设置相对定位or绝对定位

解决的问题：
- 容器内元素浮动导致的高度塌陷
- margin塌陷问题（相邻元素margin重叠）

回流和重绘

回流是指当页面中的元素发生改变（例如修改了元素的宽度、高度、位置、字体大小等属性）时，浏览器需要重新计算页面中所有元素的位置和大小，然后重新布局页面的过程。这个过程很消耗性能，因为它会涉及到DOM树的重新构建和CSS计算等操作。
重绘是指当页面中的元素样式发生改变，但是不影响布局（例如修改了元素的颜色、背景、边框等属性）时，浏览器只需要重新绘制受影响的元素，而不需要重新计算布局，这个过程相对于回流来说更加轻量级。

元素居中

行内元素：
- flex布局（justify-content:center，align-items:center）
- line-height设置为父容器高度从而实现垂直居中，使用text-align:center来进行水平居中
块级元素：
- flex布局（justify-content:center，align-items:center）
- 父元素相对定位+子元素绝对定位+top:50%;left:50%+transform:translate(-50%,-50%)

css样式权重

内联样式 > ID选择器 > 类选择器、伪类选择器、属性选择器 > 标签选择器、伪元素选择器
!important权重最大，能覆盖内联样式

隐藏元素的几种方式

display: none：不占空间，完全消失，触发重绘和重排
opacity: 0：本质就是变透明，依旧占空间
visibility: hidden：占空间，但是在页面上不可见，仅触发重绘

link和@import的区别

link在页面加载时同时加载样式表、@import在页面加载后再加载页面样式表。因此，当网页加载过慢时，使用@import可能会导致页面出现闪烁现象。
link标签可以通过JavaScript进行DOM操作，而@import引入的样式表无法进行DOM操作。
由于link标签在页面加载时就已经应用于元素，因此它的 CSS 样式具有比@import更高的优先级。在相同选择器的情况下，link引入的样式表会覆盖@import引入的样式表。

常用长度单位含义

常用长度单位有以下几种：
- 像素：px（屏幕上的一个物理像素）
- 百分比：%（父元素宽度的x%）
- 根据字体大小计算：em（相对于元素的字体大小（font-size）计算）、rem（相对于元素的字体大小（font-size）来计算的）
- 根据视口计算：vw和vh，分别表示视口宽度（viewport width）和视口高度（viewport height）的百分比

使浏览器支持小于12px的字体

问题成因：Chrome的内部限制
解决方案：使用缩放，可以有如下两种实现
- transform: scale(X%)
- 设置zoom属性

文本省略

单行省略：
- word-wrap:nowrap
- text-overflow:ellipsis
- overflow:hidden
多行省略：
- overflow:hidden
- display:-webkit-box
- text-overflow:ellipsis
- -webkit-box-orient: vertical
- -webkit-line-clamp: x（x为最大行数）

两栏布局（左侧固定、右侧自适应）

利用浮动（左侧元素float: left，外界容器通过overflow: auto创建BFC）

<div>
  <div class="box-1">
    <div class="box-1-left">left</div>
    <div class="box-1-right">right</div>
  </div>
</div>

.box-1 {
  width: 100%;
  overflow: auto;
  background-color: aqua;
}
.box-1-left {
  width: 200px;
  height: 200px;
  background-color: burlywood;
  float: left;
}

使用flex实现：

<div>
  <div class="box-2">
    <div class="box-2-left">left</div>
    <div class="box-2-right">right</div>
  </div>
</div>

.box-2 {
  width: 100%;
  display: flex;
  background-color: aqua;
}
.box-2-left {
  width: 200px;
  height: 200px;
  background-color: brown;
}
.box-2-right {
  flex: 1;
  background-color: green;
}

三栏布局（UED双飞翼）

实现要点如下：

容器内三元素浮动
中间元素填满容器
左右元素利用负margin调整到正确的位置

<div class="container">
  <div class="mid">中</div>
  <div class="left">左</div>
  <div class="right">右</div>
<div>

.container {
  width: 100vw;
  height: 400px;
}
.container > div {
  float:left
}
.left {
  width: 200px;
  height:400px;
  background: green;
  margin-left: -100%;
}
.right {
  width: 200px;
  height: 400px;
  background: green;
  margin-left: -200px;
}
.mid {
  width: 100%;
  height: 400px;
  background: #efd962;
  padding: 0 200px;
  box-sizing: border-box;
}