Css面试题

1. 说说你对盒子模型的理解？

盒子模型是前端开发中用来描述和布局HTML元素的概念。这个模型将每个HTML元素想象成一个矩形盒子，它由四个边框、内部内容和可选的外部间距、边框和内部填充组成

盒子模型可以分为两种盒子：块级盒子和内联盒子。

块级盒子独占一行，它的宽度默认是父元素的100%，可通过设置宽度和高度来改变其尺寸。块级盒子可以设置外边距和内边距来调整与其他元素之间的间距。常见的块级元素有 <div> <p> <h1>等。

内联盒子与其他元素在同一行上，它的宽度由其内容决定，不可以通过设置宽度和高度来改变其尺寸。内联盒子可以设置水平外边距、内边距和边框，垂直方向的设置会被忽略。内联盒子主要用于包裹文本或者内联元素，例如<span> <a> <img> 等。

每个盒子都有四个边框：上边框、右边距、下边框和左边框，可以设置边框的宽度、样式和颜色。边框包围着盒子的内容和内边距。

内边距是盒子内容与边框之间的空白区域，可以设置内边距的宽度。内边距的背景颜色默认与盒子的背景颜色相同。

外边距是盒子与其他元素之间的距离，可以设置外边距的宽度。外边距可以用于创建元素之间的间距或调整元素在页面中的位置。

总结来说，盒子模型是前端开发中一个重要的概念，他描述了HTML元素的布局和样式属性，包括边框、内边距和外边距。合理地理解和应用盒子模型可以实现网页的灵活布局和美观效果。

2. css选择器有哪些？优先级？哪些属性可以继承？

Css选择器有多种类型，常见的包括：

• 元素选择器：根据HTML元素的名称选择元素，例如<p> <div> <h1> 等。
• 类选择器：根据HTML元素的class属性选择元素，以.开头，例如.header、.container等。
• ID选择器：根据HTML元素的id属性选择元素，以#开头，例如#logo、#sidebar等。
• 属性选择器：根据HTML元素的属性选择元素，例如[type='button']、[href^='https://']等。
• 后代选择器：选择某个元素内部的后代元素，使用空格分隔，例如.container p。
• 直接子元素选择器：选择某个元素的直接子元素，使用>符号，例如.container > p。
• 兄弟选择器：选择目标元素的相邻兄弟元素，使用+符号，例如.header + p。
• 伪类选择器：根据元素的特殊状态或位置选择元素，例如:hover、:first-child、:nth-child()等。
• 伪元素选择器：选择元素的特定部分或生成的内容，例如::before、::after、::first-line等。

Css选择器的优先级是根据其特定性来确定的，特定性是一个由四个部分组成的值，分别是：内联样式的特定性、ID选择器的特定性、类选择器、伪类选择器和属性选择器的特定性、元素选择器和伪元素选择器的特定性。特定性值越高，优先级越高。

例如：

• 内联样式具有最高的特定性，优先级最高。
• ID选择器具有较高的特定性，优先级次之。
• 类选择器。伪类选择器和属性选择器具有中等特定性，优先级再次之。
• 元素选择器和伪元素选择器具有最低的特定性，优先级最低。

一般情况下，特定性越高的选择器会覆盖特定性较低的选择器所设置的样式。

关于继承，css中有些属性可以继承，意味着父元素设置的属性值会被子元素继承并应用在子元素上。常见的可继承属性包括：

• 字体相关属性（如font-family、font-size、font-weight等）
• 文本相关属性（如color、text-align、line-height等）
• 链接相关属性（如text-decoration、cursor等）
• 列表相关属性（如list-style-type、list-style-image等）

需要注意的是，并非所有属性都可以继承，例如盒模型相关属性（如width、height、padding、margin等）和定位属性（如position、top、left等）不会被子元素继承。

3. 元素水平垂直居中的方法有哪些？如果元素不定宽高呢？

