HTML元素类型详解

元素类型

HTML的元素可以分为两种：

• 块级元素（block level element）
• 内联元素（inline element 有的人也叫它行内元素）

两者的区别主要在于以下三点：

     1、块级元素会默认独占一行，而内联元素则会显示到一行上。

     2、块级属性可以设置width、height属性，而内联元素设置无效。

     3、块级元素的宽度默认是100%，而内联元素的宽度则是根据自身的内容或者感觉子元素来决定的。

常见我们常见的块级元素有：<div> <ul>等，常见的内联元素有<span> <a> <img>等。

举例来说：

.demo{
     height:100px;
     width:100px;
}

给<div>这种块级元素设置宽高是有效的，那么如果想给<span>这样的内联元素设置宽高，如何使其生效呢？

     那我们就通过display:block;属性来实现，当display属性为block时，元素以块级形式呈现，当display属性为inline时，元素以内联元素形式呈现。

当然如果我们既想让元素处在一行中，又想改变其宽高，该怎么做呢？

     这个时候我们需要使用display:inline-block;属性即可实现

当然也有一些特殊情况的存在！

比如说<img>标签 ，它被划分为内联元素，但是当给其设置宽高的时候，是会起作用的，这是为什么呢？

          这又衍生出一些概念，替换元素和不可替换元素，替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如这个<img>标签，浏览器会根据其src属性来读取显示其中内容。同样的<input>标签也是如此。替换元素一般有内在的尺寸，即使width和height，是可以自行设定的，如果没有明确指出，就按照内在尺寸显示，也就是被保存显示图片的宽高。对于表单元素，浏览器也有默认的样式，包括宽高。

          以上这些同时具备内联元素、块状元素特点的元素也可称为内联块状元素。