目录

1.css3有哪些新特性？

2.CSS有哪些基本选择器？它们的权重是如何表示的？

3.css 选择器的类型优先级排序

4.写出几种CSS实现元素两个盒子垂直水平居中的代码

5.CSS 常见的伪类和伪元素有哪些?

6.CSS的引入方式有哪些？ink和@ import的区别是什么？

7.怎么理解盒子模型，盒子模型有几种？

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

9.为什么要初始化 CSS 样式？

10.position 跟 display、overflow、float 这些特性相互叠加后会怎么样？

11.为什么会出现浮动? 什么时候需要清除浮动？清除浮动有哪些方式？

12.在网页中的应该使用奇数还是偶数的字体？为什么呢？

13.margin 和 padding 分别适合什么场景使用？

14.px、em、rem的区别？

15.浏览器内核有哪几种，分别是哪些浏览器？

16.css预处理是什么，有哪些？

17.css自适应屏幕布局的方法有哪些？

18.从css方面优化性能？

19.css hack是什么？

20.对BFC的理解？

---

1.css3有哪些新特性？

CSS3是CSS技术的最新版本，它提供了许多新特性和功能，以改进网页的外观和交互性。以下是CSS3中的一些常用新特性：

1. 响应式布局：使用CSS3媒体查询，可以让网页在不同的屏幕尺寸上适应不同的布局。

2. 动画：CSS3提供了transition和animation特性，可以制作简单的动画效果。

3. 颜色：CSS3支持使用RGBa、HSLa等新的颜色格式，以及渐变色。

4. 字体：CSS3支持使用外部字体，如Google Fonts，以提高网页字体的多样性。

5. 圆角和阴影：CSS3提供了border-radius和box-shadow特性，可以制作圆角和阴影效果。

6. 背景：CSS3支持多背景图片和背景定位，可以制作美观的背景效果。

这些只是CSS3中的一些常用特性，它还有很多其他强大的功能，值得您去探索和了解。

2.CSS有哪些基本选择器？它们的权重是如何表示的？

CSS 有以下基本选择器：

1. 通配符选择器（*）：选择所有元素。

2. 元素选择器（例如 h1）：选择所有具有特定元素名称的元素。

3. ID 选择器（例如 #myId）：选择具有特定 id 属性的单个元素。

4. 类选择器（例如 .myClass）：选择具有特定类名称的一个或多个元素。

5. 属性选择器（例如 [type="text"]）：选择具有特定属性和属性值的元素。

6. 伪类选择器（例如 :hover）：选择具有特定动态状态的元素。

7. 伪元素选择器（例如 ::before）：选择具有特定生成内容的元素的一部分。

CSS 选择器的权重是根据它们的特殊性来表示的。特殊性的高低决定选择器的权重，从而决定最终样式的应用。特殊性的高低可以通过选择器的类型、数量和位置等来表示。

3.css 选择器的类型优先级排序

CSS 选择器优先级排序如下：

1. !important
2. 内联样式（style 属性）
3. ID 选择器
4. 类选择器、属性选择器、伪类选择器
5. 标签选择器、伪元素选择器
6. 通配符选择器
7. 继承选择器

注意：选择器越往后，其优先级越低。

当同一元素同时被多个选择器选中时，优先级高的选择器的样式会覆盖优先级低的选择器的样式。如果多个选择器的优先级相同，则最后加载的样式文件中的选择器优先级高于先加载的样式文件中的选择器。

4.写出几种CSS实现元素两个盒子垂直水平居中的代码

1. 使用flex布局：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
}

.box {
  width: 50%;
  height: 50%;
}

1. 使用grid布局：

.container {
  display: grid;
  place-items: center;
  height: 300px;
}

.box {
  width: 50%;
  height: 50%;
}

1. 使用table布局：

.container {
  display: table;
  height: 300px;
  width: 100%;
}

.box {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 50%;
  height: 50%;
}

1. 使用绝对定位：

.container {
  position: relative;
  height: 300px;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
}

5.CSS 常见的伪类和伪元素有哪些?

1. 伪类：

• :active：激活状态
• :hover：鼠标悬停状态
• :focus：元素获得焦点状态
• :visited：已访问链接状态
• :first-child：第一个子元素
• :last-child：最后一个子元素
• :nth-child(n)：第 n 个子元素

1. 伪元素：

• ::before：在元素内容前插入内容
• ::after：在元素内容后插入内容
• ::first-letter：选择文本的第一个字母
• ::first-line：选择文本的第一行
• ::selection：选择文本的颜色

6.CSS的引入方式有哪些？ink和@ import的区别是什么？

