前端面试题整理-CSS

news2024/12/22 15:08:01

两栏布局

<!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（可避免高度塌陷问题）
在这里插入图片描述

在这里插入图片描述

居中：

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>