在HTML的角度来讲,标签分为:
文本级标签:p (p是块级元素), span , a , b , i , u , em
容器级标签:div , h标题系列 , li , dt ,dd
p:里面只能放文字和图片和表单元素,p里面不能放h和ul,也不能放p。
从CSS的角度讲,CSS的分类和上面的很像,就p不一样:
行内元素:除了p之外,所有的文本级标签,都是行内元素。p是个文本级标签,但是是个块级元素。
块级元素:所有的容器级标签,都是块级元素,以及p标签。
一般来说,行内元素是不可以设置宽高的,如果想给行内元素设置宽高,则需要将其display设置为block/inline-block/flex/inline-flex(使用position:absolute/fixed或float:left/right,在computed中查看display会发现属性值也为block,所以这两个方法用的原理也是这个)
html中有一类元素比较特殊,虽然他们属于行内元素,但是他们是可以设置宽高的,如img|input|select|textarea|button|label|object 等,他们被称为可置换元素(Replaced element),这些元素往往没有实际的内容,即是一个空元素。他们区别一般inline元素(相对而言,称non-replaced element)是:这些元素拥有内在尺寸(intrinsic dimensions),他们可以设置width/height属性。他们的性质同设置了display:inline-block的元素一致。
或许有朋友对非置换元素(non-replaced element)有点疑惑,稍微帮助大家理解一下。非置换元素,W3C 中没有给出明确的定义,但我们从字面可以理解到,非置换元素对应着置换元素(replaced element),也就是说我们搞懂了置换元素的含义,就懂了非置换元素。置换元素,W3C中给出了定义:
“An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet”
从定义中我们可以理解到,置换元素(replaced element)主要是指 img, input, textarea, select, object 等这类默认就有 CSS 格式化外表范围的元素。进而可知,非置换元素(non-replaced element)就是除了 img, input, textarea, select, object 等置换元素以外的元素。