CSS有3种引入方式。

• 行内式是指将样式写在元素的 style属性内。

• 内嵌式是指将样式写在 style元素内。

• 外链式是指通过link标签，引入CSS文件内的样式。

通过link标签引入样式与通过@ import方法引入样式有如下区别。

（1）加载资源的限制。

link是 XHTML的标签，除了加载CSS文件外，还可以加载RSS等其他事务，如加载模板等。

@ import只能加载CSS文件。

（2）加载方式。

如果用link引用CSS，在页面载入时同时加载，即同步加载。

如果用@ import引用CSS，则需要等到网页完全载入后，再加载CSS文件，即异步加载。

（3）兼容性。

link是 XHTML的标签，没有兼容问题。

@ import是在CSS2.1中提出的，不支持低版本的浏览器。

（4）改变样式

link的标签是DOM元素，支持使用 JavaScript控制DOM和修改样式；@ import是种方法，不支持控制DOM和修改样式。

7.怎么理解盒子模型，盒子模型有几种？

W3C标准盒子模型

• 标准模式下，一个块的宽度 = width+padding(内边距)+border(边框)+margin(外边距)
• CSS中的宽（width）=内容（content）的宽
• CSS中的高（height）=内容（content）的高

IE盒子模型

• 怪异模式下，一个块的宽度 = width+margin(外边距) （即怪异模式下，width包含了border以及padding）
• CSS中的宽（width）=内容（content）的宽+（border+padding）*2
• CSS中的高（height）=内容（content）的高+（border+padding）*2

CSS3 box-sizing

• box-sizing:content-box; 将采用标准模式的盒子模型标准
• box-sizing:border-box; 将采用怪异模式的盒子模型标准
• box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。

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

• block：该元素将生成一个矩形的框，并且该元素前后会带有换行符。
• inline：该元素生成的框只在文本的基线上，元素前后没有换行符。
• inline-block：该元素生成内联框，其内容作为块级元素呈现，元素前后没有换行符。
• none：该元素不生成任何框，并且从文档流中删除。
• flex：该元素被设置为一个弹性盒子，使其子元素在一个弹性布局中分布。
• grid：该元素被设置为一个网格容器，使其子元素在网格布局中分布。

9.为什么要初始化 CSS 样式？

初始化 CSS 样式是为了将所有浏览器的默认样式设置为一致的标准，以便更好地控制页面的布局和样式。各种浏览器默认样式不同，如果不进行初始化，很可能会导致页面样式不一致的问题。通过初始化 CSS 样式，开发人员可以确保所有元素的样式以统一的方式呈现，并可以从头开始定义其他样式，从而更轻松地管理页面样式。

10.position 跟 display、overflow、float 这些特性相互叠加后会怎么样？

position、display、overflow、float等特性相互叠加后的效果，可以简单分为如下几种情况：

• position: relative/absolute/fixed 与 display: none/block 的相互影响：如果元素的 position 设置为 relative/absolute/fixed，但是元素的 display 设置为 none，那么元素将不会在页面上显示；如果元素的 position 设置为 relative/absolute/fixed，但是元素的 display 设置为 block，那么元素将会在页面上显示，并且会脱离文档流。

• position: relative/absolute/fixed 与 float 的相互影响：如果元素的 position 设置为 relative/absolute/fixed，但是元素的 float 设置为 left/right，那么元素将被挤到页面的左/右边；如果元素的 position 设置为 relative/absolute/fixed，并且元素的 float 设置为 none，那么元素将不会被挤到页面的左/右边。

• overflow 与 display 的相互影响：如果元素的 overflow 设置为 scroll/auto，但是元素的 display 设置为 none，那么元素将不会在页面上显示；如果元素的 overflow 设置为 scroll/auto，并且元素的 display 设置为 block，那么元素将会在页面上显示，并且会出现滚动条。

总的来说，这些特性的相互叠加关系取决于每一种特性的具体实现方式，所以在实际的使用中

11.为什么会出现浮动? 什么时候需要清除浮动？清除浮动有哪些方式？

浮动是因为 CSS 中的 float 属性会使元素脱离文档流，因此会出现浮动现象。

需要清除浮动当：

1. 浮动元素下方的元素布局错乱
2. 浮动元素不占据它的正常文档流位置
3. 浮动元素的父元素的高度不随其内浮动元素的增加而增加

清除浮动的方式有：

1. 在父元素添加 clear: both 属性
2. 给父元素添加伪元素并添加 clear: both 属性
3. 使用 overflow 属性，例如 overflow: hidden 或 overflow: auto
4. 使用 after 伪元素并将其设置为空块元素，并将其 clear 设置为 both

