3000字理解display布局原理

display属性及其语法

display属性用于指定元素的内部和外部显示类型，是CSS中最重要的布局属性之一。

语法

display: value;

取值

取值	说明
inline	设置元素为内联元素，与其他内联元素在同一行上显示
block	设置元素为块级元素，独占一行并占据水平空间
inline-block	设置元素为行内块元素，既具有内联元素的特点（可以与其他元素在同一行上显示），又具有块级元素的特点（可以设置宽高）
flex	设置元素为弹性布局元素，可以根据容器的尺寸自动分配空间，并在容器中垂直或水平排列子元素
grid	设置元素为网格布局元素，可以将元素组织成表格状的结构
run-in	设置元素为嵌入式块元素，与文本流结合但不会打断文本流

元素的内部和外部显示类型

元素的内部显示类型是指元素内容的显示方式，元素的外部显示类型是指元素在流式布局中的表现。

内部显示类型

元素的内部显示类型由display属性的第一个值决定，取值包括：

• inline：元素内容沿水平方向排列，不换行
• block：元素内容独占一行并占据水平空间，换行显示
• inline-block：元素内容沿水平方向排列，但不换行，可以设置宽高

外部显示类型

元素的外部显示类型由display属性的第二个值决定，取值包括：

• flow：元素在流式布局中正常显示，可以与其他元素在同一行上显示
• float：元素脱离文档流，可以浮动在其他元素旁边
• absolute：元素脱离文档流，相对于其最近的已定位父元素进行定位
• fixed：元素脱离文档流，相对于视口进行定位
• sticky：元素在正常流中显示，但在到达某个位置时会固定在屏幕上

元素的布局

元素的布局由display属性决定。display属性的值不同，元素的布局也不同。

块级元素

块级元素独占一行并占据水平空间，换行显示。块级元素的内部显示类型可以是inline、block或inline-block。

内联元素

内联元素与其他内联元素在同一行上显示，不换行。内联元素的内部显示类型只能是inline。

行内块元素

行内块元素既具有内联元素的特点（可以与其他元素在同一行上显示），又具有块级元素的特点（可以设置宽高）。行内块元素的内部显示类型只能是inline-block。

浮动元素

浮动元素脱离文档流，可以浮动在其他元素旁边。浮动元素的内部显示类型可以是inline、block或inline-block。

定位元素

定位元素脱离文档流，相对于其最近的已定位父元素或视口进行定位。定位元素的内部显示类型可以是inline、block或inline-block。

弹性布局元素

弹性布局元素可以根据容器的尺寸自动分配空间，并在容器中垂直或水平排列子元素。弹性布局元素的内部显示类型可以是inline、block或inline-block。

网格布局元素

网格布局元素可以将元素组织成表格状的结构。网格布局元素的内部显示类型只能是inline-block。

结语

display属性是CSS中最重要的布局属性之一，它可以控制元素的内部和外部显示类型，从而影响元素的布局。理解display属性及其语法，掌握元素的布局原理，是前端开发人员必备的基本功。