复习display 的属性值及其作用

最新推荐文章于 2024-09-05 16:15:02 发布

BangD

最新推荐文章于 2024-09-05 16:15:02 发布

阅读量104

点赞数

分类专栏： css HTML 文章标签： css3 前端 css

本文链接：https://blog.csdn.net/BangD/article/details/127059203

版权

css 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML

3 篇文章 0 订阅

订阅专栏

none: 元素不显示，并且会从文档流中移除；常用于控制元素的显示隐藏功能

block: 块类型，默认宽度是父元素宽度，可设置行高，独占一行

inline: 行内元素类型，默认宽度是内容的宽度，不可设置宽高，行内元素在一行显示

inline-block: 行内块元素尅性，默认宽度为内容宽度，可设置宽高，在一行显示

inherit : 规定应从父元素继承display属性的值

## 以下两个不常见，搜索记录：

1. list-item

设置的元素像块类型元素一样显示，并添加样式列表标记

disc: 实心圆

circle: 空心圆

square: 实心方块

  <style>
    .item {
      display: list-item;
      list-style: inside disc;
    }
  </style>
  <div>
    <span class="item">1</span>
    <span class="item">2</span>
    <span class="item">3</span>
    <span class="item">4</span>
  </div>

2. table

此元素会作为块级表格来显示，表格前后带有换行符

  <style>
    .table {
      display: table;
      border: 1px solid #333;
      margin: 5px;
    }

    .row {
      display: table-row;
      border: 1px solid #333;
    }

    .cell {
      display: table-cell;
      border: 1px solid #333;
      margin: 5px;
    }
  </style>

  <div class="table">
    <div class="row">
      <div class="cell">张三</div>
      <div class="cell">李四</div>
      <div class="cell">王五</div>
    </div>
    <div class="row">
      <div class="cell">张三</div>
      <div class="cell">李四</div>
      <div class="cell">王五</div>
    </div>
  </div>