前端常见知识点汇总（面试）-HTML和CSS部分

一、内联元素与行元素的区别

1、内联元素即行内元素。
2、内联元素，在文档流中挤在一行；不能设置宽高（即，即使设置了也不管用，例如a标签）、margin和padding的top和bottom
块元素，独占一行；可以设置宽高、margin、padding
3、可以使用display属性进行修改：display:block|inline-block|inline
4、inline-block
水平排列；有宽高、margin和padding
1）可置换元素——天生的行内块

  img input button select textarear label

2）行内块不同于行内元素，可以设置宽高
3）包裹性

  让元素inline-block化
  inline-block在添加宽高之前，紧紧包裹内容，添加宽高之后就不是了
  block默认宽度100%，设置absolute，变成包裹内容
 

二、position属性

1、static
没有定位，元素出现在正常的文档流中，默认属性。
设置left、right、top、bottom、z-index属性的设置不起作用
2、relative
相对于元素自己的正常位置进行定位，元素在正常的文档流中
LRTBZ属性设置起作用
3、fixed
固定定位，相对于浏览器窗口定位，即浏览器滚动也不会影响元素的位置，且与文档流无关，因此不占空间，可能会与其他元素重叠。LRTBZ属性设置起作用。
4、absolute
绝对定位，相对于static定位以外的第一个父元素进行定位，元素脱离文档流。
注意：body也是父元素

三、display:none;和visibility:hidden;

联系：都能让元素不可见

区别：

display:none;	visibility:hidden;
元素从渲染树中消失，渲染的时候不占空间	元素不从渲染书中消失，渲染的时候仍占空间，只是内容不可见
非继承属性，子孙节点的消失是由于元素从渲染树中消失造成的，修改子孙节点的属性依然无法显示	继承属性，子孙节点消失由于继承了hidden，设置visibility:visible;可以让子孙节点显示
修改常规流中元素的display会造成文档的重排（回流）	修改visibility属性只会造成本元素重绘
读屏器不会读取display:none;的元素内容；	会读取

注意：读屏器即为浏览器渲染

四、回流（重排）和重绘

只要某个改动会影响其他元素，就会造成回流。
回流：修改元素的布局样式，例如width、height、top、margin等会影响整个页面的布局，浏览器会重新执行layout过程，性能开销很大。（尺寸、位置、隐藏状态等布局样式）
重绘：修改元素的非布局样式，例如，color、background等，不影响整个页面的布局，浏览器只会对该元素重新绘制，开销相对较小。
注意：回流必将引起重绘，但是重绘不一定会引起回流。
性能优化

• 使用visibility:hidden;，而不用display:none;隐藏元素
• 如果需要频繁地修改DOM样式，尽量使用预先定义好的CSS的class修改DOM的className.
• 为需要添加动画的HTML元素，添加position:absolute|fixed;属性值，这样修改该元素的CSS时不会引起回流（动画最好用CSS3动画，只会引起两次重绘）——分析：这是因为绝对定位和固定定位可以让元素脱离文档流。
• 不要使用table布局。因为可能很小的改动，就会引起整个table的重新布局。

——分析：冗余度 table>div>flex
table元素的作用是显示表格化的数据，不是作为布局工具设置的。
一般使用div+css实现布局。
为什么不用table布局呢？
1、table比其他HTML标记占更多的字节，造成下载延迟，占用服务器更多流量资源。
2、阻挡浏览器渲染引擎的渲染顺序，会延迟页面的生成速度，让用户等待更久的时间。
如何最小化重绘和回流？
答：
1）对元素进行复杂操作时，可以先用display:none;隐藏，操作完成后再显示。
2）尽量避免使用table布局
3）避免使用CSS表达式，因为每次调用都会重新计算值
4）需创建多个DOM节点时，使用DocumentFragment创建完后一次性地加入document。例如，

var frag = document.createDocumentFragment()//文档碎片节点
//将element通过appendChild添加到frag中，再讲frag一次性加入document

五、浏览器渲染过程

1、解析HTML标签，构建DOM树
2、解析CSS文件，构建CSS Rule Tree
3、根据DOM树和CSS规则书，构建render tree。DOM Tree中一些节点不会被放入到Render Tree中。例如，header、display为none的节点。
4、构建出render tree后，浏览器已经知道页面中有哪些节点以及对应的样式、从属关系等。在layout过程中计算每个节点在页面中的位置，最后绘制到页面上。

图片来源

六、盒模型

可以通过box-sizing:border-box|content-box;来设置盒模型。
HTML文档中各元素被渲染描述成矩形盒子。
盒模型表示每个元素盒子所占空间大小的模型。
分类：

• W3C标准盒模型（IE6及以上版本）content-box:width=content
• IE怪异盒模型（IE6以下版本）border-box：width=content+padding——不能用padding撑开盒子

七、CSS解析规则

1、先遍历内嵌样式，接着头部样式，最后外链样式（外链样式放在头部样式之后，对于同一元素而言，外链样式则会覆盖头部样式）
2、CSS优先级（!important>内嵌样式>头部样式）
3、同一优先级文件内，ID>class、属性选择器、伪类>div、伪元素
4、同一优先级内，后面样式覆盖前面样式

（一）选择器类型

4个基础选择器，5个复合选择器
选择器是一种模式，用于选择需要添加样式的元素。
（1）4种基础选择器
类选择器；ID选择器；通配符选择器（*）；元素选择器
（2）5种复合选择器
交集选择器：标签+类/id选择器{属性:值;}
并集选择器：例如：h1,h2,p（也叫选择器分组）
后代选择器：选择器+空格+选择器（两个选择器必须满足嵌套关系，父元素在前，子元素在后，无限制隔代）
子代选择器：选择器>选择器（选中直接下一代元素，也叫子选择器，子元素选择器）
相邻兄弟选择器：例如：h1+p（两者具有相同父元素）
补充：属性选择器：ahref{color:red;}
CSS伪类：向某些选择器添加特殊效果。例如a:link|visited|hover|active;:focus（拥有键盘输入焦点，无法再IE中工作）;:first-child（元素的第一个子元素）;:lang（带有指定lang属性）
CSS伪元素：向某些选择器设置特殊效果。例如，p:first-line|first-letter;h1:before|after。在CSS3中变成了::，增加了::selection

（二）CSS权重

用于计算优先级，优先级计算无视DOM树中的距离
内联样式	1000
ID选择器	100
类=伪类=属性选择器	10
元素选择器=伪元素选择器	1

八、CSS布局

具体见浅谈CSS布局

九、CSS Hack

简单来讲，CSS Hack就是针对不同的浏览器或同一浏览器的不同版本编写特定的CSS样式，以获得统一的页面效果。
CSS Hack包括：

• 属性Hack
  IE6能识别下划线“_”和星号“*”
  IE7能识别星号“*”，但不能识别下划线“_”
• 选择器Hack
  IE6能识别*html .class{}
  IE7能识别*+html .class