css display属性

/* 示例代码：使用不同的 display 属性 */

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

/* 解释：block 级元素会独占一行，宽度默认为容器的 100%。常见的 block 级元素有 <div>、<p> 等。*/

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

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

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

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

/* 4. none 隐藏元素 */
.none {
    display: none;
}

/* 解释：display: none; 会使元素完全从文档流中移除，不占用任何空间。*/

/* 5. flex 布局 */
.flex-container {
    display: flex;
    justify-content: space-around;
    background-color: lightgray;
}

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

/* 解释：flex 是一种灵活的布局方式，允许子元素在容器内进行弹性排列。*/