显示模式

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

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

块级元素

• 独占**一行
• 宽度默认是父级的100%
• 添加宽高属性的生效

<div class="d1">div1</div>
<div class="d2">div2</div>

.d1{
    width: 100px;
    height: 100px;
    background-color: red;
}

.d2{
    width: 100px;
    height: 100px;
    background-color: green;
}

行内元素

• 一行可以显示多个**
• 设置宽高属性不生效
• 宽高尺寸由内容撑开

<span class="span1">span1</span>
<span class="span2">span2</span>

.span1{
    background-color: red;
}

.span2{
    background-color: green;
}

行内块元素

• 一行可以显示多个
• 设置宽高属性生效
• 宽高尺寸也可以由内容撑开

<img src="image.png" width="200">
<img src="image.png" width="100">

转换显示模式

属性名:display

属性值:

属性值	效果
block	块级
inline-block	行内块
inline	行