碼上快樂

相關內容    簡體    繁體

display顯示屬性理解

本文轉載自   查看原文   2018-02-01 17:35   14877    CSS

display屬性設置一個元素應如何顯示，是我們在前端開發中常常使用的一個屬性，其中，最常見的有：

一.隱藏元素display:none;

 


主要區別visibility：hidden; 和display:none
display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。
visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。
visibility屬性指定一個元素應可見還是隱藏。默認元素是可見的：visibility:visible;


比如，當我們在瀏覽網頁時，如果看到了某個煩人的廣告遮擋了我們的實現，更為可氣的是，它還沒有關閉的選項，這時（以chrome為例），我們就可以按下F12，打開開發者工具，點擊element，然后使用左上角的選擇工具選中想要刪除的廣告，可以看到element中會有高亮的一行或幾行代碼，右鍵，點擊Add Attribute，然后輸入：style="display:none"，這時就可以發現廣告不見啦！

 

二.塊元素display:block;

 


塊元素特性：

 

  • 塊元素的display屬性值默認為block。
  • 總是以一個塊的形式表現出來，占領一整行。若干同級塊元素會從上之下依次排列（使用float屬性除外）。
  • 可以設置高度、寬度、各個方向外補丁（margin）以及各個方向的內補丁（padding）。支持margin：auto;
  • 當寬度（width）缺省時，它的寬度時其容器的100%，除非我們給它設定了固定的寬度。
  • 塊元素中可以容納其他塊級元素或行內元素。
  • 常見的塊元素由<p><div><h1><li>等等。

 

 

三.內聯元素display:inline;


內聯元素特性：

 

  • 內聯元素的display屬性值默認為inline。
  • 它不會單獨占據一整行，而是只占領自身的寬度和高度所在的空間。若干同級內聯元素會從左到右（即某個行內元素可以和其他行內元素共處一行），從上到下依次排列。
  • 內聯元素不可以設置高度、寬度，其高度一般由其字體的大小來決定，其寬度由內容的長度控制。
  • 內聯元素只能設置左右的margin值和左右的padding值，而不能設置上下的margin值和上下的padding值。因此我們可以通過設置左右的padding值來改變行內元素的寬度。
  • 常見的內聯元素由<a><em><img>等等。
  • 內聯元素一般不可以包含塊級元素。

 

通過對一個行內元素設置display:　block;可以將行內元素設置為塊級元素，進而設置它的寬高和上下左右的padding和margin。

應用：

如果我們經常會制作導航欄，這時就要使用ul li 和a組合的方式，但是<a>是行內元素，我們無法設置它的寬和高，這時，就可以在<a>的樣式表中，將之設置為display：block。這樣就可以設置它的寬和高，以及上下左右的margin和padding以達到我們想要的效果了。

 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{padding: 0;margin:0;list-style: none;}
  8.         ul li{float: left;}
  9.         a{display:block;width: 30px;height: 30px;background: yellow;margin: 5px; text-decoration: none;text-align: center;line-height: 30px;}
  10.     </style>
  11. </head>
  12. <body>
  13.     <ul>
  14.         <li><a href="">1</a></li>
  15.         <li><a href="">2</a></li>
  16.         <li><a href="">3</a></li>
  17.         <li><a href="">4</a></li>
  18.         <li><a href="">5</a></li>
  19.     </ul>
  20. </body>
  21. </html>

效果如下：

四.內聯塊元素display:inline-block;


內聯塊元素特性：

 

  • 不強制換行,沒有寬度內容撐開寬高
  • 支持寬、高、margin、padding，但不支持margin：auto;
  • 內聯塊元素居中可使用父容器居中。
  • 即使margin padding都設置為0；代碼換行仍然會產生空白符，解決方法：設置父元素字體大小為0像素
  • IE6,7只支持inline元素設置為inline-block，其它類型元素均不可以
  • 常見內聯塊元素

 

根據名字，實際上我們就可以才出來它是結合了inline和block的特性於一身。即設置了inline-block屬性的元素既具有block元素可以設置width和height屬性的特性，又保持了inline元素不換行的特性。舉例說明，我們之前在做橫向導航菜單的時候，一般是用ul li a組合，然后將li設置為float，這樣就可以得到橫向的導航標簽了。而現在我們可以通過li和display:inline-block;來實現。

代碼如下：

 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         ul,li,a,*{padding:0; margin:0;list-style: none;text-decoration: none;}
  8.         li{display: inline-block;border: thin solid red;}
  9.     </style>
  10. </head>
  11. <body>
  12.     <ul>
  13.         <li><a href="">1</a></li>
  14.         <li><a href="">2</a></li>
  15.         <li><a href="">3</a></li>
  16.         <li><a href="">4</a></li>
  17.         <li><a href="">5</a></li>
  18.     </ul>
  19. </body>
  20. </html>

效果圖如下：

確實實現了橫向的排列，實際上，也可以設置寬和高，大家可以自己嘗試。但是，很明顯有一個問題---我將padding和margin的值都設置為0，為什么他們之間還會有距離呢？實際上，這是inline元素自身出現的問題，而inline-block結合了inline和block屬性，當然也就存在這個問題了。這些空隙是空白符，在瀏覽器中，空白符是不會被瀏覽器忽略的，多個連續的空白符瀏覽器會自動將其合並成一個。我們編寫代碼時寫的空格，換行都會產生空白符。所以自然而然的兩個元素之間會有空白符，如果將上述例子中的a標簽寫成一行，空白符消失，菜單之間也就緊湊起來了。

解決方法：我們要明白空白符歸根結底是一個字符，只要我們將ｕｌ中的字符的大小設置位０，那么空白符也就不會存在了，但是這是a的字體大小也會繼承ul的字體大小，那么就不見了，該怎么辦，只需要將a中再設置一個字體不為0的大小覆蓋即可。

 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. ul{font-size: 0;}
  8. ul,li,a,*{padding:0; margin:0;list-style: none;text-decoration: none;}
  9. li{display: inline-block;border: thin solid red;font-size: 15px;}
  10. </style>
  11. </head>
  12. <body>
  13. <ul>
  14. <li><a href="">1</a></li>
  15. <li><a href="">2</a></li>
  16. <li><a href="">3</a></li>
  17. <li><a href="">4</a></li>
  18. <li><a href="">5</a></li>
  19. </ul>
  20. </body>
  21. </html>

最終得到的效果圖如下：

五.display:inherit;


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Python類屬性與實例屬性理解 理解與應用css中的display屬性 python私有方法和私有屬性屬性理解,子類繼承 jquery控制css的display屬性(顯示與隱藏) python numpty 中shape的用法，numpy.array 的shape屬性理解 Java多態性理解 浮動的定義和特性理解 display屬性 easyUI-datagrid屬性設置display：none，表頭不顯示 synchronized內存可見性理解
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM