CSS Display(显示)
2019-04-26 本文已影响0人
maskerII
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Display(显示)</title>
<style>
/*隐藏元素*/
p.a{visibility: hidden;}
p.b{display: none;}
li.a{display: inline;}
span.b{display: block;}
p.c{display: inline;}
table,th,td{
border: 1px solid blueviolet;
}
tr.a{
visibility: collapse;
}
</style>
</head>
<body>
<h2>Demo1 隐藏元素</h2>
<p>这是一个可见的元素</p>
<p class="a">这是一个隐藏元素</p>
<p>注意，实例中的隐藏段落仍然占用空间</p>
<p class="b">这是一个元素</p>
<p>注意，实例中的隐藏段落不占用空间</p>
<h2>Demo2 改变一个元素显示</h2>
<ul>
<li class="a">Coffee</li>
<li class="a">Tea</li>
<li class="a">Drink</li>
</ul>
<p>li元素原本是块元素会自动换行的 但display：inline 把li元素作为内联元素显示 不换行</p>
<h2>Nirvana</h2>
<span class="b">Record: MTV Unplugged in New York</span>
<span class="b">Year: 1993</span>
<h2>Radiohead</h2>
<span class="b">Record: OK Computer</span>
<span class="b">Year: 1997</span>
<p>span元素原本是内联元素不换行，但display：block 把span元素作为块元素显示 换行</p>
<p class="c">display 属性的值为 "inline"的结果</p>
<p class="c">两个元素显示在同一水平线上</p>
<span class="b">display 属性值为 "block" 的结果</span>
<span class="b">这两个元素之间的换行符。</span>
<br>
<table>
<tr>
<th>FirstName</th>
<th>LastName</th>
</tr>
<tr>
<td>Joe</td>
<td>Smith</td>
</tr>
<tr class="a">
<td>Tina</td>
<td>Smith</td>
</tr>
</table>
<p><b>注意:</b> IE8 及其更早版本需要通过指定 !DOCTYPE 才可以支持 visibility:collapse。</p>
</body>
</html>
<!--
CSS Display(显示) 与 Visibility（可见性）
display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。
-->
<!--
隐藏元素 - display:none或visibility:hidden
隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。
但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。
也就是说，该元素虽然被隐藏了，但仍然会影响布局。
实例
h1.hidden {visibility:hidden;}
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。
也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
实例
h1.hidden {display:none;}
-->
<!--
CSS Display - 块和内联元素
块元素是一个元素，占用了全部宽度，在前后都是换行符。
块元素的例子：
<h1>
<p>
<div>
内联元素只需要必要的宽度，不强制换行。
内联元素的例子：
<span>
<a>
-->
<!--
如何改变一个元素显示
可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。
下面的示例把列表项显示为内联元素：
实例
li {display:inline;}
下面的示例把span元素作为块元素：
实例
span {display:block;}
-->
<!--
块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和
外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;
块级元素主要有：
address , blockquote , center , dir , div , dl , fieldset , form ,
h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有：
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em ,
font , i , img , input , kbd , label , q , s , samp , select , small ,
span , strike , strong , sub , sup ,textarea , tt , u , var
可变元素(根据上下文关系确定该元素是块元素还是内联元素)：
applet ,button ,del ,iframe , ins ,map ,object , script
CSS中块级、内联元素的应用：
利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个：
display:block -- 显示为块级元素
display:inline -- 显示为内联元素
display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
我们常将<ul>元素加上display:inline-block样式，原本垂直的列表就可以水平显示了
-->
<!--
对于 CSS 里的 visibility 属性，通常其值被设置成 visible 或 hidden。
visibility: hidden 相当于 display:none，能把元素隐藏起来，但两者的区别在于：
1、display:none 元素不再占用空间。
2、visibility: hidden 使元素在网页上不可见，但仍占用空间。
然而，visibility 还可能取值为 collapse 。
当设置元素 visibility: collapse 后，一般的元素的表现与 visibility: hidden 一样，
也即其会占用空间。但如果该元素是与 table 相关的元素，
例如 table row、table column、table column group、table column group 等，
其表现却跟 display: none 一样，也即其占用的空间会释放。
在不同浏览器下，对 visibility: collapse 的处理方式不同：
1、visibility: collapse 的上述特性仅在 Firefox 下起作用。
2、在 IE 即使设置了 visibility: collapse，还是会显示元素。
3、在 Chrome 下，即使会将元素隐藏，但无论是否是与 table 相关的元素，
visibility: collapse 与 visibility: hidden 没有什么区别，即仍会占用空间。
-->