实现元素水平垂直居中的方法有多种。下面是一些常见的方法：

1.使用Flexbox布局：将父元素设置为display：flex，并使用justify-content：center和align-items：center将子元素水平垂直居中。

2.使用绝对定位和负边距：将子元素设置为绝对定位（position：absolute），并将top、left、bottom和right属性都设置为0，再通过设置为0，再通过设置margin：auto来使元素水平垂直居中。

3.使用transform属性：将子元素设置为绝对定位（position：absolute），并使用translate来偏移元素的位置。

如果元素没有固定定位的宽度和高度，可以使用一些调整方法来实现水平垂直居中：

1.使用Flexbox布局的方法依然适用于元素不定宽高的情况，因为Flexbox会根据元素内容自动调整布局。
2. 使用transform和translate的方法同样适用于不定宽高的元素
3.使用表格布局（display：table）：将父元素设置为display：table，再将子元素设置为display：table-cell并使用vertical-align：middle来实现垂直居中。

这些方法能够适应不同情况下的水平垂直居中需求，选择适合项目需求和浏览器兼容性的方法进行布局。

4.怎么理解回流跟重绘？什么场景下会触发？

回流和重绘是浏览器渲染页面时的两个重要概念。

回流指的是浏览器根据最新的布局信息重新计算元素的位置和大小，并重新构建渲染树的过程。当页面的布局、内容或样式发生改变时，浏览器需要重新计算并更新每个受影响元素的几何属性（位置、大小等），然后重新绘制更新后的渲染树。

重绘指的是浏览器根据更新后的渲染树对页面进行重新绘制的过程，当元素的样式发生改变，但不影响其布局时，浏览器只需要重新绘制受影响的区域，而无需重新计算元素的位置和大小。

回流和重绘的区别在于是否触发了 布局的计算。回流是一种更为昂贵的操作，因为它涉及到重新计算和构建渲染树，而重绘只需要重新绘制指定区域。

以下是一些情况下可能会触发回流和重绘的场景：

• 页面首次渲染时，会触发回流和重绘。
• 添加、删除、修改DOM元素时，会触发回流和重绘。
• 修改元素的样式，如修改元素的宽高、位置、颜色等，会触发回流和重绘。
• 修改元素的类名或切换CSS伪类时，会触发回流和重绘
• 浏览器窗口的大小改变，会触发回流和重绘

需要注意的是，回流和重绘是计算密集型的操作，会消耗一定的性能。在编写代码时，可以尽量减少触发回流和重绘的情况，优化响应速度。以下是一些减少回流和重绘的技巧：

• 使用transform属性代替top和left来进行元素的位移，因为transform不会触发回流。
• 使用visibility属性代替display:none来隐藏元素，因为前者只会触发重绘，而后者或触发回流和重绘
• 批量修改样式时，可以先将元素的display属性设置为none，然后再进行样式修改，最后将display属性恢复，这样可以减少回流次数。
• 对需要多次重绘的动画效果，可以使用requestAnimationFrame方法来优化性能。

通过合理的理解回流和重绘的概念，以及注意触发条件和优化方法，可以提升页面的性能和用户体验。

5.什么是响应式设计？响应式设计的基本原理是什么？如何做？

响应式设计是一种网站或应用程序设计方法，旨在使页面能够根据不同设备的屏幕尺寸和分辨率自动调整布局和呈现方式，以提供更好的用户体验。响应式设计能够使页面在桌面电脑、平板电脑和手机等各种设备上都能良好地展示，并且内容和功能保持一致。

响应式设计的基本原理是使用流体网格布局、弹性图像和媒体查询等技术，通过Css和JavaScript等前端计算实现页面的自适应调整。

具体做法如下：

1.使用流体网格布局：将页面中的元素尺寸使用相对单位（如百分比）来定义，而不是固定的像素值。这样页面中的元素会根据视口的大小自动调整布局。

