元素分类及特点:

1.块级元素:

块级元素特点:

(1)、每个块级元素都从新的一行开始,并且其后的元素也另起一行;(一个块级元素独占一行

(2)、元素的高度、宽度、行高以及顶和底边距都可设置;

(3)、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

2.内联元素:

内联元素特点:

(1)、和其他元素都在一行上;

(2)、元素的高度、宽度、行高及顶部和底部边距不可设置;

(3)、元素的宽度就是它包含的文字或图片的宽度,不可改变。

注意:为 a 元素设置了宽和高,但都没有起到作用,原因是a在默认的时候是内联元素,内联元素是不可以设置宽和高的

3.内联块状元素:

      内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,代码display:inline-block就是将元素设置为内联块状元素。inline-block元素特点:

1)、和其他元素都在一行上;

(2)、元素的高度、宽度、行高以及顶和底边距都可设置。

注意:img是inline元素,但是他同时也是替换元素,他有着特殊的表现:

1. 可以设置width/height;

          2. 默认的,img元素在屏幕占据的空间与其图片的实际像素一致,除非CSS有设置或者自身的width/height HTML 属性有设置;

中img的兄弟元素也不能遮盖住img。最常见的就是<a>里面包含的<img>;

          4. 所以从行为上看,img元素作为替换元素,有着类似于Inline-block的行为,尽管在SPEC里面,他的确是一个inline元素。

     

从元素本身的特点来讲,可以分为替换和不可替换元素。

   a) 替换元素

    替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。

签的type属性来决定是显示输入框,还是单选按钮等。

<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容,即是一个空元素,浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。

   b) 不可替换元素

    HTML 的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器)。例如:

    段落<p>是一个不可替换元素,文字“段落的内容”全被显示。

      

替换元素一般有内在尺寸,所以具有width和height,可以设定。例如你不指定img的width和height时,就按其内在尺寸显示,也就是图片被保存的时候      的宽度和高度。对于表单元素,浏览器也有默认的样式,包括宽度和高度。