前端CSS面试题（重要！！！）（二）

17.什么是物理像素，逻辑像素和像素密度？

物理像素(Physical Pixel):是硬件层面上屏幕实际的物理点。现代设备通常拥有非常高的物理像素密度，比如 iPhone，尤其是带 Retina 显示屏的设备。

逻辑像素(Logical Pixel):是开发和设计时使用的抽象单位，它与物理像素的比例由设备设置决定。

像素密度(Pixel Density)：一英寸内的物理像素数，用PPI（Pixels Per Inch）表示。像素密度越高，显示效果越细腻。

18.为什么在移动端开发时需要用到 @3x, @2x 这种图片?

在不同像素密度的设备上，使用相同大小的图片，低像素密度的设备上图片会显示清晰，在高像素密度设备上图片会显得模糊。

通过使用 @2x 和 @3x，设备可以加载分辨率更高的图片以保持 清晰度。例如，@2x 图片的分辨率是标准分辨率的两倍，每个逻辑像素对应2x2个物理像养

19.margin 和 padding 的使用场景

同：都可以用来控制元素和周围环境之间的距离，

异：
margin主要用来控制元素和其他元素之间的距离，通常用与兄弟元素，他是在元素的外部起作用的

padding，是用来控制元素内容和边框之间的距离，他是在元素内部起作用的，通常用于父子元素

补充：

相邻块级元素会合并上下外边距，如果上下都设置了外边距，会合并margin，并且取其最大值

margin外边距可以设置负值，margin设置负值适用于一些特殊的需求，比如说让某个元素向上或向左靠近另一个元素，padding内边距不可以设置负值，

margin和padding还可以设置为百分比值，相对于父元素的尺寸

18.什么是 margin 重叠问题，如何解决?

当两个垂直相邻的块级元素(block-levelelements)之间的 margin 值发生重看时，它们之间的实际间距不是两个 margin 的总和，而是取最大值。

解决 margin 重叠问题可以通过以下几种方法,

1.使用 padding 来代替 margin.

margin 是元素周围的外边距，而 padding 是元素内容区域和边框之间的内边距。使用 padding 代替 margin，可以避免上下方的边距合并，不会产生重叠的问题。

2.使用 border 将两个元素分开。
在两个块级元素之间添加 border 时，由于 border 无法重叠，因而强制性地将两个元素分开，这样就可以有效地避免margin 重叠

3.利用 CSS 的 flex布局或 grid 布局，避免块元素直接相邻。

现代布局方式如 flex布局 和 grid布局 在设计上默认避免直接相邻的元素产生 margin 重叠的问题，可以更加灵活地控制布局，尤其在复杂布局情形下比传统的块级布局更加有效。

4.将父元素的 overflow 属性设置为 hidden 或 auto。

5.设置父元素的 display 为 inline-block

6、clear清除浮动

clear 技巧是一种使父元素包裹它的浮动子元素的方法，也可以解决 margin 重叠的问题。具体方法是对父元素添加伪元素，如下:

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

20.对 BFC 的理解，如何创建 BFC

BFC：块级格式化上下文，创建一个独立的渲染区域，使其内部的布局不受外部元素影响，了解BFC有助于清除浮动，边距重叠等问题

创建BFC的方法：

1.设置元素的 float 属性为 left或 right 。

2.设置元素的 position 属性为 absolute 绝对定位或 fixed ，脱离标准流。

3.设置元素的 display 属性为 inline-block等。

4.设置元素的overflow 属性为 hidden、auto或scroll。

使用场景：浮动元素的清除，防止外边距重叠，自适应容器，隔离float元素，

1、浮动元素的清除:

当在设计页面布局时，需要清除浮动影响来保证父元素正确的高度，这时可以利用创建 BFC 来实现。这种方法比给父元素添加一个空的 div 进行清除浮动。

2、防止外边距(Margin)重叠:

如果两个相邻的普通流定位的块元素相遇，它们的垂直外边距会发生重叠(取较大值)。通过创建 BFC，可以将两个元素的外边距分离，避免重看现象。

3、自适应容器:
BFC 可以包含浮动元素。例如，在一个浮动子元素里，如果父元素也是 BFC，则父元素就会包含子元素的高度。

