块级元素和行内元素的区别

1、块级元素：

• 没有设置宽度时，它的宽度是其容器的 100%；宽度继承自父级，是父级元素的100%；

• 可以给块级元素设置宽高、内边距、外边距等盒模型属性；

• 块级元素可以包含块级元素和行内元素；

• 常见的块级元素有：<div>、<h1> ~ <h6>、<p>、<ul>、<ol>、<dl>、<table>、<address>

、​​​​​​​<form> 、​​​​​​​<header>、​​​​​​​<section>、​​​​​​​<footer>、​​​​​​​<acticle>、​​​​​​​<nav>、<menu>等。

2、行内元素：

• 行内元素不会独占一行，只会占领自身宽高所需要的空间（宽高由内容决定）；

• 给行内元素设置宽高不会起作用，margin 值只对左右起作用，padding 值也只对左右起作用；

• 行内元素一般不可以包含块级元素，只能包含行内元素和文本；

• 常见的行内元素有 <a>、<b>、<label>、<span>、<img>、<em>、<strong>、<i>、<input>、 <sub>、<sup>、等。

3、可替代元素（行内元素兼块级元素）

img 标签设置宽高是可以影响图片大小的，这是因为 img 是可替代元素。

可替代元素具有内在的尺寸，所以宽高可以设定。

​​​​​​​HTML 中的 input、button、textarea、select 、video、canvas、audio 都是可替代元素，这些元素即使是空的，浏览器也会根据其标签和属性来决定显示的内容。