當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS学习笔记 display属性

發布時間：2024/4/15 CSS 58 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS学习笔记 display属性小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS學習筆記05 display屬性

HTML標記一般分為塊標記和行內標記兩種類型，它們也稱塊元素和行內元素。

塊元素

每個塊元素通常都會獨自占據一整行或多整行，可以對其設置寬度、高度、對齊等屬性，常用于網頁布局和網頁結構的搭建。并且塊級元素容器可以容納多個嵌套的塊級標簽或者行內標簽。常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標記是網頁制作中最常用的塊元素。

行內元素

行內元素不占有獨立的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構的樣式。行內元素不能嵌套塊級標簽，只能嵌套其他的行內標簽。常見的行內元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>等，其中<span>標記是最常用的行內元素。

1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>display</title>6 </head>7 <body>8 <div>我是一個div</div>9 <span>我是一個span</span> 10 <strong>我是一個strong</strong> 11 </body> 12 </html>

要是想讓strong標簽像div標簽一樣獨占一行可不可以呢，答案是當然可以。這就需要用到display這個屬性了，比較常用的值有none、inline、block與inline-block，這幾個值得解釋如下

none ：此元素不被顯示，在文檔中被移除。
block ：此元素按塊級元素顯示：前后帶換行符，自己占一行。內聯元素 → 塊元素
inline ：此元素按內聯元素顯示：1個挨著1個。塊元素 → 內聯元素
inline-block：按行內標簽進行排版，但是可以設置寬高，而且高度可以影響行高

block屬性

現在讓我們把上面的strong元素變成塊級元素試試

1 <!DOCTYPE html>2 <html lang="en">3 <head>4 <meta charset="UTF-8">5 <title>display</title>6 7 <style type="text/css">8 strong {9 display: block; 10 } 11 </style> 12 </head> 13 <body> 14 <div>我是一個div</div> 15 <span>我是一個span</span> 16 <strong>我是一個strong</strong> 17 </body> 18 </html>

inline屬性

可以看到設置了display屬性為block之后，strong標簽就獨占一行了，相反如果讓div元素變成行內元素的話，就需要用到display屬性的inline值了

1 <style type="text/css"> 2 strong { 3 display: block; 4 } 5 6 div { 7 display: inline; 8 } 9 </style>

可以看到div標簽與span在同一行顯示了

inline-block屬性

再來看看inline-block值，字面意思是行內塊級元素，從最開始的介紹得知行內元素的寬高只能靠自身的內容來支撐，這里先給span標簽設置寬高

span {width: 200px;height: 100px;background-color: red; }

從瀏覽器的運行結果來看，給span設置的寬高并沒有起到任何的作用，現在給span設置下display屬性inline-block看看

span {width: 200px;height: 100px;background-color: red;display: inline-block; }

none屬性

可以看到設置的寬高都起作用了，有了塊級元素的假象，不過這里的span標簽還是一個行內元素。有時候，我們需要暫時性的隱藏頁面中的元素，這時就可以設置元素的display屬性為none，例如需要隱藏頁面中的div元素

div {display: none; }

需要注意的是，CSS中的visibility屬性也可以控制頁面元素的顯示與否

div {visibility: hidden; }

通過瀏覽器的顯示結果可以很容易得出下面的結論

display: none;的設置是直接把當前標簽從頁面中直接移除了，不影響頁面的布局，而visibility: hidden這個設置只是表示元素在頁面上不顯示，但還是占用頁面的空間。

轉載于:https://www.cnblogs.com/leibo520/p/7073869.html

總結

以上是生活随笔為你收集整理的CSS学习笔记 display属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。