深入理解页面布局常用属性 css -- display

display 属性在网页布局中非常常见，是用于控制布局的最重要的 CSS 属性,每个 HTML 元素都有一个默认的 display 值,取决于元素的类型，大部分默认值为 block 或 inline。

浏览器支持

常用属性值

display: none;

• 常用于显示和隐藏属性，而不需要删除和重建。
• 相对于 visibility:hidden；的隐藏属性，隐藏后移除元素不影响页面布局，不占位置。
• 通常搭配javascript 或vue项目中三目运算进行使用
  

display: block;

• 可将行内元素设置为块级元素，占据一定矩形空间。
• 块级元素的高度、宽度、行高以及顶和底边距都可设置。
• 块级元素宽度在不设置的情况下，和父级宽度一致。
  

display: inline;

• 可将块级元素设置为内联元素，和其他元素都在一行上。
• 内联元素的高度、宽度及顶部和底部边距不可设置。
• 内联元素的宽度是包含内容的宽度，不可改变。
• 和display: block;相对应。
  

display: inline-block;

• 可将元素设置为行内块元素，保持行内排列的特性。
• 结合 inline 和 block 两种属性的特定，可以设置宽高。
• 避免之前使用 float 造成高度坍塌，需要清除浮动等问题。
  

display: list-item;

• 可将元素内容生成一个块型盒，随后再生成一个列表型的行内盒。
• 跟 display:block 属性相近。
• 可在内容前加上小圆点，同ul–li。
  

display: table;

• 可将元素作为块级表格来显示，类似 。
• 默认具备表格特征、支持宽高、独占一行。
• 部分解决使用表格特性但又不需要表格语义的情况。
• 需搭配表格布局相关属性进行使用。

影响

• display: table时 padding 会失效。
• display: table-cell时 margin 会失效。
• display: table-row时 margin、padding 同时失效。

相关属性