替换元素和非替换元素

元素是文档结构的基础，在css里面，每个元素生成了包含内容的框（box）,大家都叫“盒子”。但是不同的元素显示方式是不同的，有占据一整行的，有水平一个挨着一个的。比如：div 与span的方式不一样。

替换元素：

替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。

比如：

<input type="text" /> 

这是一个文本输入框，换一个其他type，浏览器显示就不一样

HTML中的"img、input、textarea、select、object"都是替换元素，因为这些元素都没有实际的内容。

非替换元素：

HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。

比如

<p>wanmei.com</p>

浏览器将把这段内容直接显示出来。

除了这两字，还有两种非常属性的元素，显示元素，他分为两种情况，一种是‘块及元素’ ‘block’，还有一种是“行内元素”inline，大家也叫“内联元素”。

块及元素

他最明显的特征就是独自占领一行，自动充满父级元素的内容区域，绝不会让别人“侵略”（当然可以通过其他方式去改变他）。

常见的有：div，p..等等。

通过CSS设定了浮动（float属性，可向左浮动或向右浮动）以及设定显示（display）属性为“block”或“list-item”的元素都是块级元素。这个地方浮动是一个比较特殊的情况，可以详查浮动这个知识

行内元素：

上面说块及元素独自占领一行，行内元素就没这么霸道了，他可以左右都允许有元素，最常见的就是

通过

display:'inline'

设置以后都会变成行内元素。

但是要注意，行内的非替换元素是绝对不可以设置宽高的！即便你设置了，浏览器也会自动忽略。
而input，img等替换元素，因为它们有其内在尺寸，所以是可以设置其height和width的！