显示模式: 元素的显示方式.

作用: 布局网页的时候, 根据元素的显示模式选择合适的元素摆放内容.

块级元素

• 独占一行.
• 宽度默认是父级的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

许可证：署名 4.0 国际 (CC-BY-4.0)

编辑此页

贡献者: Erhai-lake

上一页背景样式

下一页盒子模型