【20190219】CSS-知识点整理：float、em、浏览器的渲染过程

一、float与absolute

昨天看到一篇博客总结CSS中的一些关键知识点，里面对float元素进行了比较深入的解析，才发现我之前对float的理解不到位。float实际上最初的目的是为了实现图片的文字环绕，所以float元素会漂浮在块元素之上，但是对于文字等内联元素，它不会遮挡漂浮在内联元素之上，而是会把内联元素挤到旁边的空间里去，从而实现图片的文字环绕效果，所以float元素并不是完全的脱离文档流。而设置为absolute定位的元素就是彻底的脱离文档流，会遮挡覆盖在其他元素之上。可参考https://www.cnblogs.com/enemy/p/3750588.html

二、<i><em>的区别、<b><strong>的区别

i标签与em标签的效果都是文字斜体，但是i标签的含义是单纯的斜体文字，而em标签的含义是表示强调，而强调的效果就是通过斜体文字表现出来，另外在使用一些新兴科技术语时也常用em标签。总的来说em标签具有语义性，能加强文档的阅读性，平时也多推荐用em标签。同理b标签和strong标签的区别在于b标签是纯粹的加粗文字，而strong标签具有强调重读的含义，通过加粗文字来表现强调效果，另外在一些可语音朗读的场景下，对于strong标签中的内容会作重读处理。

三、em的含义

em是一个相对的度量单位，它相对的是该元素的父元素文字大小，例如父元素文字设置为16px，子元素的文字大小设置为1.5em，则表示子元素的文字大小为1.5*16=24px。可参考https://www.w3cplus.com/css/px-to-em

rem相对的是根元素html的文字大小。

四、浏览器渲染的过程