cssdisplay

/* 示例代码：CSS display 属性 */

/* 1. block 级元素 */
.block {
  display: block;
  width: 100%;
  background-color: lightblue;
}

/* 解释：block 级元素在页面中会独占一行，宽度默认为 100%。常见的 block 级元素有 <div>, <p>, <h1> 等。 */

/* 2. inline 元素 */
.inline {
  display: inline;
  background-color: lightcoral;
}

/* 解释：inline 元素不会独占一行，只会占据内容所需的宽度。常见的 inline 元素有 <span>, <a>, <img> 等。 */

/* 3. inline-block 元素 */
.inline-block {
  display: inline-block;
  width: 150px;
  height: 100px;
  background-color: lightgreen;
}

/* 解释：inline-block 元素不会独占一行，但可以设置宽度和高度，类似于 inline 和 block 的结合。 */

/* 4. flex 布局 */
.flex-container {
  display: flex;
  justify-content: space-between;
  background-color: lightyellow;
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: lightpink;
}

/* 解释：flex 布局用于创建灵活的布局结构，可以轻松地对齐和分布子元素。 */

/* 5. grid 布局 */
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: lightgray;
}

.grid-item {
  background-color: lavender;
  padding: 20px;
  text-align: center;
}

/* 解释：grid 布局用于创建二维网格布局，可以更精确地控制行和列的布局。 */