块级元素

块级元素，一般都是从新行开始，它可以容纳行内元素和其他块元素，常见块级元素比如<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控制以后，块元素可以变为内联元素，内联元素也可以变为块元素。

值	类别	描述
display: block	块元素	可以设置宽高以及内外边距，且都换行。
display: inline	内联元素	高度，行高以及底边距不可改变，且都在同一行
display: inline-block	块元素+内联元素	能设置宽高、内外边距，也能在同一行，可以通过vertical-align:top 属性顶部对齐

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

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
            .inline-block{
                border: dashed;
            }
        .inline-block div{
                display: inline-block;
                background: gray;
                height: 50px;
                vertical-align: top; /* 与同一行中的最高元素对齐*/
        }
        .inline-block p{
            display: inline-block;
            background-color:green ;
            width:100px;
            padding:10px;
            vertical-align: middle;  /* 相对外框 div 居中对齐*/
        }
    </style>
</head>
<body>
     <div class="inline-block">
        <div>
            相对外框 div 顶部对齐
        </div>
        <p>相对外框 div 居中对齐</p>
     </div>
</body>
</html>

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的底端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。