CSS display

Epicurus
254 阅读3分钟

CSS display

CSS的display属性用于控制元素的显示方式，决定了元素在页面中的布局行为。以下是常见的display属性值及其作用：

1. 常见属性值

1.1 block

  • 作用：元素显示为块级元素，独占一行，可以设置宽度、高度、内外边距。
  • 常见元素：<div>、<p>、<h1>-<h6>、<ul>等。
  • 示例： 
    div {
    display: block;
    width: 100%;
    height: 50px;
    background-color: red;
}

1.2 inline

  • 作用：元素显示为行内元素，不独占一行，宽度和高度由内容决定，无法设置宽度、高度、上下边距。
  • 常见元素：<span>、<a>、<strong>、<em>等。
  • 示例： 
    span {
    display: inline;
    color: blue;
}

1.3 inline-block

  • 作用：元素显示为行内块级元素，不独占一行，但可以设置宽度、高度、内外边距。
  • 常见用途：用于创建水平排列的布局。
  • 示例： 
    div {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: green;
}

1.4 none

  • 作用：元素不显示，且不占据页面空间。
  • 常见用途：用于动态隐藏元素。
  • 示例： 
    div {
    display: none;
}

1.5 flex

  • 作用：元素显示为弹性盒子容器，子元素可以通过弹性布局灵活排列。
  • 常见用途：用于创建响应式布局。
  • 示例： 
    .container {
    display: flex;
    justify-content: space-between;
}

1.6 grid

  • 作用：元素显示为网格容器，子元素可以通过网格布局排列。
  • 常见用途：用于创建复杂的二维布局。
  • 示例： 
    .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

1.7 table、table-row、table-cell

  • 作用：元素显示为表格、表格行或表格单元格。
  • 常见用途：用于模拟表格布局。
  • 示例： 
    .table {
    display: table;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}

2. 其他属性值

2.1 inline-flex

  • 作用：元素显示为行内弹性盒子容器。
  • 示例： 
    .container {
    display: inline-flex;
}

2.2 inline-grid

  • 作用：元素显示为行内网格容器。
  • 示例： 
    .container {
    display: inline-grid;
}

2.3 list-item

  • 作用：元素显示为列表项，通常与<li>元素一起使用。
  • 示例： 
    div {
    display: list-item;
    list-style-type: square;
}

2.4 inherit

  • 作用：继承父元素的display属性值。
  • 示例： 
    div {
    display: inherit;
}

2.5 initial

  • 作用：将display属性重置为默认值（通常是inline）。
  • 示例： 
    div {
    display: initial;
}

2.6 unset

  • 作用：如果属性可继承，则继承父元素值，否则重置为initial。
  • 示例： 
    div {
    display: unset;
}

总结

属性值作用常见用途
block块级元素，独占一行布局容器、段落、标题等
inline行内元素，不独占一行文本修饰、链接等
inline-block行内块级元素，可设置宽高水平排列的布局
none隐藏元素，不占据空间动态隐藏元素
flex弹性盒子容器响应式布局
grid网格容器复杂二维布局
table系列表格布局模拟表格结构
inline-flex行内弹性盒子容器行内弹性布局
inline-grid行内网格容器行内网格布局
list-item列表项自定义列表项
inherit继承父元素的display值继承父元素布局行为
initial重置为默认值（通常是inline）恢复默认行为
unset继承或重置为默认值根据上下文恢复行为

display属性是CSS布局的核心，合理使用可以创建灵活、高效的页面布局。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github

avatar
文章
阅读
粉丝