2.使用弹性图像：使用Css的max-width属性将图像的最大宽度设置为100%，并使用height：auto来保持纵横比。这样图像会根据父元素的宽度自动缩放。

3.使用媒体查询：媒体查询时Css3提供的一种功能，根据设备的特性（如屏幕宽度、设备类型等）来应用不同的Css样式。通过媒体查询，可以根据设备的屏幕尺寸和分辨率等来调整布局、字体大小、显示和隐藏元素等。

例如，以下是一个基本的响应式设计示例：

/* 定义流体网格布局 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 定义媒体查询，根据设备屏幕宽度调整样式 */
@media screen and (max-width: 768px) {
  .container {
    padding: 10px;
  }
}

/* 定义弹性图像 */
img {
  max-width: 100%;
  height: auto;
}

在编写响应式设计时，需要考虑页面在不同设备上的布局和可用性。可以使用媒体查询来针对不同设备的屏幕尺寸和分辨率设置不同的样式，同时也需要进行兼容性测试，确保在各种设备和浏览器上能够正常展示和交互。

响应式设计能够为用户提供良好的跨设备体验，提高页面的可访问性和用户满意度。

6.如果要做优化，CSS提高性能的方法有哪些？

要优化css并提升性能，可以考虑以下几个方面：

1. 减少Css选择器的复杂性：选择器越复杂，匹配的过程就越耗时。尽量使用简单的选择器，并避免使用后代选择器和通配符选择器。

2. 压缩和合并Css文件：通过Css压缩和合并工具可以将多个Css文件合并为一个，减少网络请求和文件大小，加快页面加载速度。

3. 使用媒体查询进行有针对性的加载：通过使用媒体查询，将特定设备或特定条件下的Css样式分离出来，只在需要的情况下加载，减少不必要的样式加载。

4. 避免使用昂贵的属性和选择器：某些Css属性会导致触发回流和重绘，如position：absolute和float，尽量避免使用。此外，避免使用低效的选择器，如后代选择器和通配符选择器。

5. 使用CSS预处理器和后处理器：使用CSS预处理器（如Sass、Less）可以帮助提高CSS的可维护性和效率，同时会自动进行压缩和合并。使用CSS后处理器（如PostCSS）可以自动进行浏览器前缀添加和代码优化。

6. 避免使用过多的嵌套：多层嵌套会加重样式解析的负担，尽量保持样式的扁平化。

7. 使用Css硬件加速来提高动画性能：使用transform和opacity属性可以触发浏览器的硬件加速，提高动画的性能流畅度。

8. 清除不必要的样式规则：在编写CSS时，注意删除不需要的、无效的或冗余的样式规则。可以使用浏览器的开发者工具来检查不必要的样式。

9. 避免使用!important：使用!important会增加样式的优先级，但会破坏样式的可维护性，尽量避免使用。

10. 将CSS放在页面的头部：将CSS样式表放在页面的头部可以避免样式的闪烁和页面重新布局的问题。

这些方法可以帮助优化Css的性能，提高页面加载速度和渲染速度。需要根据具体情况选择核酸的优化策略，并进行性能测试来验证效果。

7.说说em/px/rem/vh/vw区别?

• px（像素）：是指像素，是最基本的单位，一个px表示一个屏幕上的像素点。但是，由于不同设备的屏幕密度不同，所以1px在不同设备上可能占据不同的物理空间。
• em（相对长度单位）：是指相对于父元素的字体大小，通常用于设定元素的大小，间距等。例如，一个元素的font-size设置为20px，则1em等于20px，如果父元素也设置字体大小为20px，则1em等于父元素的字体大小。因此，em是相对单位，不同的元素可能会有不同的表现。
• rem（相对单位）：是指相对于根元素（html标签）的字体大小，它的计算方式与em相似，但是与em不同的是，rem只考虑根元素的字体大小，因此在嵌套关系较多的情况下，使用rem可以更好地控制元素大小。如果根元素的字体大小设置为20px，则1rem等于20px。
• vh（窗口高度）：是指相对于窗口高度的百分比，窗口高度指的是可视区域的高度，1vh相当于可视区域高度的1%。
• vw（窗口宽度）：是指相对于窗口宽度的百分比，窗口宽度指的是可视区的宽度，1vw相当于可视区域宽度的1%。

