常规

发布于 2022-11-01  35 次阅读

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

当 min-width > width 时，以 min-width 为主；当 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,clear:both

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

  • 自动变成了 display: block

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

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

CSS3 新增伪类有那些？

  • p:first-of-type 属于其父元素的特定类型首个子元素  等同于 :nth-of-type(1)
  • p:last-of-type 属于其父元素的特定类型的最后一个子元素  等同于 :nth-last-of-type(1)
  • ::after 在元素之前添加内容,也可以用来做清除浮动。
  • ::before 在元素之后添加内容
  • :enabled/:disabled 控制表单控件的禁用状态。
  • :checked 单选框或复选框被选中。

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

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

更多：分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

浏览器如何解析 CSS 选择器

从右向左，提高查找效率

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

（div p em）

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

例如：

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

响应式设计原理

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

@media (min-width:320px) and (max-width: 640px) {}
<link ... media="(min-width:320px) and (max-width: 640px)">
写min，小的在前，大的在后；写max，大的在前，小的在后。否则会被覆盖
min-width:720, min-width: 1200 | max-width: 1440,max-width:760
比如min720在后，当前1440>720 1200的就会失效

文字超长的省略号写法

前置知识：text-overflow

默认值：clip

适用于：所有元素

clip： 当对象内文本溢出时不显示省略标记（...），而是将溢出的部分裁切掉。

ellipsis： 当对象内文本溢出时显示省略标记（...）

单行文本

示例：

<div class="ellipsis-line">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, deserunt. Minus ex sequi harum, in reiciendis nobis consectetur nam illum deserunt non illo, earum culpa maiores, esse delectus aliquam repellendus.</div>

div {
  width: 200px;
  height: 18px;
  border: 1px solid black;
}

.ellipsis-line {
  overflow: hidden;
  text-overflow: ellipsis; /* 文本溢出显示省略号 */
  white-space: nowrap;
}

效果：

多行文本

<div class="multyLine_ellipsis">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe ex excepturi, quam quibusdam explicabo magnam at rem unde natus sapiente quisquam esse dolor sequi autem eos aliquid rerum laboriosam. Dolorum?
</div>

div {
  width: 300px;
  height: 54px;
  border: 1px solid black;
}
.multyLine_ellipsis {
  overflow: hidden;             /* 超出部分隐藏，只有设置了这个属性，text-overflow:ellipsis 才生效 */
  text-overflow: ellipsis;      /* 文本溢出显示省略号 */
  display: -webkit-box;         /* 对象作为弹性盒子模型显示 */
  -webkit-line-clamp: 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』时会产生左右间隙
  • 上下：行内元素默认与父容器基线对齐，而基线与父容器底部有一定间隙，所以上下图片间有间隙

解决办法：

  • 移除上下间隙：
    • img本身设置 display: block;
    • 父元素设置 font-size: 0; （基线与字体大小有关，字体为零，基线间就没距离了）
    • img本身设置 vertical-align: bottom;（让inline-block的img与每行的底部对齐）
  • 移除左右间距：
    • 行内元素间不要有换行，连成一行写消除间隙
    • 第一行结尾写上 <!-- ，第二行开头跟上 --> 。即利用注释消除间距
    • 父元素 font-size 设置 0

Chrome中文字体小于 12px 文字

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

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

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

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

style标签放在body后，会导致当加载到此样式时，页面将停止之前的渲染。此样式表被解析后，将重新渲染页面，也就出现了短暂的花屏现象。

所以不要写在body后，要把样式放在head中。

浏览器将 CSS 生成 CSSOM，再将 DOM 和 CSSOM 整合成 RenderTree ，然后针对 RenderTree 即可进行渲染了。大家可以想一下，有 DOM 结构、有样式，此时就能满足渲染的条件了。另外，这里也可以解释一个问题 —— 为何要将 CSS 放在 HTML 头部？—— 这样会让浏览器尽早拿到 CSS 尽早生成 CSSOM，然后在解析 HTML 之后可一次性生成最终的 RenderTree，渲染一次即可。如果 CSS 放在 HTML 底部，会出现渲染卡顿的情况，影响性能和体验。

为何要将 JS 放在 HTML 底部？

渲染过程中，如果遇到<script>就停止渲染，执行 JS 代码。因为浏览器渲染和 JS 执行共用一个线程，而且这里必须是单线程操作，多线程会产生渲染 DOM 冲突。待<script>内容执行完之后，浏览器继续渲染。

为何要将 JS 放在 HTML 底部？—— JS 放在底部可以保证让浏览器优先渲染完现有的 HTML 内容，让用户先看到内容，体验好。另外，JS 执行如果涉及 DOM 操作，得等待 DOM 解析完成才行，JS 放在底部执行时，HTML 肯定都解析成了 DOM 结构。JS 如果放在 HTML 顶部，JS 执行的时候 HTML 还没来得及转换为 DOM 结构，可能会报错。

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

注意下面代码不可修改。

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

方案1:

max-width: 300px;

方案2:

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

textarea 如何禁止拉伸

使用 CSS 样式可以避免拉伸

textarea {  resize: none;}

有没有使用过 css variable，它解决了哪些问题

css 变量减少样式重复定义，比如同一个颜色值要在多个地方重复使用，以前通过 less 和 sass 预处理做到，现在 css 变量也可以做到，方便维护，提高可读性

:root {
	--bgcolor: blue;
	--color: red;
}
p {
	color: var(--color);
}
div {
	backgroung-color: var(--bgcolor);
	color: var(--color)
}

方便在 js 中使用

// 设置变量
document.getElementById("box").style.setPropertyValue('--color', 'pink')
// 读取变量
doucment.getElementById('box').style.getPropertyValue('--color').trim()
// 删除变量
document.getElementById('box').style.removeProperty('--color')

'+' 与 '~' 选择器有什么不同

+ 选择器匹配紧邻的兄弟元素

~ 选择器匹配随后的所有兄弟元素

css 动画与 js 动画哪个性能更好

  • CSS3 的动画：
    1. 在性能上会稍微好一些，浏览器会对 CSS3 的动画做一些优化（比如专门新建一个图层用来跑动画）
    2. 代码相对简单
    3. 在动画控制上不够灵活
    4. 兼容性不好
    5. 部分动画功能无法实现（如滚动动画，视差滚动等）
  • JavaScript 的动画：
    1. 正好弥补了 css 缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容 IE6
    2. 功能强大
  • 总结： 对于一些复杂控制的动画，使用 javascript 会比较好。而在实现一些小的交互动效的时候，可以多考虑 CSS

为什么会发生样式抖动

因为没有指定元素具体高度和宽度，比如数据还没有加载进来时元素高度是 100px(假设这里是 100px)，数据加载进来后，因为有了数据，然后元素被撑大，所有出现了抖动

css 如何匹配前 N 个子元素及最后 N 个子元素

  • 如何匹配最前三个子元素: :nth-child(-n+3)
  • 如何匹配最后三个子元素: :nth-last-child(-n+3)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .item:nth-child(-n + 3) {
        color: red;
      }
      .item:nth-last-child(-n + 3) {
        color: blue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </body>
</html>

**介绍下粘性布局（sticky）

position 中的 sticky 值是 CSS3 新增的，设置了 sticky 值后，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

sticky 属性值有以下几个特点：

  • 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
  • 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
  • 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量
最后更新于 2023-07-19
啥也没有呀