块级元素

块级元素，一般都是从新行开始，它可以容纳行内元素和其他块元素，常见块级元素比如<div> 、<p> 、<form>等。<form> 这个块元素比较特殊，只能容纳其它块元素。

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可设置。

块级元素会独占一行，其宽度自动填满其父元素宽度，就算设置了width宽度属性后仍然是独占一行

常见的块级元素

<div></div> 、<img /> 、<ul></ul> 、<form></form> 、<p></p> 、<h1></h1>

行内元素

行内元素：也叫做内联元素，允许其他内联元素与其位于同一行，一般都是语义级别的基本元素，内联元素通常只能容纳文本或者其他内联元素。

行内元素不会独占一行，相邻的行内元素会排列到同一行里，直到一行排不下，才会换行，其宽度随元素的内容变化而变化，所以宽度(width)、高度(height)都不可设置

行内元素的水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top和padding-bottom都不会产生边距效果

常见的内联元素

<a></a> 、<strong></strong> 、<br /> 、<input /> 、<img />、<em>强调文本</em> 、<textarea></textarea>

替换元素

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

比如，只写一个 <img /> 标签，而不对齐添加属性，页面上是显示不出来任何东西的，只有往 <img /> 标签里面添加 src 属性，这时候页面上才能显示出你要的图片，src 不同，页面上显示出来的内容也就不同。又比如 <input /> 标签， value 属性不同，页面上所加载的内容也不相同。

非替换元素

非替换元素，则不通过标签和属性，决定元素的具体显示内容。而是将标签所包围的具体内容告诉浏览器，并在页面上直接显示出来。

比如我们常用的 <p></p> 标签，浏览器直接会将 <p></p> 标签里面的东西显示出来，而不是通过属性。

行内替换元素

行内元素 设置 width、height 以及垂直方向的 padding 与 margin 是无效的，但 行内替换元素 可以设置 width、height、padding、bottom，效果等于块元素。

常见的行内替换元素

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

块级元素和内联元素转换

但是行内元素和块级元素一样，都拥有盒子模型，当加了css控制以后，块元素可以变为内联元素，内联元素也可以变为块元素。

如何设置 vertical-align 属性的对齐方式

该属性定义 行内元素的基线 相对于 该元素所在行的基线 的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

    
                 
    
        
     
                  相对外框 div 顶部对齐        
     
        
     
相对外框 div 居中对齐
     
    

vertical-align 属性

reference