4、隔离 float 元素，float 元素被包含在BFC里会被包含其高度，如果我们不想其他元素被 float 元素影响布局，那么我们可以给该元素创造一个BFC

21.对 line-height 的理解及其赋值方式

line-height用于控制行高，也就是多行文本之间的垂直距离，定义行与行之间的垂直距离

line-height可以继承，取值通常使用无单位的数字值，如果使用像素单位单位，在响应式会遇到问题

如果需要水平居中文本或图片，可以同时调整lin-height和vertial-align达到效果

需注意行高塌陷问题，问题通常是指父元素的高度因为子元素的浮动或其他布局特性而无法正确计算，导致父元素高度塌陷或显示不正常的现象。

以下是几种常见的解决行高塌陷的方法：

1. 为父元素显式设置高度

直接给父元素设置一个固定高度是最简单的方法，但这种方法不够灵活，当子元素高度动态变化时，可能会导致布局问题。

.parent {
  height: 200px; /* 固定高度 */
}

2. 使用BFC（块级格式化上下文）

开启BFC可以使父元素包含浮动元素，从而解决高度塌陷问题。以下方法可以开启BFC：

• 设置 overflow 为非 visible 值（如 auto、hidden 或 scroll）：

  .parent {
    overflow: auto; /* 或 hidden, scroll */
  }
  

• 将父元素设置为行内块级元素（display: inline-block）。

• 使用 display: flex 或 display: grid。

3. 使用 clearfix 清除浮动

通过伪元素为父元素添加清除浮动的样式：

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

• 添加空元素：在浮动元素后面添加一个空的块级元素，并设置清除浮动 clear: both。

  <div style="clear: both;"></div>
  

4. 使用伪元素

在父元素上添加一个伪元素，可以创建一个新的BFC，从而包含浮动元素：

.parent::after {
  content: "";
  display: block;
  clear: both;
}

5. 使用 Flex布局 或 Grid 布局

现代CSS布局中，Flex布局和Grid布局解决高度塌陷问题：

.parent {
  display: flex; /* 或 grid */
}

6. 其他方法

• 设置 line-height：为父元素设置 line-height 来指定其高度。

22.CSS 优化和提高性能的方法有哪些?

1.使用 CSS 预处理器。利用 Sass、LESS 预处理器，可以编写更简洁高效的 CSS 代码，并支持变量、嵌套等特性。

2.减少使用高级选择器。避免使用复杂的选择器(如后代选择器、通配符选择器会让浏览器遍历更多地DOM节点，增加渲染时间)，优先使用类选择器，减少浏览器的解析时间。

3.避免冗余样式。删除未使用的 CSS 规则，确保所有样式都有实际用处。

4.合理使用 CSS Sprite。将多个小图标合并成一张图，通过background-position 实现图标显示，减少 HTTP 请求。

5.减少使用复杂动画，尽量使用简单动画transform 和 opacity。不会触发布局和重绘，只会触发合成，对性能影响较小。

23.CSS 预处理器/后处理器是什么?

都是用于提高css编写效率和管理效率的工具，使css代码更简洁，更易维护

预处理器：Less,Sass提供了变量，嵌套，混入运算，继承，函数等功能来编写css代码

后处理器：PostCSS侧重通过插件机制自动优化和增强css，（插件Autoprefixer）比如说自动添加浏览器前缀，（插件cssnano）优化和压缩css代码，减少文件大小，提高加载速度

预处理器引入了：

1.变量:通过变量，可以减少重复代码，便于全局修改。例如定义颜色变量，一个地方改动，全局生效。

2.嵌套:支持嵌套结构，让样式表更具层次性和可读性。有点像编写HTML结构，通过嵌套，可以更清晰地表达层级关系。

3.混合(Mixins):把一段可复用的样式定义成一个混合这样在使用时可以像调用函数一样，避免重复撰写冗长的属性集合。

4.运算:能够进行数学运算，使得样式的编写更灵活，比如计算长度、宽度、边距、填充等。

5.继承:通过继承来简化代码，减少冗余，增强样式的可维护性。

