前言

之前 W3Schools 学习笔记就有提到了 CSS Layout - The display Property 这篇做更多的解释.

 

参考:

CSS Display FLEX vs Block, Inline & Inline-Block Explained

 

Disfault Display of Element

 

Display: block

block 的特色是旁边不会有其它 element.

即便 div 1 右边还有空位, div 2,3,4 div 依然不会在右边, 而是在下面.

 

Display: inline

inline 的特色是 element 会并排, 它还有一个特殊是无法设置 dimension, 比如 width 一定是依据内容 hug content.

 

 

Display: inline-block

inline-block 的特色是它和 inline 都是并排的, 但是它可以像 block 一样设置 dimension. 所以算是 inline 的一种扩展.