CSS的 display详解：flex、list-item、grid、none、inline、block、inline-block

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

文章目录

• • • 1. block
    • 2. inline
    • 3. inline-block
    • 4. none
    • 5. list-item
    • 6. flex
    • 7. grid

CSS的display属性是一个核心属性，用于控制元素如何在页面布局中显示，包括其盒模型的行为。以下是display属性的一些常见值及其示例代码：

1. block

• 说明：将元素变为块级元素，独占一行，可以设置宽高、内外边距。
• 示例：

  .block-element {
    display: block;
    width: 100px;
    height: 100px;
    background-color: blue;
  }
  

2. inline

• 说明：使元素成为内联元素，与其他内联元素同行显示，宽度由内容决定，不可直接设置宽高。
• 示例：

  .inline-element {
    display: inline;
    background-color: red;
  }
  

3. inline-block

• 说明：结合了块级和内联的特性，允许设置宽高，同时保持内联显示，相邻元素可同行显示。
• 示例：

  .inline-block-element {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: green;
  }
  

4. none

• 说明：隐藏元素，不占据页面上的任何空间。
• 示例：

  .hidden-element {
    display: none;
  }
  

5. list-item

• 说明：将元素显示为列表项，类似于<li>，前后有换行，且可能带有标记（如项目符号）。
• 示例：

  .list-item-element {
    display: list-item;
    list-style-type: square;
  }
  

6. flex

• 说明：启用弹性盒子模型布局，让元素成为弹性容器，其子元素成为弹性项目。
• 示例：

  .flex-container {
    display: flex;
  }
  .flex-item {
    flex: 1;
    background-color: yellow;
  }
  

7. grid

• 说明：将元素设置为网格容器，允许子元素按照网格布局排列。
• 示例：

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-item {
    background-color: orange;
  }
  

以上代码展示了display属性的基本用法，通过修改这个属性，可以灵活地控制网页元素的布局和显示方式。