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

wuyangnju 发布于2019-08-02 13:58 / 905人阅读

摘要：一内联元素与行元素的区别内联元素即行内元素。绝对定位，相对于定位以外的第一个父元素进行定位，元素脱离文档流。

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

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

云服务器 GPU云服务器 html前端知识 html前端工程师面试 html5前端css3 号码隐私保护常见问题汇总

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53485.html

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

摘要：一内联元素与行元素的区别内联元素即行内元素。绝对定位，相对于定位以外的第一个父元素进行定位，元素脱离文档流。一、内联元素与行元素的区别 1、内联元素即行内元素。2、内联元素，在文档流中挤在一行；不能设置宽高（即，即使设置了也不管用，例如a标签）、margin和padding的top和bottom 块元素，独占一行；可以设置宽高、margin、padding3、可以使用displa...

DevTTL 2019-08-30 15:55 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
前端最强面经汇总

摘要：获取的对象范围方法获取的是最终应用在元素上的所有属性对象即使没有代码，也会把默认的祖宗八代都显示出来而只能获取元素属性中的样式。因此对于一个光秃秃的元素，方法返回对象中属性值如果有就是据我测试不同环境结果可能有差异而就是。花了很长时间整理的前端面试资源，喜欢请大家不要吝啬star~ 别只收藏，点个赞，点个star再走哈~ 持续更新中……，可以关注下github 项目地址 https:...

wangjuntytl 2019-08-26 10:41 评论0 收藏0
Web前端面试题目汇总

摘要：前端面试题目汇总一部分什么是盒子模型盒子模型包含内容内边距外边距和边框四部分。第四步本地服务器再向上一步返回的域名服务器发送请求，然后接受请求的服务器查询自己的缓存，如果没有该记录项，则返回相关的下级的域名服务器的地址。 Web前端面试题目汇总一、HTML/CSS部分 1.什么是盒子模型？盒子模型包含内容(content)、内边距(pandding)、外边距(margin)和边...

golden_hamster 2019-08-29 14:07 评论0 收藏0