6.CSS的引入方式有哪些？ink和@ import的区别是什么？
10.position 跟 display、overflow、float 这些特性相互叠加后会怎么样？
11.为什么会出现浮动? 什么时候需要清除浮动？清除浮动有哪些方式？
13.margin 和 padding 分别适合什么场景使用？
1.css3有哪些新特性？
CSS3是CSS技术的最新版本，它提供了许多新特性和功能，以改进网页的外观和交互性。以下是CSS3中的一些常用新特性：
这些只是CSS3中的一些常用特性，它还有很多其他强大的功能，值得您去探索和了解。
2.CSS有哪些基本选择器？它们的权重是如何表示的？
CSS 选择器的权重是根据它们的特殊性来表示的。特殊性的高低决定选择器的权重，从而决定最终样式的应用。特殊性的高低可以通过选择器的类型、数量和位置等来表示。
3.css 选择器的类型优先级排序
注意：选择器越往后，其优先级越低。
当同一元素同时被多个选择器选中时，优先级高的选择器的样式会覆盖优先级低的选择器的样式。如果多个选择器的优先级相同，则最后加载的样式文件中的选择器优先级高于先加载的样式文件中的选择器。
4.写出几种CSS实现元素两个盒子垂直水平居中的代码
.container {
display: flex;
align-items: center;
justify-content: center;
height: 300px;
}
.box {
width: 50%;
height: 50%;
}
.container {
display: grid;
place-items: center;
height: 300px;
}
.box {
width: 50%;
height: 50%;
}
.container {
display: table;
height: 300px;
width: 100%;
}
.box {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 50%;
height: 50%;
}
.container {
position: relative;
height: 300px;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 50%;
}
5.CSS 常见的伪类和伪元素有哪些?
- 伪类：
:active：激活状态:hover：鼠标悬停状态:focus：元素获得焦点状态:visited：已访问链接状态:first-child：第一个子元素:last-child：最后一个子元素:nth-child(n)：第 n 个子元素
- 伪元素：
::before：在元素内容前插入内容::after：在元素内容后插入内容::first-letter：选择文本的第一个字母::first-line：选择文本的第一行::selection：选择文本的颜色
6.CSS的引入方式有哪些？ink和@ import的区别是什么？
通过link标签引入样式与通过@ import方法引入样式有如下区别。
link是 XHTML的标签，除了加载CSS文件外，还可以加载RSS等其他事务，如加载模板等。
（2）加载方式。
如果用link引用CSS，在页面载入时同时加载，即同步加载。
如果用@ import引用CSS，则需要等到网页完全载入后，再加载CSS文件，即异步加载。
（3）兼容性。
@ import是在CSS2.1中提出的，不支持低版本的浏览器。
（4）改变样式
link的标签是DOM元素，支持使用 JavaScript控制DOM和修改样式；@ import是种方法，不支持控制DOM和修改样式。
7.怎么理解盒子模型，盒子模型有几种？
- 标准模式下，一个块的宽度 = 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
- 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 属性会使元素脱离文档流，因此会出现浮动现象。
清除浮动的方式有：
- 在父元素添加
clear: both属性 - 给父元素添加伪元素并添加
clear: both属性 - 使用 overflow 属性，例如
overflow: hidden或overflow: auto - 使用 after 伪元素并将其设置为空块元素，并将其 clear 设置为 both
12.在网页中的应该使用奇数还是偶数的字体？为什么呢？
在网页设计中，一般使用偶数字体，如 16px 或 14px，而不是奇数字体，如 15px 或 17px。因为偶数字体在计算机上的呈现更加精确，可以避免在显示时出现一些较小的模糊误差，使得网页的字体效果更佳
13.margin 和 padding 分别适合什么场景使用？
Margin 和 padding 是用来给元素设置外边距和内边距的。
使用场景根据具体需求决定。一般情况下，如果需要给元素的内容保留一定的空间，可以使用 padding；如果需要给元素设置外边距，可以使用 margin。
14.px、em、rem的区别？
- px: 像素是固定大小的单位，一般用于固定尺寸（如边框、图像大小）。
- em: em 是一个相对单位，相对于父元素的字体大小。它通常用于字体大小，如果没有设置父元素的字体大小，则相对于浏览器的默认字体大小。
- rem: rem 也是一个相对单位，但相对的是根元素（HTML 元素）的字体大小。如果没有设置根元素的字体大小，则相对于浏览器的默认字体大小。因此，rem 单位通常比 em 更灵活，更易于管理。
15.浏览器内核有哪几种，分别是哪些浏览器？
- Blink：Google Chrome 和 Opera 的内核。
- Gecko：Firefox 的内核。
- Webkit：Safari 和 Apple’s 设备的内核。
- Trident：Internet Explorer 的内核。
需要注意的是，现在很多浏览器都有自己独特的内核，而不仅仅是使用上述内核中的一种。例如，一些 Android 浏览器使用的是 Webkit 内核，但它们有自己的独特功能和特殊的行为。
16.css预处理是什么，有哪些？
CSS 预处理是一种将 CSS 扩展为具有额外功能的语言的方法。它们可以使 CSS 更加强大，并且更易于管理。常见的 CSS 预处理语言有：
这些预处理语言都有类似的语法，但各有特色。它们需要先编译为标准 CSS，才能在浏览器中运行。
17.css自适应屏幕布局的方法有哪些？
18.从css方面优化性能？
-
使用精简的 CSS：仅使用必要的 CSS 属性，避免使用过多的属性。
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。
原文地址:https://blog.csdn.net/liuxin00020/article/details/128971768
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_44430.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
