HTML：HTML中的元素

HTML中的元素

无论你想了解哪个 HTML 元素，第一个要问的问题就是：它是块级元素还是行内元素，因为它们在盒模型上的表现有很大的不同，不过在了解它们的不同之前我们还得先知道另外一个概念————替换元素和非替换元素，其中替换元素就是指浏览器是根据元素的属性来判断具体要显示的内容的元素，比如 img 标签，浏览器是根据其 src 的属性值来读取这个元素所包含的内容的，常见的替换元素还有 input 、textarea、 select、 object、 iframe 和 vide等等，这些元素都有一个共同的特点，就是浏览器并不直接显示其内容，而是通过其某个属性的值来显示具体的内容，比如浏览器会根据 input 中的 type 的属性值来判断到底应该显示单选按钮还是多选按钮亦或是文本输入框。而对于非替换元素，比如 p、label 元素等等，浏览器这是直接显示元素所包含的内容。

接下来了解一下什么是块级元素？

块级元素特点：

1、每个块级元素都从新的一行开始、并且其后的元素也另起一行

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

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

设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

a{display:block;}

内联元素特点：

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

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

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

当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。

 div{
     display:inline;
 }

......

<div>我要变成内联元素</div>

内联块状元素特点：

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

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

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。