6函数:支持定义自己的函数，对样式进行逻辑处理和计算，使得样式更加智能化。

24.预处理器scss和less，与css有什么区别？

预处理器如 SCSS 和 LESS 与 CSS 的主要区别在于它们提供了更多的功能和工具，使得编写和维护样式更加方便和高效。具体来说，SCSS 和 LESS 允许我们使用变量、嵌套规则、混合(mixin)、继承等高级功能，而这些功能在纯 CSS 中是缺乏的。

1变量:可以定义全局使用的值，例如颜色、字体大小等，避免重复定义，方便维护。

2嵌套规则:支持在选择器内嵌套子选择器，结构更清晰，代码更易读。

3混合(Mixin):可以定义一组样式，然后在不同的地方重用，减少重复代码。

4继承:允许从其他选择器继承样式，减少重复定义。

5函数与运算:提供内置函数和运算能力，比如颜色运算、数学运算等

25、::before 和 :after 的双冒号和单冒号有什么区别？

都是css的伪元素，用于在元素的内容之前或之后插入额外的内容

双冒号是css3的语法，单冒号是css2的语法

26、伪元素与伪类的区别

伪元素(pseudo-elements)用来选中元素的某一部分内容，如第一个字母、第一个行，或者在内容之前或之后插入内容。典型的伪元素包括::first-letter等。

伪类(pseudo-::before、::after 、classes)用于选择元素的一种特定状态，如:hover，:active，:nth-child 等

26.CSS 怎么实现单行、多行文本溢出隐藏

单行文本隐藏：

.single-line-ellipsis {
    white-space: nowrap; /* 白空间不换行 */
    overflow: hidden;    /* 溢出的部分隐藏 */
    text-overflow: ellipsis; /* 溢出部分用三个点表示 */
}

多行文本隐藏：

.multi-line-ellipsis {
    display: -webkit-box;        /* 弹性盒模型 */
    -webkit-box-orient: vertical;/* 垂直排列子元素 */
    -webkit-line-clamp: 2;       /* 限制最多显示两行 */
    overflow: hidden;            /* 溢出部分隐藏 */
        text-overflow: ellipsis; /* 溢出部分用三个点表示 */
}

实现多行溢出隐藏：使用line-height和height

.multi-line-ellipsis {
    line-height: 1.2;       /* 设置行高 */
    height: 2.4em;          /* 2.4em 即为两行文本的高度 */
    overflow: hidden;       /* 溢出部分隐藏 */
        text-overflow: ellipsis; /* 溢出部分用三个点表示 */
}

适用于所有现代浏览器，但是需要具体设定每行的高度，如果前景色内容频繁变化，维护起来很麻烦

27.说说你对媒体查询的理解?

媒体查询就是根据设备的宽度，高度，分辨率，方向等，针对不同的设备类型或设备特性应用不同的样式，加载不同的css样式表，实现响应式设计。响应式设计指根据用户使用的设备不同，实现自动调整布局和样式，提供最佳的用户体验。

使用方法：内连式，link标签，import语句

