置换元素和非置换元素/:after/::after

置换元素和非置换元素

置换元素

置换元素是指：浏览器根据元素的标签和属性，来决定元素的具体显示内容。

例如：浏览器根据<img>标签的src属性显示图片。根据标签的type属性决定显示输入框还是按钮。

置换元素在其显示中生成了框，这也就是有的行内元素能够设置宽高的原因。

html中的<img><input><textarea><select><object>都是置换元素，这些置换元素往往没有实际内容，即是一个空元素。

非置换元素

浏览器中的大多数元素都是不可置换元素，即其内容直接展示给浏览器。

例如<label>标签，<p>标签里的内容会被浏览器直接显示给用户。

:after/::after和:before/::before的异同

相同点

都可以用来表示伪类对象，用来设置对象前的内容
:before和::before写法是等效的; :after和::after写法是等效的

不同点

:before/:after是CSS2的写法，::before/::after是CSS3的写法
:before/:after 的兼容性要比::before/::after好 ，
不过在H5开发中建议使用::before/::after比较好

转：侵删