8.说说设备像素、css像素、设备独立像素、dpr、ppi 之间的区别？

1. 设备像素（Device Pixel）：设备像素是显示设备上的最小物理单位，也被称为物理像素。在屏幕上，每个设备像素都对应着一个实际的点，能够显示颜色或图像。
2. CSS像素（CSS Pixel）：CSS像素是相对于渲染文档的单位，用于描述网页上的元素的大小和布局。在大多数情况下，CSS像素与设备像素是相等的，即一个CSS像素对应一个设备像素。
3. 设备独立像素（Device Independent Pixel，密度无关像素）：设备独立像素是一个抽象的单位，用于测量在不同分辨率和像素密度的设备上的元素大小。视网膜显示屏等高像素密度设备上的设备上的设备独立像素与CSS像素的比例大于1。
4. 设备像素比（Device Pixel Ratio，DPR）：设备像素比是设备像素和设备无关像素的比例。它表示了在一个物理单位内包含的设备像素数量。DPR的值可以告诉浏览器如何将CSS像素映射到设备像素上。
5. 像素密度（Pixels Per Inch，PPI）：像素密度是指每英寸内存在的像素数量，通常以PPI作为单位。较高的像素密度表示单位面积内有更多的像素，使图像显示更加细腻。

总结来说，设备像素是屏幕上的物理像素，CSS像素是相对于渲染文档的单位，设备独立像素是描述元素大小的抽象单位，DPR是设备像素和设备独立像素的比例，PPI是每英寸内的像素数量。这些概念在移动设备和显示器上的分辨率、像素密度和布局中起着重要的作用。

9.css sprite是什么,有什么优缺点

CSS sprite（css精灵）是一种将多个小图片合并到一张大图中的技术。通过在页面中引用这张大图，并设置合适的background-position和尺寸，可以显示出所需的小图标或背图案。

优点：

• 减少HTTP请求数：将多个小图片合并成一张大图，减少了浏览器与服务器之间的请求次数，提高了页面加载速度
• 提高性能：由于减少了请求数，减少了网络传输时间和延迟，加快了页面加载速度，提升了用户体验。
• 减小图片大小：合并后的大图可以使用更高效的压缩算法进行压缩，减小了图片的文件大小。
• 方便更换风格：只需要替换或修改一张大图中的小图标或背景图案，就可以改变整个页面的样式，维护和更换风格更加方便。

缺点：

• 图片合并麻烦：合并图片需要手动调整和拼接小图标或背景图案，需要一定的工作量。
• 维护麻烦：如果需要修改其中一个小图标或背景图案，可能需要重新布局整个大图，并且需要更新相应的css样式。

总结：css sprite通过将多个小图片合并成一张大图，减少了HTTP请求，提高了页面加载速度和性能。它的优点包括减少请求数、提高性能、减小图片大小和方便更换风格。然而，它的缺点在于图片和维护的麻烦。

10.display: none;与visibility: hidden;的区别

display: none和visibility: hidden都可以使元素不可见，但它们在现实上有一些区别。

区别：

• display: none会使元素完全从渲染树中消失，不占据任何空间，而visibility: hidden不会使元素从渲染树中消失，仍然占据空间，只是内容不可见。
• display: none是非继承属性，子孙节点消失是因为元素本身从渲染树中消失，修改子孙节点的属性无法使用其显示。而visibility: hidden是继承属性，子孙节点消失是因为继承了hidden属性，通过设置visibility: visible可以使子孙节点显示。
• 修改具有常规流的元素的display属性通常会导致文档重排（重新计算元素的位置和大小）。而修改visibility属性只会导致本元素的重绘（重新绘制元素的可见部分）。
• 读屏器（屏幕阅读软件）不会读取display：none元素的内容，但会读取visibility: hidden元素的内容