/* 直接在CSS文件中使用 */
@media (min-width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* 通过link标签 */
<link rel="stylesheet" media="screen and (max-width: 600px)" href="style.css">

/* 使用import语句 */
@import url("style.css") screen and (max-width: 600px);

媒体特性：

除了屏幕宽度和高度，媒体查询还支持多种其他特性。例如:

aspect-ratio:元素的宽高比

resolution:设备的分辨率

orientation:设备的方向(横向或纵向)

color:设备是否支持颜色，以及颜色深度

逻辑操作符:媒体查询支持逻辑操作符比如 and，not,和 only ，用于组合和否定条件:

@media screen and (min-width: 600px) and (max-width: 800px) {
  body {
    background-color: yellow;
  }
}

移动优先设计：

在响应式设计中，“移动优先”是一种推荐的实践方式。即先设计移动端的样式，再通过媒体查询针对更大屏幕进行增强

/* 默认样式：移动端优先 */
body {
  font-size: 14px;
}

/* 针对大屏幕的增强 */
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

适配不同设备

通过媒体查询，我们可以轻松适配各种设备，包括手机、平板、桌面电脑等。例如:

/* 手机设备 */
@media (max-width: 480px) {
  body {
    background-color: pink;
  }
}

/* 平板设备 */
@media (min-width: 481px) and (max-width: 1024px) {
  body {
    background-color: lightgreen;
  }
}

/* 桌面电脑 */
@media (min-width: 1025px) {
  body {
    background-color: lightblue;
  }
}

28.对 CSS 工程化的理解

css工程化，就是从工程化的角度来解决css开发中的相关问题，使得css开发更符合工程化标准，更高效

核心目的是提高开发效率，维护性和可扩展性

如何实现工程化？

使用sass，less预处理器和portcss后处理器，规范css编码风格，自动化工具webpack打包，

29.说说网页元素的层叠顺序：

网页元素的层叠顺序主要由 CSS 中的 z-index 属性决定。z-index 的值越大，元素在堆叠顺序中就越靠前。

需要注意的是，z-index 只有在元素有定位属性(position 为relative、absolute、fixed 或sticky )时才会生效。如果元素没有指定 -index 或者 z-index 值相同，则它们的层叠顺序取决于它们在 DOM 树中的顺序，后面的元素会覆盖前面的元素。

默认层叠顺序：如果没有指定z-index，浏览器会按照元素在DOM树中出现的顺序进行堆叠，DOM树中靠后的元素层级越高

z-index的属性的工作是相对当前层叠上下文来说的，新层叠上下文创建情况如下：position设置为absolute，relative，fixed，或sticky,且z-index不为auto，父元素设置了transform不为none，opacity小于1，filter不为none、特性

css优先级和继承性：在实际项目中，还需要考虑不同选择器的优先级与继承关系。更高优先级的样式会覆盖更低优先级的样式，不过z-index值的叠加与选择器的优先级无关。

实际应用：还可以通过浏览器自带的开发者工具通过修改z-index快速定位和解决布局问题

30.常见的 CSS 布局单位有哪些?

绝对单位：px

相对单位：em，rem。%，vh，vw

1.px(像素):这种单位是最常见的绝对单位。它表示屏幕上独立的像素点在不同的设备和屏幕分辨率下，px 的表现一般是一致的。使用px时，元素的尺寸不会工具外部因素(如父元素或根元素的字体大小）自动调整，适用于需要精确控制尺寸，位置的情况，比如边框，图片大小等

2.em:这种单位是相对单位，相对于当前元素字体大小的倍数。比如，若一个元素的字体大小为 16px，则 2em 就等于 32px。适用于希望根据父元素进行调增的场景，比如按钮输入框的padding和margin

3.rem:rem 也是一种相对单位，它是相对于根元素(html元素)的字体大小。使用rem可以使整个页面更一致，适用于希望整个页面相对统一且易于维护的场景，非常适合做响应式设计

4.%(百分比):百分比单位是一个相对单位，相对其父元素的大小。比如，宽度设置为 50%，那么其宽度将是父元素宽度的一半。

5.vw(视窗宽度):相对于视口宽度的百分比。1vw 表示视口宽度的 1%。

6.vh(视窗高度):相对于视口高度的百分比。1vh 表示视口高度的 1%。

7.vmin 和 vmax:这两个单位与视窗尺寸有关。vmin 是视口宽度和高度中较小的那个的百分比，而 vmax 是视口宽度和高度中较大的那个的百分比。

响应式设计与单位的选择：响应式设计要求可以根据不同的屏幕大小进行调整，在这种情况下，使用em和rem更合理

html {
  font-size: 16px; /* 默认字体大小 */
}
@media (min-width: 600px) {
  html {
    font-size: 18px; /* 大屏设备上的字体大小 */
  }
}

媒体查询常常与rem配合使用，来实现基于视口的设计调整

这段代码意在根据设备宽度调整根元素的字体大小，从而以rem 为单位的其他元素会随之调整。

2、渐进增强与 em:
有时我们需要逐步实例化某些设计上的改变。通过 em 的使用，可以更自然地递进式调整。例如:

button {
  font-size: 1em;
  padding: 0.5em 1em;
}

可以确保按钮的字体和内边距会随父元素的字体大小变化进行调整

31.怎么实现网页两栏布局?

1.使用浮动，将左栏浮动到左边，右栏设置margin-left（左外边距）

.container {
  width: 100%;
}

.left {
  float: left;
  width: 70%;  /* 左侧栏宽度 */
  background: lightblue;
}

.right {
  margin-left: 70%;  /* 右侧栏宽度 */
  background: lightcoral;
}

可能存在的问题：浮动元素导致高度塌陷，由于 .left 使用了 float: left，可能会导致 .container 的高度塌陷（即 .container 的高度可能无法正确包裹浮动的子元素）。

2.使用display：flex并让两个子元素分别占据不同的宽度

.container {
  display: flex;
}

.left {
  flex: 7;      /* 左侧栏，占 7 份 */
  background: lightblue;
}

.right {
  flex: 3;      /* 右侧栏，占 3 份 */
  background: lightcoral;
}

3.使用grid布局：

.container {
  display: grid;
  grid-template-columns: 70% 30%;  /* 左侧 70%，右侧 30% */
}

.left {
  background: lightblue;
}

.right {
  background: lightcoral;
}

4.使用position实现

.container {
  position: relative;
}

.left {
  position: absolute;
  width: 70%;
  height: 100%;
  background: lightblue;
}

.right {
  position: absolute;
  width: 30%;
  height: 100%;
  left: 70%;  /* 右侧栏位于左侧栏之后 */
  background: lightcoral;
}

32.怎么实现网页三栏布局?

1.浮动

.container {
    overflow: hidden; /* 清除浮动，防止页面塌陷 */
}
.left {
    width: 200px; /* 设置左栏的宽度为200像素 */
    float: left; /* 将左栏设置为向左浮动 */
}
.right {
    width: 200px; /* 设置右栏的宽度为200像素 */
    float: right; /* 将右栏设置为向右浮动 */
}
.center {
    margin: 0 200px; /* 设置中心栏的左右外边距均为200像素 */
}

2.flex布局

.container {
    display: flex;
}
.left, .right {
    width: 200px;
}
.center {
    flex: 1;/* 中心栏占据剩余空间 */
}

3.grid布局

.container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;//定义了网格的列布局。1fr：表示第二列的宽度会占据剩余空间的 1 个分数单位（fractional unit）。fr 单位用于分配网格容器中的可用空间。
}
.left {
    grid-column: 1;
}
.center {
    grid-column: 2;
}
.right {
    grid-column: 3;
}

33.怎么实现元素的水平垂直居中?

使用flex布局，使用grid布局，绝对定位配合transform属性，

1.flex布局

.parent {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;    /* 垂直居中 */
    height: 100vh;          /* 为了示例效果，父元素设置全屏高度 */
}
.child {
    width: 100px;
    height: 100px;
    background-color: red;
}

2.grid布局：

.parent {
    display: grid;
    place-items: center; /* 同时水平和垂直居中 */
    height: 100vh;       /* 为了示例效果，父元素设置全屏高度 */
}
.child {
    width: 100px;
    height: 100px;
    background-color: blue;
}

3.子绝父相+transform

这种方法是通过将元素绝对定位到其父元素中部，然后利用transform 属性的 translate 将其移动到中心位置:

.parent {
    position: relative;
    height: 100vh; /* 为了示例效果，父元素设置全屏高度 */
    将父容器设置为绝对定位，为子元素的绝对定位提供参照
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;将子元素的左上角定位到父容器的中心为止
    transform: translate(-50%, -50%);将子元素向上和向左移动自身宽高的50%
    width: 100px;
    height: 100px;
    background-color: green;
}
就是必须要知道元素本身的宽高，如果此时元素宽高不确定，这个方法就行不通了。

4.子绝父相 + margin: auto:

这个方法也是需要子绝父相，top、right、bottom，left 都设置为 0，然后使用margin:auto即可水l平 +垂直居中。

5.line-height实现单行文本在垂直居中：设置line-height设置容器高度，使得单行文本在垂直方向上居中，text-align：center：用于居中水平居中

34.如何根据设计稿进行移动端适配?

根据设计稿进行移动端适配的关键在于灵活运用CSS和媒体查询来响应不同的屏幕尺寸及设备类型。在实践中，我一般遵循以下几个步骤

1.使用流式布局:避免使用固定宽度，采用百分比来定义元素的宽度。

2.媒体查询:通过CSS的media query根据不同的屏幕宽度和设备类型调整样式。

3.视口单位:利用vw、vh等视口单位定义尺寸，以适应不同设备。

4.弹性单位:使用rem或em来定义元素的尺寸，确保字体等比例缩放。

5.图片适配:使用灵活的百分比宽度或者srcset属性，使图片能在各尺寸设备上正常显示，

6.测试与调试:在实际设备上或模拟器中进行测试，确保在各种环境下都能正常显示。

35.说说响应式设计的概念及基本原理

响应式设计(Responsive Design)是一种网页设计方法，它使网页能够在各种设备和窗口或屏幕尺寸上良好地显示和操作。核心目标是提供良好的用户体验，不论用户使用的是PC、平板还是手机。响应式设计的基本原理是通过使用灵活的网格布局、可调整的图像和媒体查询，根据设备的特征自动调整网页的布局。这里主要有几个关键点:

1.灵活的网格布局:使用百分比而不是固定的像素来定义页面元素的宽度。

2.可调整的图像:根据设备窗口大小动态调整图像尺寸，避免溢出或失真。

3.媒体查询:CSS3提供的功能，根据不同的屏幕尺寸和设备类型应用不同的样式规则以适应不同的显示环境。

36.响应式设计的具体实现方法和一些最佳实践：

1.视口设置：

在响应式设计里，HTML的标签通常用于设置视口，使得页面宽度和缩放符合设备。例如:

<meta name="viewport" content="width=device-width, initial-scale=1">

这个标签告诉浏览器页面的宽度应与设备的宽度一致，并且初始缩放比例为1

2、流动布局(Fluid Layouts):

使用百分比、视口宽度(vw)或视口高度(vh)等相对单位，而不是固定宽度。比如:

.container {
    width: 80%;
}

3.媒体查询(Media Queries):

通过CSS的媒体查询，可以分别为不同的设备或屏幕尺寸定义不同的样式。

  @media (max-width: 600px) {
    .container {
        width: 100%;
    }
}

上面的代码表示当屏幕宽度小于600px时.container 的宽度将会被设置为100%。

4、弹性图片与视频

为了保证图片和视频的大小能够自适应，通常会设置最大宽度为100%，这样它们就不会溢出容器。

img {
    max-width: 100%;
    height: auto;
}

5.设计模式：

在实际设计中，我们常用“移动优先”设计，即首先设计适应小屏幕的页面，然后逐步适应大屏幕。这种方法有助于确保关键功能在所有设备上都能良好地呈现。此外，可以搭配Flex布局或Grid布局等现代布局工具，以更灵活和高效地实现响应式设计。

36.CSS 的 flex 布局有什么好处?

Flex 布局，即弹性布局，是一种用于设计更灵活、更高效的响应式布局的 CSS 布局模式。它的核心思想是通过定义容器和子项的关系，以及如何分布和排列子项，来动态适应不同屏幕和容器大小。

1、灵活性:Flex 布局允许容器内的元素自动调整大小，占满可用空间。这特别适合响应式设计。

2、便捷的对齐和排序:可以轻松实现水平居中、垂直居中以及任意方向的排列。使用 justify-content和 align-items属性就能控制主轴和交叉轴上的对齐方式。

3、简化的代码:相比传统布局，flex 布局的代码更简洁，更直观。通过简单定义父元素和子元素的属性即可实现复杂排版。

4、动态调整:Flex 布局可以根据内容动态调整布局，确保在不同设备和窗口大小下都能很好地呈现内容。

5、主轴和交叉轴：Flex布局是其于主轴和交叉轴来工作的，所谓主轴，就是flex-direction定义的方向（水平或垂直），交叉轴则是垂直于主轴的方向

6、兼容性: Flex 布局在大多数现代浏览器中都有很好的兼容性但在较旧的浏览器版本中可能会遇到一些问题。建议在使用前查看目标浏览器的支持情况，并可能使用一些polyfi 或冻结工具来增强兼容性。

37.Flex布局常见属性：

flex-direction属性的值：row（水平，默认），column（垂直），row-reverse，column-reverse

justify-content:控制主轴上的对齐方式。常见值包括flex-start，flex-end，center，space-between，space-around

align-items:控制交叉轴上的对齐方式。常见值包括stretch(默认)，flex-start，flex-end，center，baseline 。

flex-wrap:默认情况下，flex 项目会在一行内排列使用 flex-wrap:wrap 可以使得项目自动换行。

flex 子元素的控制：

flex-grow:定义元素如何按比例增长。如果所有子元素的 flex-grow 都是1，那么它们会等比例地分配多余的空间。

flex-shrink:定义元素如何按比例缩小。通常与flex-basis 配合使用。

flex-basis:类似于 width或 height 属性，指定了在分配空间之前，元素的默认大小。

37.为什么需要清除浮动?清除浮动的方式有哪些?

清除浮动主要是为了避免由于浮动元素脱离正常文档流而引发的布局问题。

当一个元素浮动时，它从普通文档流中脱离，常常会影响到其父元素和后续兄弟元素的显示效果。

典型问题包括父元素无法包裹浮动元素的高度等。清除浮动是为了解决这些布局上的素乱问题，确保页面布局按照预期运行。

清除浮动的方式有以下几种：
1.使用clear清除浮动

使用 clear 属性清除浮动的原理：clear的主要作用是阻止元素周围的浮动元素影响到它。

具体来说，clear 属性定义了元素的哪些边不能与前面的浮动元素相邻。

举个例子，如果你有两个左浮动的元素，需要在第三个元素开始个新的行，那么在第三个元素上使用clear:left;就可以达到效果。在这一行上，第三个元素的左侧就不会有任何浮动的元素。

clear属性的取值：

none：这是默认值，不会清除任何浮动。

left ：清除元素左侧的浮动。

right : 清除元素右侧的浮动,

both :同时清除元素两侧的浮动

<div class="clearfix"></div>

.clearfix {
    clear: both;
}

2.使用伪元素::after 清除浮动。

伪元素 ::after 清除浮动:
这是比较受欢迎的一种清除浮动方法，通过在父元素的CSS 规则中添加伪元素::after，给它设置 clear:both。

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

通常会添加一个泛用的clearfix类来实现

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

使用额外的 HTML 元素: 在浮动元素后加一个设有clear属性的空元素

<div class="float-element"></div>
<div class="clear-both"></div>

.clear-both {
    clear: both;
}

（这种方法通过在浮动元素之后插入一个空的拥有 clear 样式的div，来清除浮动。具体实现如下）

<div class="clearfix"></div)

