前端常见知识点汇总(面试)-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过程中计算每个节点在页面中的位置,最后绘制到页面上。

前端常见知识点汇总(面试)-HTML和CSS部分
图片来源

六、盒模型

可以通过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

相关推荐