综上所述，display: none和visibility: hidden；虽然都可以是元素不可见，但在元素在渲染树中的位置、对子孙节点的影响、性能方面有所不同。选择使用那种方式取决于具体的需求和场景。

11.link与@import的区别

1. <link>是HTML方式，@import是CSS方式。<link>标签在HTML文档的<head>部分中使用，用于引入外部CSS文件，@import是在CSS文件中使用，用于引入其他文件。
2. <link>标签最大限度地支持并行下载，浏览器会同时下载多个外部CSS文件；而@import引入的CSS文件会导致串行下载，浏览器会按照顺序逐个下载CSS文件，这可能导致页面加载速度变慢，出现FOUC（Flash of Unstyled Content）问题。
3. <link>标签可以通过rel=“alternate stylesheet”指定候选样式表，用户可以在浏览器中切换样式；而@import不支持rel属性，无法提供候选样式表功能。
4. 浏览器对<link>标签的支持早于@import，一些古老的浏览器可能不支持@import方式引入CSS文件，而可以正确解析<link>标签。
5. @import必须出现在样式规则之前，而且只能在CSS文件的顶部引用其他文件；而<link>标签可以放置在文档的任何位置。
6. 总体来说，<link>标签在性能、兼容型和灵活性方面优于@import。

因此，在实际使用中，推荐使用<link>标签来引入外部CSS文件。

12.什么是FOUC?如何避免

FOUC指的是在页面加载过程中，由于外部样式表（CSS）加载页面先以无样式的方式显示，然后突然闪烁出样式的现象。

为了避免FOUC，可以采取以下方法：

1. 将样式表放置在文档的<head>标签中：通过将样式表放在文档头部，确保浏览器在渲染页面内容之前先加载和解析样式表，从而避免了页面一开始的无样式状态。
2. 使用内联样式：将关键的样式直接写在HTML标签的style属性中，这样即使外部样式表加载延迟，页面仍然可以有基本的样式展示，避免出现完全无样式的情况。
3. 使用样式预加载：在HTML的<head>中使用<link rel=“preload”>标签，将样式表提前预加载，以确保在页面渲染之前样式表已经下载完毕。
4. 避免过多的样式表和样式文件：减少页面中使用的样式表数量和样式文件大小，优化样式表的结构和规则，从而加快样式表的加载速度。
5. 使用媒体查询避免不必要的样式加载：通过媒体查询（@media）在适当的条件下加载特定的样式，避免在不需要的情况下加载不必要的样式。

综上所述，通过优化样式加载顺序、使用内联样式、样式预加载和合理使用媒体查询等方法，可以有效避免FOUC的出现，提供更好的用户体验。

13.如何创建块级格式化上下文(block formatting context),BFC有什么用

BFC（Block Formatting Context），块级格式化上下文，是一个独立的渲染区域，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会互相影响

要创建一个块级格式化上下文（BFC），可以应用以下方法：

1. 使用float属性：将元素的float属性设置为除none以外的值，可以创建一个BFC。
2. 使用overflow属性：将元素的overflow属性设置为除visible以外的值，例如auto或hidden，可以创建一个BFC。
3. 使用display属性：将元素的display属性设置为inline-block、table-cell、table-caption等特定的值，可以创建一个BFC。
4. 使用position属性：将元素的position属性设置为absolute、fixed、relative或sticky，可以创建一个BFC。
5. 使用contain属性：将元素的contain属性设置为layout，可以创建一个BFC（仅适用于部分浏览器）。

BFC布局与普通文档流布局区别，普通文档流布局：

• 浮动的元素是不会被父级计算高度
• 非浮动元素会覆盖浮动元素的位置
• margin会传递给父级元素
• 两个相邻元素上下的margin会重叠

