「css早讀課」如何理解Display：None，Block，Inline，Inline-Block

時間 2019-11-15

標籤 css 如何理解 display block inline 欄目 CSS 简体版

原文原文鏈接

今天的早讀課，筆者將介紹Display的相關屬性，主要涉及的內容包含：css

display: none vs. visibility: hidden
display: block
display: inline
display: inline-block

Display: None vs. Visibility: Hidden

以下段代碼所示，咱們有三個紅、藍、綠的方塊，以下段代碼所示：html

#box-1 {
  width: 100px;
  height: 100px;
  background: red;
}

#box-2 {
  width: 100px;
  height: 100px;
  background: blue;
}

#box-3 {
  width: 100px;
  height: 100px;
  background: green;
}

div {
  display: inline-block;
}

body {
  background: #efefef;
}複製代碼

<div id="box-1"></div> <div id="box-2"></div> <div id="box-3"></div>複製代碼

「早讀課」如何理解Display：None，Block，Inline，Inline-Block

首先咱們先使用 display: none 屬性隱藏藍色的方塊，以下段代碼所示：前端

#box-2 {
  display: none;
  width: 100px;
  height: 100px;
  background: blue;
}複製代碼

如上圖所示，使用Display: None，咱們能夠看出藍色方塊從中「刪除」，中間的空位也被綠色的方塊補位。微信

接着咱們使用 visibility: hidden 屬性隱藏藍色方塊，以下段代碼所示：spa

#box-2 {
  width: 100px;
  height: 100px;
  background: blue;
  visibility: hidden;
}複製代碼

從上圖咱們看出，使用Visibility: Hidden，咱們實現了藍色方塊的「隱藏」，中間的位置空缺保留。設計

Block vs. Inline

Block塊級元素默認填滿父級元素內容區域，旁邊不能有其餘元素，最多見的塊級元素就是<div>,,<ul> 等。3d

Inline行內元素在一行文本內生成元素框，不打斷所在的行。最多見的行內元素好比：,<img>,<a>。首先咱們下段沒有CSS的Html代碼:code

<body> <p>I'm a paragraph</p> <p>I'm a paragraph too</p> <span>I'm a word</span> <span>I'm a word too.</span> </body>複製代碼

從上圖咱們看出:cdn

兩個元素佔了兩行,兩個元素佔了一行，因而可知每一個Html元素都有個默認的display屬性:block或inline。xml

如下是關於 Block 和 Inline 差別的總結：

Block

默認100%佔滿父元素區域
每一個元素佔一行
能夠設置width和height屬性
能夠包含其餘塊級元素或行內元素。

以下代碼示意：

p {
  height: 100px;
  width: 100px;
  background: red;
  color: white;
}複製代碼

從中咱們能夠看出設置了元素的寬和高，每一個紅色方塊會獨佔一行，以下圖所示：

inline

按需佔用空間
不斷行，並排顯示
width，height，top-bottom margin 等屬性不起做用
能夠是其餘行內元素的父級。

以下段代碼所示，咱們更改標籤display的默認屬性，讓其成爲行內元素：

p {
  height: 100px;
  width: 100px;
  background: red;
  color: white;
  display: inline;
}複製代碼

從上圖所示，咱們看出，元素變成了行內元素，咱們設置的寬和高並不起效，三個元素排成一行。

Display: Inline-block

某些狀況下，行內元素和塊級元素並不能知足咱們的設計需求，所以有了Inline-block這個屬性，從屬性的名字，咱們就能夠分析出其綜合了二者的一些特徵。

咱們能夠這樣理解，這個屬性是個行內屬性，能夠設置width和height或者咱們能夠理解成一個塊級元素，不用換行。

爲了理解這個屬性，咱們仍是從一段代碼開始，以下所示：

p {
  display: inline-block;
  height: 100px;
  width: 100px;
  background: red;
  color: white;
}複製代碼

從上面的效果圖，咱們能夠看出，使用此屬性後，咱們讓行內元素具有了寬高屬性。

小節

今天的早讀課就到這裏，但願經過本篇文章，你明白了display的這些屬性。

更多精彩內容，請微信關注「前端達人」公衆號！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。