首先display常用属性大家应该已经有所了解,这里主要对display的以下四大属性进行“详剖”
- none
- block
- inline
- inline-block
一、display:none
但是同样我们知道visibility: hidden也具有隐藏元素的功能,下面我们通过一个例子来看一下两者的区别:
<span style="display: none;background-color: orange;width: 80px">我被隐藏</span>
<span style="background-color: orange;width: 80px">我被显示_01</span><br/>
<span style="visibility: hidden;background-color: green;width: 80px">我被隐藏</span>
<span style="background-color: green;width: 80px">我被显示_02</span>
我们可以看到显示结果是这样的:
结论:使用display:none隐藏元素时,我们可以看到浏览器没有为被隐藏的元素保留物理空间;但是需要知道即使不为元素保留物理空间,display:none依然在页面结构加载时被加载,而不是在display属性变为block时才进行加载// 此处楼主理解的原因是页面结构与页面的层叠样式是分开加载的,而display:none属于在CSS层叠样式中对结构进行了隐藏,欢迎理解更深刻准确的同学在评论区进行指正;
而visiablity:hidden则只是看不见元素,却为元素保留了位置;
这里贴一个有意思的小程序通过jQuery来控制隐藏/显示(display:none/block)~
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隐藏/显示三个小方块~</title>
<script src = "https://code.jquery.com/jquery-3.2.1.js"></script>
<style>
.div1,.div2,.div3{
width: 70px;
height: 70px;
margin:10px 10px;
float: left;
display: none;
}
.div1{background-color: orange;}
.div2{background-color: grey;}
.div3{background-color: green;}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<button class="btn1">点我显示/隐藏三个小方块</button>
<script>
$(document).ready(function(){
$(".btn1").click(function(){
$(".div1").fadeToggle();
$(".div2").fadeToggle("slow");
$(".div3").fadeToggle(3000);
});
});
</script>
</body>
</html>
二、display: block
即为我们常说的块级元素,非常常见的块级元素如div流标签、h1-h6标题标签、p段落标签、ol、ul列表标签、table表格、form交互表单等等(不在这里列举了,感兴趣的小伙伴可以自行百度一下);
它们的主要特点:1.块级元素会自动占据一定的矩形空间,可以对元素设置宽度、高度、内外边距等属性;
2.元素前后会带有换行符;
3.块级元素中可以容纳其他块级元素或行内元素;
display: block的用法比较灵活,常见的方式如1.将<a><span>等内联标签转化为block元素以改变他们的样式;
2.导航、链接等想要进行块级化显示的元素;
一个简单的小例子将a链接转为块级元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>aaa</title>
<style>
a{
display: block;
background-color: bisque;
width: 80px;
height: 80px;
text-align: center;
line-height: 80px;
}
</style>
</head>
<body>
<a href="#123">#123</a>
</body>
</html>
效果如图
三、display: inline
即为我们常说的行内元素,常见的行内元素如span、a、input、img、u、abbr等;
它们的主要特点:1.行内元素前后没有换行符,行内元素会始终在同一行排列直至排满一行;
//这一点大家向上看我们display:none中的第一段代码,我为每个span元素均设置的width:80px,但其实这段代码对行内元素并不发挥作用;
四、display:inline-block
这是一个神奇的属性,解决了颇多问题,如float浮动同一行元素不同高导致错位等,这个属性自己用的并不是很多,经过查询发现在很多地方用display: inline-block布局其实有很多优势