[CSS] display: xxx; 元素的表现梳理

首先是display: block; 对比 display: inline-block;

display: block的元素，默认宽度是父元素的100%，可以设置宽高，可以设置margin和padding，可以设置float.
display: inline-block的元素，默认宽度是内容的宽度(即被内容区撑开宽度)，可以设置宽高，可以设置margin和padding，可以设置float.

如果需要一个元素被子元素宽度撑开，可以将它的display设置为inline-block.

补充：
1、当上下相邻的两个display: block;元素, 都没有border也都没有padding时，它们的margin会发生折叠。
折叠后的margin取两个相邻margin中的较大值（即如果上面元素的margin-bottom: 20px; 下面元素的margin-top: 50px, 则最终这两个block元素的上下间距为50px）

2、display: inline-block;的元素， 其上下margin会叠加，不会折叠。
如有两个上下相邻的元素，
上面的元素display: inline-block; margin-bottom: 50px;
下面的元素display: block; margin-top: 20px;
这两个元素的margin不会折叠，最终这两个元素的上下间距为70px;

举个例子：

其他display的表现：
  display: inline的元素，不能设置宽高，不能设置margin和padding，不能设置float.

  display: table的元素，默认宽度是内容的宽度，可以设置宽高，可以设置margin和padding，可以设置float.
  display: table-cell的元素，默认宽度是内容的宽度，可以设置宽高，可以设置margin和padding，可以设置float.

  display: flex的元素，默认宽度是父元素的100%。可以设置宽高，可以设置margin和padding，可以设置float.
  display: grid的元素，默认宽度是父元素的100%，可以设置宽高，可以设置margin和padding，可以设置float.

同步更新到自己的语雀
https://www.yuque.com/dirackeeko/blog/la5mlxtqgtqtbd7o