目录
二、元素的显示与隐藏(display属性和visibility属性)
一、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>