display属性

目录

一、css的display属性相互转化的问题

1.块元素转化为行元素

2.块元素转化为行级块

二、元素的显示与隐藏（display属性和visibility属性）

1.display属性

2.visibility属性

三、display：table

四、display：list-item属性值

---

一、css的display属性相互转化的问题

1.块元素转化为行元素

• display：block------>>>display: inline
• 其中行元素的大小由它的内容的大小自动撑开。

2.块元素转化为行级块

• display：block------>>>display: inline-block
• 在设置行级块的时候，我们通常会遇到下面这种情况，这是网页的正常情况：

.box{
   width: 100px;
   height: 100px;
  }
.block_1{
   background-color: red;
   display: inline-block;
  }
.block_2{
   background-color: antiquewhite;
   display: inline-block;
  }
<div class="box block_1"></div>
    内容

• 两个块级元素，正常来讲两个元素应该是在一排的，由于里面有内容，并且前面的元素是有高的，所以后面的元素会被挤到他的下面。
• 还有就是两个行级块对不齐的问题。

.block_1{
     background-color: red;
     display: inline-block;
   }
.block_2{
     background-color: antiquewhite;
     display: inline-block;
  }

<div class="box block_1"></div>
<div class="box block_2">内容</div>

• 正常情况下内容是到底部的，但是可以发现，盒子也到了底部。
• 这种情况我们就可以考虑BFC（BFC有关概念见https://blog.csdn.net/qq_45806781/article/details/109227787）
• 这是因为两个行级块同属于一个BFC，前面那个元素影响到了后面的这个元素，那么我们就可以给后面这个容器设置一个单独的BFC（即给后面这个行级块设置overflow：hidden属性），这样他们之间就不会互相影响了。

.box{
   width: 100px;
   height: 100px;
 }
.block_1{
   background-color: red;
   display: inline-block;
 }
.block_2{
   background-color: antiquewhite;
   display: inline-block;
   overflow: hidden;
 }
<div class="box block_1"></div>
<div class="box block_2">内容</div>

二、元素的显示与隐藏（display属性和visibility属性）

1.display属性

.box{
   width: 200px;
   height: auto;
   border: 1px solid red;
  }
.ckboxhide:checked~.box{
   display: none;
 }
.ckboxshow:checked~.box{
   display: block;
}
<input class="ckboxhide" type="checkbox"/>选择我隐藏
<input class="ckboxshow" type="checkbox"/>选择我显示
<div class="box">
   隐藏元素 - display:none或visibility:hidden
   隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
   visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
</div>

2.visibility属性

.ckboxhide:checked~.box{
     visibility: hidden;
 }
.ckboxshow:checked~.box{
     visibility: visible;
 }

三、display：table

主要用于表格多列布局

 

.box_td{
   display: table-cell;
   background-color: red;
}
.boxlist{
   width: 200px;
}
.boxinfo{
   border-spacing: 10px 0;
}
<div class="box_table boxinfo">
    <div class="box_td"></div>
    <div class="box_td boxlist"></div>
    <div class="box_td"></div>
</div>

四、display：list-item属性值

制作列表，把元素当做列表显示

.menu>span{
   border: 1px solid red;
   display: list-item;
 }
<div class="menu">
   <span>1</span>
   <span>2</span>
   <span>3</span>
   <span>4</span>
</div>