CSS Display(顯示)


<!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元素作為內(nèi)聯(lián)元素顯示 不換行</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元素原本是內(nèi)聯(lián)元素不換行，但display：block 把span元素作為塊元素顯示 換行</p>

<p class="c">display 屬性的值為 "inline"的結(jié)果</p>
<p class="c">兩個元素顯示在同一水平線上</p>

<span class="b">display 屬性值為 "block" 的結(jié)果</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"。
但是請注意，這兩種方法會產(chǎn)生不同的結(jié)果。

visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。
也就是說，該元素雖然被隱藏了，但仍然會影響布局。

實例
h1.hidden {visibility:hidden;}


display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間。
也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。

實例
h1.hidden {display:none;}

-->

<!--

CSS Display - 塊和內(nèi)聯(lián)元素
塊元素是一個元素，占用了全部寬度，在前后都是換行符。

塊元素的例子：

<h1>
<p>
<div>
內(nèi)聯(lián)元素只需要必要的寬度，不強制換行。

內(nèi)聯(lián)元素的例子：

<span>
<a>

-->


<!--


如何改變一個元素顯示
可以更改內(nèi)聯(lián)元素和塊元素，反之亦然，可以使頁面看起來是以一種特定的方式組合，并仍然遵循web標準。

下面的示例把列表項顯示為內(nèi)聯(lián)元素：

實例
li {display:inline;}


下面的示例把span元素作為塊元素：

實例
span {display:block;}

-->


<!--


塊級元素(block)特性：

總是獨占一行，表現(xiàn)為另起一行開始，而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)、內(nèi)邊距(padding)和外邊距(margin)都可控制;
內(nèi)聯(lián)元素(inline)特性：

和相鄰的內(nèi)聯(lián)元素在同一行;
寬度(width)、高度(height)、內(nèi)邊距的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


內(nèi)聯(lián)元素主要有：

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


可變元素(根據(jù)上下文關系確定該元素是塊元素還是內(nèi)聯(lián)元素)：
applet ,button ,del ,iframe , ins ,map ,object , script


CSS中塊級、內(nèi)聯(lián)元素的應用：

利用CSS我們可以擺脫上面表格里HTML標簽歸類的限制，自由地在不同標簽/元素上應用我們需要的屬性。

主要用的CSS樣式有以下三個：

display:block  -- 顯示為塊級元素
display:inline  -- 顯示為內(nèi)聯(lián)元素
display:inline-block -- 顯示為內(nèi)聯(lián)塊元素，表現(xiàn)為同行顯示并可修改寬高內(nèi)外邊距等屬性
我們常將<ul>元素加上display:inline-block樣式，原本垂直的列表就可以水平顯示了


-->



<!--

對于 CSS 里的 visibility 屬性，通常其值被設置成 visible 或 hidden。

visibility: hidden 相當于 display:none，能把元素隱藏起來，但兩者的區(qū)別在于：

 1、display:none 元素不再占用空間。
 2、visibility: hidden 使元素在網(wǎng)頁上不可見，但仍占用空間。
然而，visibility 還可能取值為 collapse 。


當設置元素 visibility: collapse 后，一般的元素的表現(xiàn)與 visibility: hidden 一樣，
也即其會占用空間。但如果該元素是與 table 相關的元素，
例如 table row、table column、table column group、table column group 等，
其表現(xiàn)卻跟 display: none 一樣，也即其占用的空間會釋放。


在不同瀏覽器下，對 visibility: collapse 的處理方式不同：
 1、visibility: collapse 的上述特性僅在 Firefox 下起作用。
 2、在 IE 即使設置了 visibility: collapse，還是會顯示元素。
 3、在 Chrome 下，即使會將元素隱藏，但無論是否是與 table 相關的元素，
 visibility: collapse 與 visibility: hidden 沒有什么區(qū)別，即仍會占用空間。



-->
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容