行内元素、块级元素、替换元素和非替换元素

    css中对元素有两种分类：

 

    一、行内元素与块级元素

        这种分类一目了然
        说到块级元素，我们就能想到display: block，
        说到行内元素，我们就能想到display: inline。

        下面我们来看看这两者的特点

        块级元素特点：
            1. 默认独自占据一行，左右两边都没有元素；
            2. 可以设置宽高，在不设置宽度的情况下，默认为父元素的宽度一致。
                常见的块级元素：<h1></h1>; <p></p>; <div></div>等等。

         行内元素特点：
            1. 左右两边都可以有元素，和其他元素在一行上；
           2. 不可以设置宽高，其宽度就是内容的宽度。对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，但是padding上下对其他元素无影响。
                常见的行内元素：<span></span>; <a></a>; <img></img>等等。

    二、替换元素与非替换元素

        这种分类理解起来会抽象一些

         替换元素：
            替换元素是浏览器根据元素的标签和属性，来决定元素的具体显示内容。
           这是什么意思呢？我们举一个例子就能理解：
           img标签，只写这一个标签，不添加属性，页面上是显示不出来你要的图片的，但是我们往img标签里面添加src，这时候页面上就能显示出你要的图片，src不同，页面上显示出来的内容也就不同。
           同样为替换元素的还有<input>标签，<textarea>标签等等

         非替换元素：
            理解了什么是替换元素，理解非替换元素就很简单了，他们将内容直接告诉浏览器，将其显示出来
            比如我们常用的<p>标签，浏览器直接会将<p>标签里面的东西显示出来。

    而块级元素与行内替换元素是可以设置宽高的，行内非替换元素无法设置宽高，但是行内元素和块级元素一样，都拥有盒子模型，行内元素在垂直方向的padding与margin是无效的。