display

display 的值来修改内部盒子的排列方式，它的常用的值包括block、inline以及inline-block，block表示块级元素、inline表示行内元素，inline-block为行级-块级元素。

块级元素（块级盒子）

块级元素的宽度会占满整个浏览器，并且后边的盒子会被挤占到下一行去显示。如果用盒子来说就是块级盒子

特点：

• 1.块级元素独自占一行，两个元素不会共用一行，就是说其后的元素也只能另起一行。
• 2.元素的宽度若不设置默认为父元素的宽度。

常见的块级元素：<div>、<p>、<h1>…
display:block将行级元素设为块级元素

行级元素（行内盒子）

行级元素的宽度是内容的宽度，后边的盒子会跟在它的后边继续排列。如果用盒子来说就是行内盒子

特点：

• 1.与其他行内元素处于同一行，不用必须另起一行。
• 2…元素的宽度就是它包含的文字、图片的宽度。

常见的块级元素：<span>、<a>等。

isplay:inline将块级元素设为行级元素

注意：它们两者的区别是： 行内元素无法手动设置宽高，设置它的垂直方向上的 padding 和 margin 虽然能够设置生效，但并不会挤占其他盒子的空间，会导致重叠。不过水平方向上的则会挤占其他盒子的空间。

行级-块级元素

如果想实现盒子的嵌套，让一个盒子的外部类型保持 inline 行内状态，不把后边的盒子挤占到下一行，但是又想同时设置这个盒子的宽高、padding 和 margin，那么可以使用 inline-block 这个显示类型
display:inline-block将元素设置为行级-块级元素。

参考：https://zxuqian.cn/docs/css/box-model/box-model/