.clearfix {
    clear: both;
}

3.使用 overflow 属性清除浮动.
这个方法利用 CSS 的 overflow 属性设置为auto，hidden，让父元素包裹浮动的子元素。这样避免了添加额外的 HTML 元素:

.container {
    overflow: auto;
}

4.使用 display:flow-root 清除浮动。

CSS的display:flow-root属性可以创建一个新的块级格式化上下文(BFC)，从而清除浮动。

.container {
    display: flow-root;
}

这种方法是相对简洁的处理方式，因为它不影响其他样式。

38.CSS 的 position 有哪些属性值，区别是什么？

CSS的position属性有五种主要的属性值:static，relative相对，absolute绝对，fixed 和 sticky 。每个属性值的作用和行为如下:

1.static :这是默认值。元素按照正常的文档流进行排列，不会受到 top，bottom，left，right 属性的影响。

2.relative相对 :元素相对其正常位置进行定位。你依然可以使用top，bottom，left，right 属性来调整元素位置，但元素仍然占据原本在文档流中的空间。

3.absolute绝对:元素被移出普通文档流，相对最近的已定位(relative，absolute，fixed，sticky)的祖先元素进行定位。如果没有找到这样的祖先元素，就会相对于初始包含块(通常为窗口)进行定位。会脱离标准流

