css中display

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

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

/* 解释：block元素会独占一行，常见的block元素有div、p等。 */

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

/* 解释：inline元素不会独占一行，多个inline元素可以在同一行显示，常见的inline元素有span、a等。 */

/* 3. display: inline-block; */
.inline-block {
    display: inline-block;
    width: 100px;
    height: 50px;
    margin: 5px;
    background-color: lightgreen;
}

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

/* 4. display: none; */
.none {
    display: none;
}

/* 解释：none会使元素完全不显示，并且不占据任何空间。 */

/* 5. display: flex; */
.flex-container {
    display: flex;
    justify-content: space-between;
    background-color: lightgray;
    padding: 10px;
}

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

/* 解释：flex用于创建弹性盒子布局，可以使子元素在容器中灵活排列。 */

/* 6. display: grid; */
.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px;
    background-color: lightyellow;
    padding: 10px;
}

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

/* 解释：grid用于创建网格布局，可以更精确地控制子元素的排列方式。 */