外观
显示模式
约 295 字小于 1 分钟
2024-10-02
显示模式: 元素的显示方式.
作用: 布局网页的时候, 根据元素的显示模式选择合适的元素摆放内容.
块级元素
- 独占一行.
- 宽度默认是父级的100%.
- 添加宽高属性的生效.
HTML
<div class="d1">div1</div>
<div class="d2">div2</div>CSS
.d1{
width: 100px;
height: 100px;
background-color: red;
}
.d2{
width: 100px;
height: 100px;
background-color: green;
}行内元素
- 一行可以显示多个行内元素.
- 设置宽高属性不生效.
- 宽高尺寸由内容撑开.
HTML
<span class="span1">span1</span>
<span class="span2">span2</span>CSS
.span1{
background-color: red;
}
.span2{
background-color: green;
}行内块元素
- 一行可以显示多个
- 设置宽高属性生效
- 宽高尺寸也可以由内容撑开
HTML
<img src="https://elake-halo.oss-cn-shanghai.aliyuncs.com/748142AF-AFD0-4C1E-B642-06859DB7949F.png" width="200" alt="img">
<img src="https://elake-halo.oss-cn-shanghai.aliyuncs.com/748142AF-AFD0-4C1E-B642-06859DB7949F.png" width="100" alt="img">CSS
.span1{
background-color: red;
}
.span2{
background-color: green;
}转换显示模式
属性名: display.
属性值:
| 属性值 | 效果 |
|---|---|
block | 块级. |
inline-block | 行内块. |
inline | 行. |
版权所有
版权归属:Erhai-lake