4.fixed :元素相对于视口(浏览器窗口)进行定位。即使页面滚动，元素也会固定在相应位置，脱标

5.sticky:元素在跨越特定阈值之前表现为relative，之后表现为 fixed 。即元素会根据用户滚动行为在 relative 和fixed定位间切换。先不脱标，后脱标

39.CSS中display、float、position 的关系是什么？

都能对对元素的布局和显示方式产生影响，但它们的侧重点和作用有所不同。
1、display:

控制元素的基本显示方式。主要分为块级元素(block)行内元素(inline)、行内块元素(inline-block)等。决定元素如何参与文档流，是否独占一行，以及列子元素的排列方式

2、float:

使元素向左或向右浮动，当元素浮动时，它会脱离文档流，但仍会影响周围元素的位置。
通常用于文字环绕的布局中，同时也会影响父容器的高度计算。

3、position:

决定元素的定位方式。常见值有:static(静态)relative(相对定位)、absolute(绝对定位)、fixed(固定定位)和 sticky(粘性定位)。
通过 top、right、bottom、left 等属性来设置元素相对于其包含块的位置。

总结一下就是，display 主要控制元素的基础布局，float 则用于浮动布局，而 position 则能更精细地控制元素在页面中的定位和层叠顺序

注意事项：

接下来说说这些属性在实际使用中的一些组合和注意点:

