关于CSS属性中visibility隐藏和display消失的区别简析
展开全部
visibility属性用来确定元素是显示还是隐藏，这用visibility="visible|hidden"来表示，visible表示显示，hidden表示隐藏。当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。
而display实际上是设置元素的浮动特征,设置none 后相当于隐藏而且不占位。
简单来说两个都隐藏一个会占据原来的元素位置留下空白
，一个不会
而display实际上是设置元素的浮动特征,设置none 后相当于隐藏而且不占位。
简单来说两个都隐藏一个会占据原来的元素位置留下空白
，一个不会
已赞过
已踩过<
你对这个回答的评价是？
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css中的display和visibility</title>
</head>
<style type="text/css">
p{
display:inline;
}
div{
display:none;
}
span{
display:block;
}
p.visable{
visibility:visable;
}
p.hidden{
visibility:hidden;
}
tr.aa{
visibility:collapse;
}
</style>
<body>
<p>p标记原来是块元素，现在将段落设置成内联元素</p>
<p>内联元素display:inline的二个段落时不会换行（需要理解什么是块元素什么是内联元素以及他们的区别）</p>
<div>内联元素对div不起作用，这行是不会显示的</div>
<br />
<hr />
<span>span元素原本是内联元素，现在将span元素设置成块元素</span>
<span>二个span之间产生换行</span><br />
<p> 用visablity:visble or visablity:hidden 来使元素可见和不可见</p><br />
<p clss="visable">这段将要显示，下面的一段将要隐藏,但是还会占用一行（而display：none不会占用一个隐藏行，这就是二者最大的区别）</p><br />
<p class="hidden">这段被隐藏</p><br />
<p>上段被隐藏</p>
<hr />
<p>如何使表格元素叠加？</p>
<table border="1">
<tr>
<td>Admous</td>
<td>john</td>
</tr>
<tr class="aa">
<td>Bush</td>
<td>George</td>
</tr>
</table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css中的display和visibility</title>
</head>
<style type="text/css">
p{
display:inline;
}
div{
display:none;
}
span{
display:block;
}
p.visable{
visibility:visable;
}
p.hidden{
visibility:hidden;
}
tr.aa{
visibility:collapse;
}
</style>
<body>
<p>p标记原来是块元素，现在将段落设置成内联元素</p>
<p>内联元素display:inline的二个段落时不会换行（需要理解什么是块元素什么是内联元素以及他们的区别）</p>
<div>内联元素对div不起作用，这行是不会显示的</div>
<br />
<hr />
<span>span元素原本是内联元素，现在将span元素设置成块元素</span>
<span>二个span之间产生换行</span><br />
<p> 用visablity:visble or visablity:hidden 来使元素可见和不可见</p><br />
<p clss="visable">这段将要显示，下面的一段将要隐藏,但是还会占用一行（而display：none不会占用一个隐藏行，这就是二者最大的区别）</p><br />
<p class="hidden">这段被隐藏</p><br />
<p>上段被隐藏</p>
<hr />
<p>如何使表格元素叠加？</p>
<table border="1">
<tr>
<td>Admous</td>
<td>john</td>
</tr>
<tr class="aa">
<td>Bush</td>
<td>George</td>
</tr>
</table>
</body>
</html>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
Vue实践-CSS样式position/display/float属性对比使用
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
