行内元素和块级元素、替换元素和不可替换元素

一般我们习惯性将html元素分为行内元素和块级元素：
行内元素：1.和其他元素都在一行
2.高度、宽度以及内边距都是不可控的
3.宽高就是内容的高度，不可以改变
4.行内元素只能行内元素，不能包含块级元素
5.行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。
常见的行内元素：a 、b、i 、img 、input 、label 、select 、small 、span、textarea

块级元素：1.总是从新的一行开始
2.高度、宽度都是可控的
3.宽度没有设置时，默认为100%
4.块级元素中可以包含块级元素和行内元素
5.块级元素可以设置margin 和 padding
常见的块级元素：
div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table

替换元素：替换元素是浏览器根据元素的 标签 和 属性 ，来决定元素的具体显示内容。
比如，只写一个

<img/>

标签，而不对齐添加属性，页面上是显示不出来任何东西的，只有往

<img/>

标签里面添加 src 属性，这时候页面上才能显示出你要的图片，src 不同，页面上显示出来的内容也就不同。又比如

<input/>

标签， value 属性不同，页面上所加载的内容也不相同。
不可替换元素：非替换元素，则不通过标签和属性，决定元素的具体显示内容。而是将标签所包围的具体内容告诉浏览器，并在页面上直接显示出来。
比如我们常用的

<p></p>

标签，浏览器直接会将

<p></p>

标签里面的东西显示出来，而不是通过属性。
内联替换元素：行内元素 设置 width、height 以及垂直方向的 padding 与 margin 是无效的，但 行内替换元素 可以设置 width、height、padding、bottom，效果等于块元素。
常见的行内替换元素

<img>、<input>、<textarea></textarea>