12.在网页中的应该使用奇数还是偶数的字体？为什么呢？

在网页设计中，一般使用偶数字体，如 16px 或 14px，而不是奇数字体，如 15px 或 17px。因为偶数字体在计算机上的呈现更加精确，可以避免在显示时出现一些较小的模糊误差，使得网页的字体效果更佳

13.margin 和 padding 分别适合什么场景使用？

Margin 和 padding 是用来给元素设置外边距和内边距的。

• margin：设置元素的外边距，适合于在元素与其他元素之间设置间距。
• padding：设置元素的内边距，适合于在元素内部内容与边框之间设置间距。

使用场景根据具体需求决定。一般情况下，如果需要给元素的内容保留一定的空间，可以使用 padding；如果需要给元素设置外边距，可以使用 margin。

14.px、em、rem的区别？

• px: 像素是固定大小的单位，一般用于固定尺寸（如边框、图像大小）。
• em: em 是一个相对单位，相对于父元素的字体大小。它通常用于字体大小，如果没有设置父元素的字体大小，则相对于浏览器的默认字体大小。
• rem: rem 也是一个相对单位，但相对的是根元素（HTML 元素）的字体大小。如果没有设置根元素的字体大小，则相对于浏览器的默认字体大小。因此，rem 单位通常比 em 更灵活，更易于管理。

15.浏览器内核有哪几种，分别是哪些浏览器？

浏览器内核主要：

1. Blink：Google Chrome 和 Opera 的内核。
2. Gecko：Firefox 的内核。
3. Webkit：Safari 和 Apple's 设备的内核。
4. Trident：Internet Explorer 的内核。

需要注意的是，现在很多浏览器都有自己独特的内核，而不仅仅是使用上述内核中的一种。例如，一些 Android 浏览器使用的是 Webkit 内核，但它们有自己的独特功能和特殊的行为。

16.css预处理是什么，有哪些？

CSS 预处理是一种将 CSS 扩展为具有额外功能的语言的方法。它们可以使 CSS 更加强大，并且更易于管理。常见的 CSS 预处理语言有：

1. Sass (Syntactically Awesome Style Sheets)
2. Less (Leaner Style Sheets)
3. Stylus
4. PostCSS

这些预处理语言都有类似的语法，但各有特色。它们需要先编译为标准 CSS，才能在浏览器中运行。

17.css自适应屏幕布局的方法有哪些？

• Flexbox 布局
• Grid 布局
• 百分比布局
• 媒体查询
• rem 单位布局
• JavaScript 响应式布局。

18.从css方面优化性能？

1. 合并 CSS 文件：合并多个 CSS 文件以减少 HTTP 请求数量。

2. 压缩 CSS 文件：删除 CSS 文件中的空格、注释和换行符，以减少 CSS 文件大小。

3. 避免使用 CSS 表达式：CSS 表达式会对网页性能产生负面影响。

4. 使用缓存：使用 HTTP 缓存功能可以加快加载速度。

5. 避免使用 CSS hack：CSS hack 可能不被某些浏览器支持，并且也可能导致代码难以维护。

6. 减少使用 CSS 选择器：尽量使用简单的选择器，避免使用过于复杂的选择器。

7. 使用精简的 CSS：仅使用必要的 CSS 属性，避免使用过多的属性。

8. 避免使用 @import 规则：@import 规则会导致浏览器发送额外的 HTTP 请求，从而影响性能。

19.css hack是什么？

CSS hack 是指使用特殊的代码来解决 CSS 在不同浏览器中的兼容性问题的方法。它们通常是指特定于浏览器的代码，用于解决浏览器渲染错误或兼容性问题。

CSS hack 有不同的形式，例如使用特定的浏览器前缀、条件语句等。然而，随着浏览器技术的发展和更新，它们可能不再有效，并且还可能带来一些副作用。因此，一般建议尽量避免使用 CSS hack，使用其他兼容性解决方案代替。

20.对BFC的理解？

BFC，即Block Formatting Context，块级格式化上下文，是Web页面布局的一个渲染区块，它是布局过程中生成的一个独立的渲染区域，可以独立于其他渲染区域进行布局。BFC的特点包括：内部的元素不会影响外部的元素，外部的元素不会影响内部的元素；BFC内部的所有浮动元素都会被提到BFC的顶部。BFC的出现解决了页面布局中的一些问题，例如浮动元素对文档布局的影响，多列布局等。BFC的生成方式包括：float属性不为none，position属性为absolute或fixed，display属性为inline-block、table-cell、table-caption、flex、grid。