7、display有哪些值？说明他们的作用。
display 是一个 CSS 属性，用于定义元素的显示类型。以下是 display 的常见值及其作用：
block：将元素呈现为块级元素，使其在独立的一行显示。默认情况下，块级元素会占据其父容器的整个宽度，并垂直堆叠。常见的块级元素包括<div>、<p>、<h1>到<h6>等。inline：将元素呈现为内联元素，使其按行内的方式显示。内联元素不会独占一行，它们根据其内容的大小自动进行水平排列。常见的内联元素包括<span>、<a>、<strong>、<em>等。inline-block：结合了block和inline的特点，可以使元素按行内的方式显示，并且可以设置宽度、高度和内外边距。与inline不同，inline-block元素可以具有块级元素的特性。常见的使用场景是创建导航菜单或展示图片等。none：将元素隐藏，不占据空间，并且不可见。应用none后，元素及其子元素都会被隐藏。通过 JavaScript 可以动态地修改display: none;来实现元素的显示和隐藏。flex：使用弹性布局模型来排列元素。通过设置容器的display: flex;，可以将其子元素放置在主轴上，并根据需求自动调整它们的大小和位置。常见用途包括创建灵活的布局和响应式设计。grid：使用网格布局模型来排列元素。通过设置容器的display: grid;，可以将元素按照行和列放置在网格中，并进行精确的布局控制。常见用途包括复杂的页面布局和网格化的设计。
还有其他一些值，如 table、list-item 等，用于实现特定的布局需求。这些不同的 display 值提供了灵活的方式来控制元素的显示和布局，可以根据需要选择适合的值来实现所需的效果。
8、对BFC规范的理解？
BFC（块级格式化上下文）是指一个独立的渲染区域，它规定了内部块级元素如何布局，并且与其他元素相互隔离。BFC 是 CSS 渲染引擎用于处理元素布局和浮动的一种机制。
BFC 规范具有以下特点和作用：
- 元素的内部布局：BFC 内的块级元素在垂直方向上一个接一个地布局，即一个元素紧接着另一个元素。这使得元素在默认情况下不会重叠。
- 浮动元素的清除：BFC 会包含浮动元素，防止父元素无法正确计算其高度，从而避免出现高度塌陷问题。当一个元素创建了一个新的 BFC 时，它会清除其父元素中的浮动。
- 边距折叠的影响：在同一 BFC 内的相邻块级元素的垂直外边距会发生折叠，即取其中较大的边距值。不同 BFC 之间的元素不会发生边距折叠。
- 阻止元素溢出：通过将一个元素设为 BFC，可以阻止其内部的浮动元素溢出到外部的元素中，使得浮动元素在 BFC 内部进行布局。
- 避免与浮动元素重叠：BFC 可以与浮动元素相互隔离，元素内部和外部的浮动元素不会相互重叠。
创建 BFC 的方法：
- 使用
float属性设置元素浮动。例如，将元素的float属性设置为left或right。 - 使用
position属性将元素定位为absolute、fixed或sticky。 - 使用
display属性将元素设为inline-block、table-cell、flex、grid中的任意值。 - 使用
overflow属性设置元素的值为auto或hidden。
通过理解和应用 BFC 规范，可以更好地控制元素的布局、避免布局问题，以及解决边距折叠等常见的样式排版问题。
9、清除浮动有哪些方式？
清除浮动是为了解决浮动元素引起的父元素高度塌陷和布局问题。以下是一些常见的清除浮动的方式：
- 使用空元素清除浮动：在浮动元素后面添加一个空的块级元素，并为其设置
clear: both;。这个空元素会占据一行，使得父元素的高度能够正确计算。示例代码如下：
<div class="clearfix"> <div class="float-left">浮动元素</div> <div class="float-left">浮动元素</div> <div class="clear"></div> </div>
.clearfix:after { content: ""; display: table; clear: both; } .float-left { float: left; }
- 使用伪元素清除浮动：与空元素类似，可以通过在父元素上使用
::after伪元素来清除浮动。示例代码如下：
<div class="clearfix"> <div class="float-left">浮动元素</div> <div class="float-left">浮动元素</div> </div>
.clearfix::after { content: ""; display: table; clear: both; } .float-left { float: left; }
- 使用额外的父元素包裹浮动元素：可以创建一个新的父元素，并设置其样式为
overflow: hidden;或overflow: auto;。这样会触发 BFC（块级格式化上下文），从而清除浮动。示例代码如下：
<div class="clearfix"> <div class="float-left">浮动元素</div> <div class="float-left">浮动元素</div> </div>
.clearfix { overflow: hidden; } .float-left { float: left; }
- 使用 CSS 清除浮动技巧：应用于浮动元素的父元素上，添加
::after伪元素，并应用content: "."; display: block; height: 0; clear: both; visibility: hidden;。示例代码如下：
<div class="clearfix"> <div class="float-left">浮动元素</div> <div class="float-left">浮动元素</div> </div>
.clearfix::after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .float-left { float: left; }
选择适合的清除浮动方式取决于具体的布局需求和浏览器兼容性要求。通常，推荐使用空元素或伪元素来清除浮动，因为它们更简洁、语义化，并且不需要额外的 DOM 元素。另外，也可以使用 Flexbox 或 Grid 布局来避免浮动带来的布局问题。
10、在网页中，应该使用奇数还是偶数的字体？为什么？
在网页中，没有严格规定只能使用奇数或偶数的字体大小。选择使用奇数或偶数的字体大小取决于设计需求和个人偏好。
一般来说，使用奇数的字体大小可以带来更好的视觉平衡和对称感。奇数的字体大小在视觉上更容易分割和组织，使得网页排版更加美观和整齐。例如，使用 15px 或 17px 的字体大小相对于 16px 的字体大小可能看起来更加平衡和舒适。
然而，这并不意味着偶数的字体大小就是不合适的。在某些情况下，使用偶数的字体大小可以达到特定的效果或满足特定的设计要求。例如，在一些简洁、现代的设计中，使用偶数的字体大小可能更加清晰和精确，与其他设计元素相协调。
最重要的是，无论选择奇数还是偶数的字体大小，都应该考虑与其他设计元素的协调性和整体的视觉效果。同时，还要确保字体大小的可读性和易用性，适应不同屏幕尺寸和设备。
因此，选择奇数或偶数的字体大小应该根据具体的设计需求、风格和实际效果来决定，没有绝对的固定规则。最好的方式是在设计过程中尝试不同的字体大小，然后选择最适合你网页的方案。
11、position有哪些值？分别是根据什么定位的？
CSS 中的 position 属性用于设置元素的定位方式。下面是 position 属性的常见取值及其定位方式：
static（默认）：元素按照正常的文档流布局进行定位，不受其他定位属性的影响。relative：元素相对于其正常位置进行定位，通过使用 top、right、bottom 和 left 属性来调整位置。该位置调整不会影响文档布局中其他元素的位置，即元素仍然占据原来的空间。absolute：元素相对于最近的非 static 定位的父元素或根元素进行定位。如果没有符合条件的父元素，则相对于根元素（即<html>元素）进行定位。通过使用 top、right、bottom 和 left 属性来指定位置。fixed：元素相对于浏览器窗口进行定位，即元素固定在屏幕上的位置，不随页面滚动而变化。通过使用 top、right、bottom 和 left 属性来指定位置。sticky：元素在滚动到特定位置时变为固定定位，即元素在滚动过程中会保持在给定的位置。通过使用 top、right、bottom 和 left 属性以及z-index属性来指定位置和叠放顺序。inherit：元素继承父元素的position属性值。
这些 position 属性的不同取值可以根据需要进行灵活使用，用于实现各种不同的布局效果和交互效果。需要注意的是，relative、absolute 和 fixed 的定位方式会使元素脱离文档流，可能会影响其他元素的位置。因此，在使用这些定位方式时，需要谨慎设置位置属性，以避免布局混乱或重叠的问题。
12、写一个左中右布局占满屏幕，其中左、右俩块固定宽200，中间自适应宽，要求先加载中间块，请写出结构及样式。
可以使用HTML和CSS来实现一个左中右布局，其中左右两块固定宽度为200px，中间块自适应宽度，并要求先加载中间块。以下是一种可能的结构和样式：
HTML结构：
<div class="container"> <div class="left"></div> <div class="middle">这是中间块</div> <div class="right"></div> </div>
CSS样式：
.container { display: flex; height: 100vh; /* 占满屏幕高度 */ } .left, .right { width: 200px; /* 左右块固定宽度为 200px */ background-color: #f1f1f1; } .middle { flex-grow: 1; /* 自动扩展宽度占据剩余空间 */ background-color: #e1e1e1; }
上述代码将创建一个容器（.container），并利用CSS的Flexbox布局实现左中右布局。左侧块（.left）和右侧块（.right）都设置了宽度为200px，中间块（.middle）通过设置flex-grow: 1使其根据剩余空间自动扩展宽度。请注意，中间块的内容是在HTML中直接添加的。
这样设计可以确保中间块先加载并在布局中占据空间，而左右两侧的块则保持固定宽度。
13、什么是CSS reset?
CSS Reset（或称为CSS重置）是一种常用的技术，用于规范化浏览器默认样式。由于不同浏览器对元素的默认样式有所差异，使用CSS Reset可以消除这些差异，使得在不同浏览器上的页面呈现更加一致。
CSS Reset 的主要目的是将各个浏览器的默认样式设定为相同的初始值，以避免默认样式的差异给开发者带来的困扰。CSS Reset 通常涉及重置一些常见的HTML元素（如p、h1、ul等）的外边距、内边距、行高、字体大小等属性，使其在各个浏览器上的表现尽量一致。
通过应用CSS Reset，开发者可以从一个更加干净和一致的起点开始构建自己的样式和布局。它有助于减少跨浏览器开发中的样式调试时间，并提供更好的控制权和可预测性。
需要注意的是，CSS Reset并非适用于所有项目，特别是在使用某些CSS框架或UI库时，可能已经包含了自己的样式重置。因此，在考虑使用CSS Reset之前，建议先评估项目的具体需求和已有样式库的情况。
14、CSS sprite 是什么，有什么优缺点？
CSS Sprites（或称为CSS精灵）是一种将多个小图标或图片合并到一个大图中的技术。通过使用CSS Sprites，可以减少网页加载时需要请求的图片数量，提高网页加载速度和性能。
优点：
- 减少HTTP请求数量：使用CSS Sprites可以将多个小图片合并为一个大图，从而减少了页面加载时需要发起的HTTP请求数量。这可以显著降低网页的加载时间，特别是对于拥有大量小图标的网页来说效果更明显。
- 提高网页性能：由于减少了HTTP请求数量，可以大幅度地降低服务器的负载，从而提高网页的整体性能和响应速度。
- 精灵图利用率高：将多个小图标合并为一个大图，可以更有效地利用图像资源，减少图片文件的大小，并且可以避免过多的空白间隙浪费。
- 更好的交互体验：加载速度更快的页面可以提供更好的用户体验，尤其是在移动设备等网络环境较差的情况下。
缺点：
- 维护困难：使用CSS Sprites需要手动精确计算和设置背景图像的位置和尺寸，这会增加开发和维护的工作量，尤其是在图标的位置或尺寸发生变化时。
- 不适合动态图像：如果图标需要在不同状态之间进行切换（例如：hover状态、active状态），并且这些状态是通过更换不同位置的图片来实现的，那么使用CSS Sprites可能会比较复杂。
总结：
CSS Sprites是一种有效的优化网页加载性能的技术，通过将多个小图标合并到一个大图中，减少HTTP请求次数，提高网页加载速度和性能。然而，使用CSS Sprites需要权衡其带来的维护成本，并且可能不适用于包含大量动态图像的情况。
15、display:none;与visibility:hidden;的区别
display: none; 和 visibility: hidden; 是两种常用的CSS属性，用于隐藏元素，但它们之间有一些区别。
- 区别在于元素的布局：
display: none;：设置元素为display: none;时，元素会完全从页面文档流中移除，不占据任何空间，其他元素会像该元素不存在一样重新排列布局。visibility: hidden;：设置元素为visibility: hidden;时，元素仍然占据着相应的空间，只是不可见，对页面布局没有任何影响。其他元素仍然按照原来的布局位置排列。
- 区别在于子元素的显示：
display: none;：如果一个元素设置为display: none;，那么它的所有子元素也会被隐藏，无论这些子元素是否设置了其他显示或隐藏属性。visibility: hidden;：如果一个元素设置为visibility: hidden;，那么它的子元素可以单独控制显示或隐藏，即使父元素不可见，子元素仍然可以通过其他属性来显示。
- 区别在于触发事件：
display: none;：设置元素为display: none;时，该元素无法响应用户的交互事件（如点击、悬浮等），因为它已经被完全从文档流中移除。visibility: hidden;：设置元素为visibility: hidden;时，该元素仍然可以响应用户的交互事件，因为它仍然存在于文档流中，只是在视觉上不可见。
综上所述，display: none; 和 visibility: hidden; 的主要区别在于元素的布局与子元素的显示控制，以及对触发事件的影响。选择使用哪种方式隐藏元素取决于具体的需求和预期的效果。
16、opacity和rgba区别
opacity 和 rgba 是两种用于控制元素透明度的 CSS 属性。
opacity属性:
opacity属性是一个单一的数字值，范围从 0 到 1，表示元素的透明度级别，其中 0 表示完全透明（不可见），1 表示完全不透明（完全可见）。- 设置
opacity属性会影响元素及其所有子元素的透明度，无法在子元素上单独调整透明度。 - 透明度改变也会影响事件处理，即透明度为 0 的元素以及其子元素都无法响应用户交互事件。
rgba颜色值:
rgba是一种可以在 CSS 中指定颜色的表示方式，由红、绿、蓝三种基色的通道值和一个 alpha 通道值组成，用于控制颜色的透明度。rgba中的 alpha 通道值范围也是从 0 到 1，其中 0 表示完全透明（不可见），1 表示完全不透明（完全可见）。- 通过设置
rgba颜色值中的 alpha 值，可以控制元素的颜色的透明度，而不影响其他样式属性（例如尺寸、边框等）的表现。 rgba颜色值可以应用于元素的背景颜色、边框颜色以及文本颜色等属性。
总结：
opacity 属性用于设置元素及其所有子元素的透明度，而 rgba 颜色值用于控制元素的颜色的透明度，不会影响其他样式属性。因此，如果只是需要调整整个元素及其内容的透明度，可以使用 opacity 属性；如果需要仅调整元素的颜色的透明度，应该使用 rgba 颜色值。
17、什么是垂直外边距合并？说说合并后的几种情况？
垂直外边距合并是指在两个相邻的块级元素之间，它们的顶部和/或底部的外边距合成一个外边距的过程。如果两个相邻元素都有外边距，则这些外边距将合并为一个较大的外边距。
合并后的几种情况如下：
- 如果两个相邻元素的外边距都是正数，则它们合并后的外边距等于它们中较大的一个。
- 如果两个相邻元素的外边距都是负数，则它们合并后的外边距等于它们中绝对值较大的一个。
- 如果一个元素的外边距是正数，另一个元素的外边距是负数，则它们合并后的外边距等于它们中外边距的代数和。
- 如果相邻元素之间有一个空白节点（比如一个换行符），则它们的外边距不会合并。
需要注意的是，只有在垂直方向上相邻的元素才会发生外边距合并，而在水平方向上是不会发生的。另外，内联元素之间也不会发生外边距合并。
18、如何使用css实现一个三角形？
实现一个三角形可以使用 CSS 的伪元素 ::before 或 ::after 等来生成。下面介绍两种常见的实现方式：
- 通过 border 实现
可以使用border属性来设置四个边框，然后将其中三个边框设置为透明，剩下的一个边框设置为实线，并设置宽度为 0，这样就可以实现一个三角形了。示例代码如下：
.triangle { width: 0; height: 0; border-top: 50px solid #f00; /* 设置三角形高度为 50px，颜色为红色 */ border-left: 25px solid transparent; /* 左侧边框透明 */ border-right: 25px solid transparent; /* 右侧边框透明 */ }
- 通过 transform 实现
可以使用transform属性来实现旋转操作，将一个正方形或矩形旋转 45 度，就可以得到一个三角形了。示例代码如下：
.triangle { width: 50px; height: 50px; background-color: #f00; /* 设置背景色为红色 */ transform: rotate(45deg); /* 旋转45度 */ }
通过 transform 实现可以不受元素大小的限制，并且可以方便地调整三角形的方向和大小。
以上是两种常见的实现方式，还可以通过其他方法来实现三角形，如使用 SVG 图片或 CSS 的 clip-path 属性等。不同的方法各有优劣，需要根据具体情况来选择合适的实现方式。
19、说说你对弹性盒子布局的理解
弹性盒子布局（flexbox）是一种 CSS 布局方式，用于实现灵活、可响应的网页设计。它能够让容器内部的元素具有自适应和弹性的特性，可以根据不同的布局需求进行自动调整和排列。
在弹性盒子布局中，有两个重要的概念：弹性容器（flex container）和弹性项目（flex item）。弹性容器是指应用了 flexbox 布局的容器元素，用于定义一组弹性项目的布局方式；弹性项目则是指这些子元素，它们通过弹性容器来进行排列和布局。
常用的属性
Flex 容器的属性
- display: flex; 将元素设置为弹性盒子容器。
- flex-direction: row | row-reverse | column | column-reverse; 定义主轴方向。
- justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; 定义主轴位置对齐方式。
- align-items: stretch | flex-start | flex-end | center | baseline; 定义交叉轴位置对齐方式。
- align-content: stretch | flex-start | flex-end | center | space-between | space-around; 定义行列放置位置对齐方式。
Flex 项目的属性 - flex-grow: ; 定义弹性项目的放大比例，默认为0，即不会放大。
- flex-shrink: ; 定义弹性项目的缩小比例，默认为1，即会自动缩小。
- flex-basis: | auto; 定义弹性项目在分配多余空间之前的在主轴方向上的大小。
- flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]; 组合属性，定义弹性项目的放大比例、缩小比例和在主轴方向上的初始大小。
- order: ; 定义弹性项目的排列顺序，默认是0。
弹性盒子布局的优点
- 自适应性强：弹性盒子布局能够自动适应不同大小、不同分辨率、不同设备的屏幕。
- 灵活性强：弹性盒子布局可以灵活地调整元素的宽度、高度、间距和位置。
- 可读性好：弹性盒子布局代码简洁，易于阅读和理解，不需要过多的 CSS 嵌套。
总之，弹性盒子布局是一种非常实用、灵活、自适应和可扩展的布局方式，可以让我们更容易地定制和管理网页的布局。
20、css3动画都做过哪些？
作为前端开发工程师，我已经使用 CSS3 动画实现过很多不同的效果，包括：
- 过渡动画：CSS3 过渡动画可以用于创建平滑的动画效果，例如在元素状态之间添加过渡效果（如悬停、聚焦或单击）时。
- 旋转动画：CSS3 的 transform 属性可以用于实现旋转效果，例如使一个元素绕一个中心点旋转或自转。
- 缩放动画：可以使用 CSS3 的 transform 属性来调整元素的大小，以实现缩放动画效果。
- 移动动画：CSS3 的 transform 属性也可以用于元素的移动，例如在屏幕上滑动一个元素或元素组。
- 渐变动画：可以使用 CSS3 的渐变属性来创建惊艳的渐变动画效果，例如背景渐变或文字颜色渐变。
- 透明度动画：可以使用 CSS3 的 opacity 属性来实现元素的淡入淡出效果。
- 动态阴影：CSS3 的 box-shadow 属性是用于创建阴影效果，可以实现动态阴影效果，例如光线投影、蒙版或悬浮效果。
- 多重阴影效果：CSS3 的 box-shadow 属性还可以用于创建多重阴影效果，例如多重光源或浮动立方体。
- 文字效果：CSS3 的 text-shadow 属性可以用于为文本添加阴影效果，可以创建漂亮的艺术字体和 3D 文本效果。
这只是 CSS3 动画的一小部分，还有很多不同的效果可以使用 CSS3 实现。在实际工作中，我会根据具体需求选择最合适的 CSS3 动画效果。
21、说说你对弹性盒子的理解？使用场景有哪些？常用属性？
弹性盒子（Flexbox）是一种用于网页布局的模块化CSS布局工具。它通过定义容器和容器内的子元素之间的关系，实现了灵活的自适应布局。
弹性盒子的使用场景包括但不限于以下几种：
- 垂直居中：弹性盒子可以轻松实现垂直居中，无论是将内容垂直居中还是完整的盒子垂直居中。
- 等高列布局：当需要多列布局时，弹性盒子可以确保多个盒子的高度相等，使布局更加整齐美观。
- 自适应布局：弹性盒子可以根据容器的大小自动调整子元素的宽度和高度，从而适应不同尺寸的屏幕或设备。
- 排序和重新排序：弹性盒子允许轻松地改变子元素在容器中的顺序，从而实现灵活的排列方式。
常用的弹性盒子属性有： - display：指定容器为弹性盒子，可以设置为"flex"或"inline-flex"。
- flex-direction：指定弹性盒子的主轴方向，可以是"row"（水平方向）、“column”（垂直方向）、“row-reverse”（水平反向）或"column-reverse"（垂直反向）。
- flex-wrap：指定子元素是否换行，可以是"nowrap"（不换行）或"wrap"（换行）。
- justify-content：指定子元素在主轴上的对齐方式，可以是"flex-start"（起点对齐）、“flex-end”（终点对齐）、“center”（居中对齐）、“space-between”（两端对齐，中间间隔相等）或"space-around"（子元素之间间隔相等）。
- align-items：指定子元素在交叉轴上的对齐方式，可以是"flex-start"（起点对齐）、“flex-end”（终点对齐）、“center”（居中对齐）、“baseline”（基线对齐）或"stretch"（拉伸填充对齐）。
- align-content：指定多行子元素在交叉轴上的对齐方式，只有在有多行时才有效果，可以是"flex-start"（起点对齐）、“flex-end”（终点对齐）、“center”（居中对齐）、“space-between”（两端对齐，中间间隔相等）或"space-around"（子元素之间间隔相等）。
这些属性可以通过组合使用，灵活地控制弹性盒子的布局和对齐方式。
22、说说你对css预编译语言的理解？使用场景有哪些？
CSS预处理器是一种将类似于编程语言的特性引入CSS的工具。它们允许开发者使用变量、函数、嵌套规则、混合等高级概念来编写CSS样式表，并通过预处理器将其转换为标准的CSS代码。
使用CSS预处理器的主要场景包括但不限于以下几个方面：
- 提高开发效率：通过使用变量和嵌套规则，可以减少代码的重复书写，使样式表更加易于维护。预处理器还提供了一些实用的函数和混合（Mixin）功能，可以进一步简化样式的编写。
- 提供可复用的样式组件：通过使用预处理器的函数和混合功能，可以创建可复用的样式组件。这些组件可以在多个项目中共享和重用，减少了代码冗余并提高了代码的可维护性。
- 支持条件逻辑和算术运算：预处理器引入了条件语句和数学运算的功能，使得可以根据特定条件应用不同的样式，或者对数值进行计算。这使得样式更加灵活和动态。
- 自动添加浏览器前缀：许多CSS属性在不同的浏览器中需要添加前缀以实现兼容性。预处理器可以根据配置自动添加这些前缀，省去手动添加的繁琐过程。
- 代码模块化和组织：通过将样式表分割成多个模块，可以更好地组织和管理代码。预处理器提供了导入和注释功能，使得可以轻松地引用其他模块并进行代码注释。
不同的CSS预处理器有不同的语法和特性，常见的CSS预处理器包括Sass、Less和Stylus等。它们都提供了类似的功能，但具体的语法和用法可能有所不同。选择适合自己项目需求的预处理器，并根据文档学习其语法和使用方法，可以在开发中获得更高效且可维护的CSS样式表。
