导航

为什么要初始化 CSS 样式?

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对 SEO 有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
最简单的初始化方法： * { padding: 0; margin: 0; } （强烈不建议）
使用 normalize.css

CSS 优先级算法如何计算？

优先级就近原则，同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准;

优先级为:

同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
!important > id > class > tag
!important 比内联优先级高

⭐️ min-width、max-width、width 的包含（优先级）关系

属性的含义：

min-width 限制元素的最小宽度
max-width 限制元素的最大宽度
width 元素的宽度

三者之间的优先级：

min-width 和 max-width 的优先级都高于 width。即使 width 后面加上 !important。

当浏览器缩小导致元素宽度小于 min-width 时，元素的 width 就会被 min-width 的值取代，浏览器出现滚动条来容纳元素。
当浏览器放大导致元素的宽度大于 max-width 时，元素的 width 就会被 max-width 值取代。
当 min-width 值大于 max-width 时，则以 min-width 值为准。

所以三者优先级排序： min-width > max-width > width

当 min-width > width 时，以 min-width 为主

<style>
  .box {
    min-width: 600px;
    max-width: 1000px;
    /*当width值设为<600px时，盒子始终以宽600px呈现*/
    /*当width值设为>1000px时，盒子始终以宽1000px呈现*/
    width: 200px;
    height: 100px;
    background-color: red;
  }
</style>
<body>
  <div class="box"></div>
  <div class="item"></div>
</body>

当 max-width < width 时，以 max-width 为主

<style>
  .box {
    min-width: 600px;
    max-width: 1000px;
    /*当浏览器缩放过程中，计算得到width值<min-width时，则宽度为600px*/
    /*当浏览器放大程中，计算得到width值>max-width时，则宽度为1000px*/
    width: 100%;
    height: 100px;
    background-color: red;
  }
</style>
<body>
  <div class="box"></div>
  <div class="item"></div>
</body>

以下样式导致 span 文字的颜色是什么

.a1 { color: red; }
.a2 { color: blue; }
.a3 { color: yellow; }

则 <span class="a2 a3 a1">test</span> 的颜色是： A. red B. blue C.yellow D. 不确定

⭐️ 元素竖向的百分比设定是相对于父容器的高度吗？

对于 height 属性来说是的。
对于 margin-top/bottom(padding-top/bottom) 来讲不是，而是相对于容器的宽度计算的

BFC（Block Formating Context）

理解
- 拥有一些特性，可以利用其帮助我们布局
触发条件
- 根元素，即 HTML 元素
- float: left | right
- position: absolute | fixed
- display: inline-block | table-cell | flex | inline-flex
- overflow: hidden | auto | scroll
解决问题
- 清除浮动：
  - 子浮动，父 overflow: hidden（缺点：阴影和下拉菜单）
- div 垂直方向 margin 上下合并：
  - 其中一个包 div ，设置 overflow：hidden
- div 垂直方向 margin 内外合并：
  - 父容器 1px 透明上边框
  - 父容器 overflow: hidden
- 右侧 div 自适应：左边浮动，右边设置 overflow：hidden

⭐️ 请解释一下为什么需要清除浮动？清除浮动的方式

清除浮动

原本作用
- 浮动本质是用来做一些文字混排效果的，但是被我们拿来做布局用，则会有很多的问题出现。
带来的影响
- 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响（div忽视它的存在，但文字环绕），为了解决这些问题，此时就需要在该元素中清除浮动。准确地说，并不是清除浮动，而是清除浮动后造成的影响
本质
- 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为 0 的问题。

方法

额外标签 clear: both
BFC父元素 overflow：hidden

伪元素

.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

⭐️ 设置元素浮动后，该元素的 display 值是多少？

自动变成了 display: block

⭐️ 你对 line-height 是如何理解的？

行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是 height 和 line-height，没有定义 height 属性，最终其表现作用一定是 line-height 。

⭐️ display: none、visibility: hidden 和 opacity: 0 的区别？