前端开发display常用属性介绍

在介绍display属性前我们要先了解CSS的元素显示模式

css元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	在页面上一行只能放一个块级元素比如<div>标签	其宽高可自定义设置	容器的100%	可以包含任何标签
行内元素	在页面上一行可以放多个行内元素比如<span>标签	其宽高由内容本身决定不能自定义设置	本身内容的宽度	只能容纳文本或者其它行内元素
行内块元素	在页面上一行可以放多个行内块元素比如<input>标签	其宽高可自定义设置	本身内容的宽度

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>