行内元素与块级元素之间的区别及转化

注意看红色箭头，共有6个步骤，按顺序操作下去

1、首先，我们先来了解一下什么是行内元素 什么是块级元素。

2、我们先讲行内元素。行内元素就是水平方向上一行一行的堆叠起来的。意思就是说他们在同一行不在同一列，如下图：

3、接下来就讲块级元素。块级元素就是在垂直方向上堆叠起来的。意思就是说他们在同一列不在同一行如下图：

4、我们一起来看看他们的区别效果图：

这是第2个区别：块级元素内可以放置行内元素及其他块级元素，相反行内元素不能放置块级元素但可以放置其他行内元素和文字。例如这张图，我在第一个块级元素中放了一个行内元素，行内元素则显示在块级元素的后面。然而我在第一个行内元素中放了一个块级元素，块级元素则把他所在的父级元素推了上去成了行内元素，所以块级元素中不能放置行内元素。

5、这是第3个区别：行内元素与块级元素 属性不同（盒模型）

   行内元素设置width无效，height无效（可以设置line-height）

   margin-top、margin-bottom无效。

   padding-top、padding-bottom无效。

我给行内元素，块级元素设置了相同的属性，显示出来却是不同的，因为行内元素宽高都无效，他的宽高是由里面元素的多少来决定的。块级元素则可以设置宽高。

6、行内元素（inline）与块级元素（block）之间的相互转化：

行内元素=》块级元素：display：block

块级元素=》行内元素：display：inline

行内元素=》行内块级元素：display：inline-block 

块级元素=》行内块级元素：display：inline-block

这是我所学到的行内元素与块级元素之间的区别及相互转化，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！