display , visibility 仅会改变元素显示,不会改变元素种类。可以配合 js 使用使元素可以动态的显示隐藏。
可以使用 display
或 visibility
实现html元素的隐藏功能,但是这两种方式有不一样的地方。display 中的 none 值隐藏,元素后不会在占据页面空间,但是 visibility 的 hidden 值隐藏,元素是看不见了不过会占据页面空间。
display 说明
值 | 说明 |
---|---|
none | 隐藏。 |
block | 使元素占据一行的全部空间 。 |
inline | 使元素仅占据所需的宽度(作用元素中不能有块元素)。 |
注意 : 使用 inline 时元素不能有块元素不然样式不生效。
<!DOCTYPE html>
<html>
<head>
<style>
li,div {
display: inline;
}
</style>
</head>
<body>
<p>把链接列表显示为水平导航栏:</p>
<ul>
<li><a target="_blank">HTML</a></li>
<li><a target="_blank">CSS</a></li>
<li><a target="_blank">JavaScript</a></li>
</ul>
<div>1</div>
<div>1</div>
<div><h1>2</h1></div>
<div><h1>2</h1></div>
p 标签内容被隐藏了
<div><p>123<p></div>
</body>
</html>
visibility 说明 用法和 display 差不多。
值 | 说明 |
---|---|
visible | 默认值显示。 |
hidden | 元素不可见,但还占据页面上的空间 |
collapse | 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。 |
inherit | 规定应该从父元素继承 visibility 属性的值。 |
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
评论(0)