• CSS 常用样式 显示模式


    css 显示模式 display

    CSS显示模式(display)属性用于设置 HTML 元素的显示方式。常见的显示模式有 block、inline、inline-block、flex、grid 等。

    以下是每种显示模式的详细解析和代码示例:

    1. block(块级元素)

    block 元素通常会自动换行,并占据其父元素的整个宽度。

    代码示例:

    1. div {
    2. display: block;
    3. width: 100%;
    4. height: 100px;
    5. background-color: red;
    6. }

    1. inline(行内元素)

    inline 元素通常不会自动换行,而是显示在同一行上,其宽度由其内容决定。

    代码示例:

    1. span {
    2. display: inline;
    3. padding: 5px;
    4. background-color: blue;
    5. color: white;
    6. }

    1. inline-block(行内块元素)

    inline-block 元素与 inline 元素类似,但可以为元素设置宽度、高度和内边距

    代码示例:

    1. button {
    2. display: inline-block;
    3. width: 100px;
    4. height: 50px;
    5. padding: 5px;
    6. background-color: green;
    7. color: white;
    8. }

    1. flex(弹性盒子元素)

    flex 元素是用于创建弹性盒子布局的容器,用于解决传统布局难以实现的问题。

    代码示例:

    1. .container {
    2. display: flex;
    3. justify-content: center;
    4. align-items: center;
    5. }
    6. .box {
    7. width: 100px;
    8. height: 100px;
    9. background-color: blue;
    10. margin: 10px;
    11. }

    1. grid(网格布局元素)

    grid 元素是用于创建网格布局的容器,可以实现复杂的布局效果。

    代码示例:

    1. .container {
    2. display: grid;
    3. grid-template-columns: 1fr 2fr 1fr;
    4. grid-template-rows: auto;
    5. }
    6. .box {
    7. background-color: blue;
    8. padding: 20px;
    9. color: white;
    10. text-align: center;
    11. }

    以上是常见的 CSS 显示模式解析和代码示例。不同的显示模式适用于不同的场景,可以根据需求选择合适的显示模式。

  • 相关阅读:
    Java web第一次作业
    【深度学习实践(二)】上手手写数字识别
    Elixir-Pattern matching
    android应用间相互调用
    基于深度学习的图书管理推荐系统(python版)
    C++ - STL 使用红黑树封装map set
    【HMS Core】游戏初始化
    第11章Linux实操篇-Linux磁盘分区、挂载
    Vue中使用el-upload+XLSX实现解析excel文件为json数据
    SpringDataJpa源码理解
  • 原文地址:https://blog.csdn.net/zxcv321zxcv/article/details/133778612