编程笔记 html5&css&js 044 CSS显示

在HTML和CSS中，可以通过设置元素的display属性来控制元素的显示方式。以下是一些常用的display值及其作用：

• none：元素不显示，也不会占据任何空间。
• block：元素作为块级元素显示，前后会有换行。
• inline：元素作为行内元素显示，不会换行。
• inline-block：元素既可以在行内显示也可以设置宽度和高度。
• flex：元素作为弹性盒子显示。
• grid：元素作为网格容器显示。

示例代码：

HTML:

<div class="block-element">我是块级元素</div>
<div class="inline-element">我是行内元素</div>
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.block-element {
  display: block;
  width: 100%;
  background-color: lightblue;
  padding: 10px;
  margin-bottom: 10px;
}
 
.inline-element {
  display: inline;
  background-color: lightcoral;
  padding: 10px;
}
 
.flex-container {
  display: flex;
  background-color: lightgreen;
  padding: 10px;
}
 
.flex-item {
  display: flex; /* 通常情况下，flex子项默认为inline，不需要显式设置 */
  margin: 5px;
  padding: 10px;
  background-color: lightgray;
  flex: 1; /* 可选，用于弹性伸缩 */
}

在这个例子中，.block-element 设置为 block 来表现块级行为，.inline-element 设置为 inline 来表现行内行为。.flex-container 和 .flex-item 使用 flex 布局来创建一个弹性盒子，其中 .flex-item 可以自动分配容器宽度。