1、display 和 float:

float 会改变元素的 display 值。当一个元素被浮动后，它会自动变成块级元素，无论原本是行内还是行内块元素。浮动元素会影响周围的文档流，但内部的子元素则不会受到浮动影响。

2、display 和 position:

静态定位(position: static)是默认值，不影响 display属性，元素仍参与正常的文档流。

相对定位(position: relative)会使元素相对于其正常位置移动，但仍保留其在文档流中的位置。

绝对定位(position: absolute)会使元素完全脱离文档流，这时 display 的行为意义不大，因为绝对定位元素会覆盖其它元素。

固定定位(position: fixed)与绝对定位相似，不过是相对于视口

粘性定位(position: sticky)结合了相对定位和固定定位的特点，在滚动时能“粘”在某个位置。

3、float 和 position:

一般不会同时使用 float 和 position，因为 float 本身会使元素脱离文档流并浮动，而定位属性也会对元素进行重新定位。

在特殊布局需求下，可以结合使用使浮动元素有更复杂的表现。

40.说说 CSS中position: absolute 与fiexd的共同点和区别？

都是用来定位元素的一种方式，都可以使元素脱离文档流，不占据原有位置，允许通过top，right，left，bottom来进行精确定位

区别：absolute绝对参考对象是离他最近的定位元素（非static的元素）的父级元素，如果没有找到这样的父级元素，以整个文档（即html元素）为参考点，fixed以浏览器窗口为参考点，无论滚动页面还是其他