BFC布局规则：

• 浮动的元素会被父级计算高度（父级元素触发了BFC）
• 非浮动元素不会覆盖浮动元素的位置（非浮动元素触发了BFC）
• margin不会传递给父级（父级触发BFC）
• 属于同一个BFC的两个相邻元素上下margin会重叠

开发中的应用

• 阻止margin重叠
• 可以包含浮动元素——清除内部浮动（清除浮动的原理是两个div都位于同一个BFC区域之中）
• 自适应两栏布局
• 可以阻止元素被浮动元素覆盖

14.display、float、position的关系

• 如果display取值为none，那么position和float都不起作用，这种情况下元素不产生框
• 否则，如果position取值为absolute或者fixed，框就是绝对定位的，float的计算值为none，display根据下面的表格进行调整。
• 否则，如果float不是none，框是浮动的，display根据下表进行调整
• 否则，如果元素时根元素，display根据下表进行调整
• 其他情况下display的值为指定值
• 总结起来：绝对定位、浮动、根元素都需要调整display

综上所述，display、float和position之间存在一定的关系，它们的取值会相互影响元素的布局和显示方式。根据不同的取值组合，元素的display值可能会被调整。

15.清除浮动的几种方式，各自的优缺点

以下是清除浮动的几种常见方式以及它们的优缺点：

1. 父级div定义height：将父级容器的高度设置为以浮动元素的高度。优点是简单易实现，缺点是需要提前知道浮动元素的高度，如果高度发生变化，需要手动调整。
2. 结尾处加空div标签clear：both：在浮动元素后面添加一个空的div标签，并设置clear：both。优点是简单易实现，缺点是需要添加多余的空标签，不符合语义化。
3. 父级div定义伪类:after和zoom：父级容器使用伪元素:after清除浮动，并设置zoom：1触发hasLayout。优点是不需要额外添加多余的标签，清除浮动效果好，缺点是对老版本浏览器的兼容性需要考虑。
4. 父级div定义overflow：hidden：将父级容器的overflow属性设置为hidden。优点是简单易实现，不需要添加额外的标签，缺点是可能会造成内容溢出隐藏。
5. 父级div也浮动，需要定义宽度：将父级容器也设置为浮动，并定义宽度。优点是清除浮动效果好，缺点是需要定义宽度，不够灵活。
6. 结尾处加br标签clear：both：在浮动元素后面添加br标签，并设置clear：both。和第二种方式类似，优缺点也相似。
7. 使用clearfix类：在父级容器上应用clearfix类，该类包含伪元素清除浮动。优点是代码简洁易懂，不需要额外添加标签，缺点是需要定义并引用clearfix类。

总体而言，使用伪类:after和zoom的方式是较为常见和推荐的清除浮动的方法，它可以避免添加多余的标签，并具有较好的兼容性。然而，不同场景下适合使用不同的清除浮动方式，需要根据实际情况选择合适的方法。

16.为什么要初始化CSS样式?

初始化CSS样式的目的主要有以下几点：

1. 浏览器兼容性：不同浏览器对于HTML元素的默认样式存在差异，通过初始化CSS样式，可以尽量消除不同浏览器之前的显示差异，使页面在各个浏览器中更加一致。
2. 统一样式：通过初始化CSS样式，可以为各个元素提供一个统一的基础样式，避免默认样式的影响。这有助于开发者在项目中构建一致的界面风格，提高开发效率。
3. 提高可维护性：初始化CSS样式可以避免在编写具体样式时受到浏览器默认样式的干扰，减少不必要的样式覆盖和调整，从而提高代码的可维护性和可读性。
4. 优化性能：通过初始化CSS样式，可以避免不必要的样式计算和渲染，减少浏览器的工作量，提升页面加载和渲染性能。

