1 css sprite是什么,有什么优缺点
- 概念：将多个⼩图⽚拼接到⼀个图⽚中。通过 background-position 和元素尺⼨调节需要显示的背景图案。
- 优点：
- 减少 HTTP 请求数，极⼤地提⾼⻚⾯加载速度
- 增加图⽚信息重复度，提⾼压缩⽐，减少图⽚⼤⼩
- 更换⻛格⽅便，只需在⼀张或⼏张图⽚上修改颜⾊或样式即可实现
- 缺点：
- 图⽚合并麻烦
- 维护麻烦，修改⼀个图⽚可能需要从新布局整个图⽚，样式
2 display: none; 与 visibility: hidden; 的区别
- 联系：它们都能让元素不可⻅
- 区别：
- display:none ;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；
- visibility: hidden ;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可⻅
- display: none ;是⾮继承属性，⼦孙节点消失由于元素从渲染树消失造成，通过修改⼦孙节点属性⽆法显示；visibility: hidden; 是继承属性，⼦孙节点消失由于继承了 hidden ，通过设置 visibility: visible; 可以让⼦孙节点显式
- 修改常规流中元素的 display 通常会造成⽂档重排。修改 visibility 属性只会造成本元素的重绘。
- 读屏器不会读取 display: none ;元素内容；会读取 visibility: hidden; 元素内容
3 link 与 @import 的区别
- link 是 HTML ⽅式， @import 是CSS⽅式
- link 最⼤限度⽀持并⾏下载， @import 过多嵌套导致串⾏下载，出现 FOUC (⽂档样式短暂失效)
- link 可以通过 rel=“alternate stylesheet” 指定候选样式
- 浏览器对 link ⽀持早于 @import ，可以使⽤ @import 对⽼浏览器隐藏样式
- @import 必须在样式规则之前，可以在css⽂件中引⽤其他⽂件
- 总体来说： link 优于 @import
4 什么是FOUC?如何避免
- Flash Of Unstyled Content ：⽤户定义样式表加载之前浏览器使⽤默认样式显示⽂档，⽤户样式加载渲染之后再从新显示⽂档，造成⻚⾯闪烁。
- 解决⽅法：把样式表放到⽂档的
5 如何创建块级格式化上下⽂(block formatting context),BFC有什么⽤
- 创建规则：
- 根元素
- 浮动元素（ float 不取值为 none ）
- 绝对定位元素（ position 取值为 absolute 或 fixed ）
- display 取值为 inline-block 、 table-cell 、 table-caption 、 flex 、
- inline-flex 之⼀的元素
- overflow 不取值为 visible 的元素
- 作⽤：
- 可以包含浮动元素
- 不被浮动元素覆盖
- 阻⽌⽗⼦元素的 margin 折叠
6 display、float、position的关系
- 如果 display 取值为 none ，那么 position 和 float 都不起作⽤，这种情况下元素不产⽣框
- 否则，如果 position 取值为 absolute 或者 fixed ，框就是绝对定位的， float 的计算值为 none ， display 根据下⾯的表格进⾏调整。
- 否则，如果 float 不是 none ，框是浮动的， display 根据下表进⾏调整
- 否则，如果元素是根元素， display 根据下表进⾏调整
- 其他情况下 display 的值为指定值
- 总结起来：绝对定位、浮动、根元素都需要调整 display
7 清除浮动的⼏种⽅式，各⾃的优缺点
- ⽗级 div 定义 height
- 结尾处加空 div 标签 clear:both
- ⽗级 div 定义伪类 :after 和 zoom
- ⽗级 div 定义 overflow:hidden
- ⽗级 div 也浮动，需要定义宽度
- 结尾处加 br 标签 clear:both
- ⽐较好的是第3种⽅式，好多⽹站都这么⽤
8 为什么要初始化CSS样式?
- 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的⻚⾯显示差异。
- 当然，初始化样式会对 SEO 有⼀定的影响，但⻥和熊掌不可兼得，但⼒求影响最⼩的情况下初始化
9 css3有哪些新特性
- 新增各种 css 选择器
- 圆⻆ border-radius
- 多列布局
- 阴影和反射
- ⽂字特效 text-shadow
- 线性渐变
- 旋转 transform
CSS3新增伪类有那些？
p:first-of-type 选择属于其⽗元素的⾸个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其⽗元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其⽗元素唯⼀的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其⽗元素的唯⼀⼦元素的每个 <p> 元素。
p:nth-child(2) 选择属于其⽗元素的第⼆个⼦元素的每个 <p> 元素。
:after 在元素之前添加内容,也可以⽤来做清除浮动。
:before 在元素之后添加内容。
:enabled 已启⽤的表单元素。
:disabled 已禁⽤的表单元素。
:checked 单选框或复选框被选中。
10 display有哪些值？说明他们的作⽤
- block 转换成块状元素。
- inline 转换成⾏内元素。
- none 设置元素不可⻅。
- inline-block 象⾏内元素⼀样显示，但其内容象块类型元素⼀样显示。
- list-item 象块类型元素⼀样显示，并添加样式列表标记。
- table 此元素会作为块级表格来显示
- inherit 规定应该从⽗元素继承 display 属性的值
11 介绍⼀下标准的CSS的盒⼦模型？低版本IE的盒⼦模型有什么不同的？
- 有两种， IE 盒⼦模型、 W3C 盒⼦模型；
- 盒模型： 内容(content)、填充( padding )、边界( margin )、 边框( border )；
- 区 别： IE 的c ontent 部分把 border 和 padding 计算了进去;
12 CSS优先级算法如何计算？
- 优先级就近原则，同权重情况下样式定义最近者为准
- 载⼊样式以最后载⼊的定位为准
- 优先级为: !important > id > class > tag ; !important ⽐ 内联优先级⾼
13 对BFC规范的理解？
- 它决定了元素如何对其内容进⾏定位,以及与其他元素的关系和相互作⽤
14 谈谈浮动和清除浮动
- 浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另⼀个浮动框的边框为⽌。由于浮动框不在⽂档的普通流中，所以⽂档的普通流的块框表现得就像浮动框不存在⼀样。浮动的块框会漂浮在⽂档普通流的块框上
15 position的值， relative和absolute定位原点是
- absolute ：⽣成绝对定位的元素，相对于 static 定位以外的第⼀个⽗元素进⾏定位
- fixed ：⽣成绝对定位的元素，相对于浏览器窗⼝进⾏定位
- relative ：⽣成相对定位的元素，相对于其正常位置进⾏定位
- static 默认值。没有定位，元素出现在正常的流中
- inherit 规定从⽗元素继承 position 属性的值
文章来源地址https://www.toymoban.com/news/detail-540869.html
文章来源：https://www.toymoban.com/news/detail-540869.html
到了这里，关于前端面试题-HTML、、web综合问题（四）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
