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

css中对元素有两种分类：

一、行内元素与块级元素

这种分类一目了然

说到块级元素，我们就能想到display: block，

说到行内元素，我们就能想到display: inline。

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

块级元素特点：

1. 默认独自占据一行，左右两边都没有元素；

2. 可以设置宽高，在不设置宽度的情况下，默认为父元素的宽度一致。

常见的块级元素：

;

;

等等。

行内元素特点：

1. 左右两边都可以有元素，和其他元素在一行上；

2. 不可以设置宽高，其宽度就是内容的宽度。对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，但是padding上下对其他元素无影响。

常见的行内元素：; ;

等等。

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

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

替换元素：

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

这是什么意思呢？我们举一个例子就能理解：

img标签，只写这一个标签，不添加属性，页面上是显示不出来你要的图片的，但是我们往img标签里面添加src，这时候页面上就能显示出你要的图片，src不同，页面上显示出来的内容也就不同。

同样为替换元素的还有标签，标签等等

非替换元素：

理解了什么是替换元素，理解非替换元素就很简单了，他们将内容直接告诉浏览器，将其显示出来

比如我们常用的

标签，浏览器直接会将

标签里面的东西显示出来。

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