ZYPC部分面试题

浏览器的组成

1.shell：外壳（控制界面）
2.core：内核（JS执行引擎，渲染引擎）
360，QQ没有自己的独定内核

主流浏览器

IE：Trident（许多网页只能在IE里运行）
Firfox：Gecko
Chrome：Webkit(之前)/Blink【支持W3C的最新标准】
Safari（苹果）：Webkit
Opera：Presto（已弃用）/Blink（现在）

语义化，为什么要对HTML进行语义化？

1.为了让浏览器能够理解网页

比如阅读模式（只要正文），语音模式（有的元素不需要被读出来，有的元素读的音调不一样）

2.为了让搜索引擎理解网页

搜索引擎：百度，搜狗，谷歌；

搜索引擎工作原理：每隔一段时间搜索引擎就在互联网中抓取页面的源代码放在自己的数据库中，如果没有语义化引擎就不能识别（理解）你写的东西是什么意思。

居中

居中：盒子在其包含块中居中

行盒（行块盒）水平居中

直接设置行盒（行块盒）父元素的text-aline为center

常规流块盒的水平居中

定宽，然后设置margin-left：auto和margin-left：auto

绝对（固定）定位元素的水平居中

定宽，设置左右的偏移量为0，将左右margin设置为auto

单行文本的垂直居中

将区域内的行高为该区域的高度

行块盒（块盒）多行文本的垂直居中

通过上下padding来达到类似居中的效果

绝对定位的垂直居中

定高，设置上下的坐标为0，上下margin设置为auto

文档流

文档流就是盒模型
脱离文档流：
目前常见的会影响元素脱离文档流的css属性有：
1.float浮动。
2.position的absolute和fixed定位。

css中三种定位的区别

1.相对relative
2.绝对absolute
3.固定fixed

相对定位

不会导致元素脱离文档流，只是让元素在原来的位置上进行偏移，盒子的偏移不会对其他盒子产生任何影响

可以通过四个CSS属性对其进行设置：

·left
·right
·top
·bottom

如果出现矛盾以左上为准

绝对定位

1.宽高为auto，适应内容

2.包含块（盒子的活动范围）变化：找祖先元素中第一个定位元素，该元素填充盒（padding）为其包含块。若果找不到，则它的包含块为整个网页（初始化包含块）

关键点：找到包含块

固定定位（牛皮藓小广告的万恶之源）

除了包含块外和绝对定位完全一样，他的包含块是整个窗口

包含块不同：固定为视口（浏览器的可视窗口）

包含块是父元素内容盒