导航

为什么要初始化 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; }

则 test 的颜色是： 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 的区别？

display: none （不占空间，不能点击）（回流+重绘）
visibility: hidden （占据空间，不可点击）（重绘）
opacity: 0（占据空间，可以点击）（重建图层，性能较高）

⭐️ 浏览器如何解析 CSS 选择器的，换句话说 CSS 的匹配规则是什么？

从右向左，提高查找效率

浏览器根据选择器过滤掉 DOM 中的元素，并向上遍历其父元素以确定匹配项。
选择器链的长度越短，浏览器可以越快地确定该元素是否与选择器匹配。

（div p em）

如果从左到右，有无数多个 div 都得向下查找，效率低
反之，只有当当前元素是 em 时，才会向上查找，效率高

例如：

使用这个选择器 p span，浏览器首先找到所有元素，然后一直向上遍历其父元素直到根以找到元素。
对于特定的，一旦找到 ，它就知道  匹配并可以停止匹配。

响应式设计原理

通过媒体查询检测不同设备屏幕尺寸做处理

文字超长的省略号写法

单行文本省略

.single-line-ellipsis {
  width: 200px; /* 设置一个固定宽度，根据实际需求调整 */
  white-space: nowrap; /* 强制文本在一行内显示 */
  overflow: hidden; /* 超出宽度的部分隐藏 */
  text-overflow: ellipsis; /* 用省略号表示超出的文本 */
}

多行文本省略

.multi-line-ellipsis {
  width: 200px; /* 设置一个固定宽度，根据实际需求调整 */
  overflow: hidden; /* 超出宽度的部分隐藏 */
  text-overflow: ellipsis; /* 这行对于多行省略号只是辅助，主要靠下面的属性 */
  display: -webkit-box; /* 开启弹性伸缩盒子模型 */
  -webkit-line-clamp: 3; /* 显示的行数，超出部分用省略号表示，这里设置为 3 行，可根据需求修改 */
  -webkit-box-orient: vertical; /* 子元素垂直排列 */
}

⭐️ li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

场景：
- 有时，在写页面的时候，会需要将这个块状元素横排显示，此时就需要将display属性设置为inline-block，此时问题出现了，在两个元素之间会出现大约8px左右的空白间隙
原因：
- 浏览器的默认行为是把 inline 元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码 <li> 换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。
解决：
- 给 ul 标签设置 font-size: 0; 并为 li 元素重新设置 font-size: XXpx;

⭐️ 图片为什么有左右上下间隙,怎么去除?

原因：

左右：因为img是 inline-block 行内块元素，行内元素之间有『换行（回车），空格，tab』时会产生左右间隙
上下：行内元素默认与父容器基线对齐，而基线与父容器底部有一定间隙，所以上下图片间有间隙

解决办法：

移除上下间隙：
移除左右间距：

Chrome中文字体小于 12px 文字

老版：webkit-text-size-adjust: none
新版：webkit-transform: scale(.8, .8)

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

⭐️ style 标签写在body后与body前（head）有什么区别？

⭐️ 样式脚本书写顺序

⭐️ 为何要将 JS 放在 HTML 底部？

已知如下代码，如何修改才能让图片宽度为300px ？

注意下面代码不可修改。

<img src="1.jpg" style="width:480px!important;">

方案1:

max-width: 300px;

方案2:

transform: scale(0.625);
transform-origin: top left;

textarea 如何禁止拉伸

使用 CSS 样式可以避免拉伸