滚动行为不同：absolute：元素随页面内容滚动，而保持在相对位置不变，fixed：元素固定在浏览器窗口的位置，页面滚动时也不会改变

relative：相对于元素自身的初始位置偏移，仍占据原文档流中原始的位置

static：默认定位方式。不进行特别定位，正常出现在文档流中

41.对 sticky 定位的理解

混合静态顶我和固态定位来实现一个元素在滚动时特定位置的粘滞效果，属性的元素在达到某个滚动位置时，粘在窗口视图或某个容器上，在其他时候，又像相对定位一样处于正常文档流中，类似relative和fixed的集合属性

2、工作原理

Sticky 定位的原理是:元素在没有达到指定的方向位置时，它表现为相对定位(position:relative );而一旦达到其滚动位置时，它便切换为固定定位(position:fixed)，但只固定在指定的相对位置。

3、使用场景

Sticky 定位常用于设计一些需求，比如导航栏在滚动到顶部后固定，或是在长列表中实现段落标题的导航。它可以让某些页面内容在用户滚动过程中始终保持可见，不影响整体布局。

粘性定位触发的条件：必须指定 top、right、bottom、left 中的至少一个值，父元素不能有overflow:hidden或overflow:auto，属性父元素的高度不能小于sticky元素的高度，sticky元素仅在其父元素内生效