本文已参与「新人创作礼」活动，一起开启掘金创作之路。

block、inline、inline-block 的区别。

block 元素会独占一行，多个 block 元素会各自新起一行。默认情况下，block 元素宽度自动填满其父元素宽度。 block 元素可以设置 width,height 属性。块级元素即使设置了宽度,仍然是独占一行。block 元素可以设置 margin 和 padding 属性。

inline 元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。 inline 元素设置 width,height 属性无效。 inline 元素的 margin 和 padding 属性，水平方向的 padding-left, padding-right, margin-left, margin-right 都产生边距效果；但竖直方向的 padding-top, padding-bottom, margin-top, margin-bottom 不会产生边距效果。

inline-block：简单来说就是将对象呈现为 inline 对象，但是对象的内容作为block 对象呈现。之后的内联对象会被排列在同一行内。比如可以给一个link（a 元素）inline-block 属性值，使其既具有 block 的宽度高度特性又具有inline 的同行特性。

inline-block、inline 和 block 的区别；

Block 是块级元素，其前后都会有换行符，能设置宽度，高度，margin/padding 水平垂直方向都有效。

Inline：设置 width 和 height 无效，margin、padding 在竖直方向上无效， 在水平方向有效，前后无换行符 。

Inline-block：能设置宽度高度，margin/padding 水平垂直方向 都有效，前后无换行符

为什么 img 是 inline 还可以设置宽高

CSS中有一个概念：可替换元素

MDN上是这么解释的：

在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。  

简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。例如 元素，可能具有自己的样式表，但它们不会继承父文档的样式。典型的可替换元素有：

<iframe>
<video>
<embed>
<img>

有些元素仅在特定情况下被作为可替换元素处理，例如：

<input>

"image" 类型的 元素就像一样可替换

<option>
<audio>
<canvas>
<object>

CSS的 content 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。使用content 属性插入的内容都是匿名的可替换元素。

这些元素有一个共性，就是他们的内容都不是通过在标签内添加文本，而是通过某个属性（src、data（ ）、label（ ）或js控制（ ））来显示内容的。 可替换元素拥有内置宽高，他们可以设置width和height。他们的性质同设置了display:inline-block的元素一致。