前端开发display常用属性介绍
目录
前端开发display常用属性介绍
在介绍display属性前我们要先了解CSS的元素显示模式
css元素显示模式总结
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
| 块级元素 | 在页面上一行只能放一个块级元素比如 标签 | 其宽高可自定义设置 | 容器的100% | 可以包含任何标签 |
| 行内元素 | 在页面上一行可以放多个行内元素比如标签 | 其宽高由内容本身决定不能自定义设置 | 本身内容的宽度 | 只能容纳文本或者其它行内元素 |
| 行内块元素 | 在页面上一行可以放多个行内块元素比如标签 | 其宽高可自定义设置 | 本身内容的宽度 |
1、display：block
display：block将元素转换为块级元素，一般用于将行内元素转换为块级元素
<span style="width: 200px; height: 200px; background-color: aquamarine;">没有display属性的行内元素</span>
<span style="width: 200px; height: 200px; display:block; background-color: rgb(87, 87, 241);">display：block属性行内元素转换为块级元素</span>
2、display：inline
display：inline将元素转换为行内元素，一般用于将块级元素转换为行内元素
<div style="width: 200px; height: 200px; background-color: aquamarine;">没有display属性的块级元素</div>
<div style="width: 200px; height: 200px; display:inline; background-color: rgb(87, 87, 241);">display：inline属性块级元素转换为行内元素</div>
<div style="width: 200px; height: 200px; display:inline; background-color: rgb(87, 87, 241);">display：inline属性块级元素转换为行内元素</div>
3、display：inline-block
display：inline-block将元素转换为行内块元素
<div style="width: 200px; height: 200px; background-color: aquamarine;">没有display属性的块级元素</div>
<div style="width: 200px; height: 200px; display:inline-block; background-color: rgb(87, 87, 241);">display：inline-block属性将元素转换为行内块元素</div>
<div style="width: 200px; height: 200px; display:inline-block; background-color: rgb(87, 87, 241);">display：inline-block属性将元素转换为行内块元素</div>
4、display：none
display：inline-block使得元素不显示，常用于对元素设置显示与隐藏
<div style="width: 200px; height: 200px; background-color: aquamarine;">没有display属性的块级元素</div>
<h3>下方有一个div使用了display：none属性元素不显示</h3>
<div style="width: 200px; height: 200px; background-color: rgb(127, 142, 255); display: none;">使用了display：none属性元素不显示</div>