需要注意的是，在进行CSS样式初始化时，应该注意选择合适的方式和范围，避免过度初始化造成不必要的代码冗余和性能消耗。同时，针对具体项目和需求，可以选择使用已有的CSS初始化库或者自定义初始化样式。

17.css3有哪些新特性

1. 新增选择器：例如nth-child（）、:first-of-type、:last-of-type等，可以根据元素在父元素中的位置进行选择。
2. 弹性盒模型：通过display-flex；可以粗行间弹性布局，简化了元素的排列和对齐方式。
3. 多列布局：使用column-count和column-width等属性可以实现将内容分为多列显示。
4. 媒体查询：通过@media可以根据设备的特性和屏幕大小应用不同的样式规则。
5. 个性化字体：使用@font-face可以引入自定义字体，并在网页中使用。
6. 颜色透明度：通过rgba（）可以设置颜色的透明度。
7. 圆角：使用border-radius可以给元素添加圆角效果。
8. 渐变：使用linear-gradient（）可以创建线性渐变背景效果。
9. 阴影：使用box-shadow可以为元素添加阴影效果。
10. 倒影：使用box-reflect可以为元素添加倒影效果。
11. 文字装饰：使用text-stroke-color可以设置文字描边的颜色。
12. 文字溢出：使用text-overflow可以处理文字溢出的情况。
13. 背景效果：使用background-size可以控制背景图片的大小。
14. 边框效果：使用boder-image元素的旋转、倾斜、位移、和缩放等变换效果。
15. 平滑过渡：使用transition可以为元素的属性变化添加过渡效果。
16. 动画：通过@keyframes和animation可以创建元素的动画效果。

18.display有哪些值？说明他们的作用

display属性用于定义元素应该生成的框类型，以下是常见的display属性值及其作用：

1. block：将元素转换为块状元素，独占一行，可设置宽度、高度、边距等属性。
2. inline：将元素转换为行内元素，不独占一行，只占据内容所需的空间，无法设置宽度、高度等块级属性。
3. none：设置元素不可见，在渲染时将其完全隐藏，不占据任何空间。
4. inline-block：使元素既有行内元素的特性（不独占一行），又具有块级元素的特性（可设置宽度、高度等属性），可以看作是行内块状元素。
5. list-item：将元素作为列表项显示，常用于有序列表（<ol>）和无序列表（<ul>）中，会添加列表标记。
6. table：将元素作为块级表格显示，常用于构建表格布局，类似于<table>元素。
7. inherit：规定应从父元素继承display属性的值，使元素继承父元素的框类型。

这些display属性值用于控制元素的外观和布局，通过选择适当的值可以实现不同的布局效果。

19.CSS优先级算法如何计算？

CSS优先级是用于确定当多个样式规则应用到同一个元素时，那个样式规则会被应用的一种规则。优先级的计算基于选择器的权重。
以下是CSS优先级计算的一般规则：

1. ！important：样式规则使用了 ！important标记，具有最高优先级，无论其位置在哪里。
2. 内联样式：直接应用在元素上的style属性具有较高的优先级。
3. ID选择器：使用ID选择器的样式规则具有较高的优先级。
4. 类选择器、属性选择器和伪类选择器：使用类选择器、属性选择器和伪类选择器的样式规则的优先级较低于ID选择器。
5. 元素选择器和伪元素选择器：使用元素选择器和伪元素选择器的样式规则的优先级较低于类选择器、属性选择器和伪类选择器

当存在多个样式规则具有相同的优先级时，会根据以下规则进行决定：

• 就近原则：当同一元素上存在多个具有相同优先级的样式规则时，最后出现的样式规则将被应用。
• 继承：某些样式属性可以被子元素继承，如果父元素具有样式规则，子元素将继承该样式。

需要注意的是，以上规则仅适用于一般情况，有些情况下可能存在更复杂的优先级计算。同时，使用!important应该谨慎，过度使用!important可能导致样式管理困难和维护问题。