前端常见知识点汇总(面试)-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