2024css面试题理论题必修课经典面试题，html实体字符

父盒子要绝对定位一下

第二种方案

.item{background-color: yellow;}

.box{display:flex;justify-content:center;align-items:center;}

10. 常见的浏览器内核有哪些？

Trident( MSHTML )：IE 360 搜狗浏览器 Geckos：FireFox Presto：Opera(Opera内核原为：Presto，现为：Blink) Webkit：Safari Chrome

11. 元素的alt和title有什么异同

不同点: 元素的alt是表示图片加载失败显示的文本内容，而title是表示鼠标悬停图片时显示的文本内容. 相同点: 在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字

12. Div+CSS较table相比有什么样的优点？

正常场景一般都适用div+CSS布局， Div+CSS优点: \1. 结构与样式分离 \2. 代码语义性好 \3. 更符合HTML标准规范 \4. SEO友好 table缺点: \1. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量 \2. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td \3. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱 \4. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱 \5. 不够语义化

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

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异

14. position的值有哪些?

static: 默认值 没有定位，元素出现在正常的流中 relative(相对定位):生成相对定位的元素,相对于其正常（原先本身）位置进行定位 absolute（绝对定位):生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位 fixed（固定定位）:生成绝对定位的元素，相对于浏览器窗口进行定位

15. display:none与visibility:hidden的区别

display: none 不显示对应的元素，在文档布局中不再分配空间 visibility: hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

16. 浏览器是怎样解析CSS选择器的?

举个例子，先理解一哈:

从左到右: 而我们CSS选择器是 div div p.p1 span.red{color:red}，如果从左到右一层一层的筛选：首先会看到很多div被筛选出来，接下来筛选每一个div，首先在#div2中看到了class=p1的p，此时我们很是高兴，感觉胜利就在前方了，再看class=p1的p标签的子元素，看到第一个很是失望，不符合span.red，不要急，再看下一个又不符合规则，小小的安慰自己一下，最后一个含有class，说不定就是了，结果，结果居然class=green，此时火冒三丈，就差最后一层，怎奈居然出现这种事，无奈之下只能在返回#div2继续匹配它的子元素…从右到左:但如果我们换一个思路，首先匹配class=red 的 span，我们找到2个符合条件的的span然后在和上一次比对，我们需要的是span.red 是 p.p1的下属元素，此时就发现刚才筛选出来的第二个 span 元素不符合要求，再来匹配第一个，层层向上匹配，恭喜你，最终匹配成功，显示在页面上.—回答面试的内容如下:浏览器对选择器的解析规则是从右到左解析的，比如.box .left p,会在页面中找到所有的p标签，然后在p标签中找其父元素有.left类的p元素，再找祖父元素有.box的p标签。从右到左和从左到右，两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的，而从左向右的匹配规则的性能都浪费在了失败的查找上面.-为了提升渲染速度，可以注意以下几点(选择记忆)：1. 缩小查找范围。也就是标签选择器范围太广，可以直接使用类选择器，比如.box .left .text 替代 .box .leftp，当然ID选择器更快，但是这不符合复用原则2. 减少层级关系。 层级嵌套太深不美观也增加查找成本.其它(选择记忆):在CSS渲染效率中 id 和 class 的效率是基本相当的 class 会在第一次载入中被缓存，