css中display: none;和visibility:hidden;的區(qū)別是什么

小編給大家分享一下css中display: none;和visibility:hidden;的區(qū)別是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

display: none;和visibility:hidden;的區(qū)別

簡單來說：

display: none;不會再占據(jù)空間，就跟不存在一樣。

visibility:hidden;則只是將透明度變成0，仍然占據(jù)其空間。

inline、inline-block、block的區(qū)別

首先要明確，每一個標(biāo)簽都有其默認的display的屬性值。例如：

<div>標(biāo)簽?zāi)J為display: block;

<span>標(biāo)簽?zāi)J為display: inline;

但是，默認值可以被重寫。即你可以對<div>標(biāo)簽設(shè)置display: inline;，對<span>標(biāo)簽設(shè)置display: block;

接下來講區(qū)別：

對于display: block;

• 它獨占一行，即不允許有其他元素在其左右。

• 可設(shè)置寬度和高度。

• 在未設(shè)置寬度時，其寬度會撐滿。

• 上下左右的padding和margin都會起作用（這里的起作用是指可以拉開和其他元素的距離）。

對于display: inline;

• 它不會獨占一行，可以允許其他元素在其左右。

• 寬度和高度由內(nèi)容撐開，設(shè)置width和height是無效的。

• 左右的margin和padding可以拉開距離，但是上下的margin和padding不能拉開距離。

• 更多需要注意的點看這里。

對于display: inline-block;

• 它像inline和block的合體。

• 允許其他元素在其左右。

• 可設(shè)置寬度和高度。

重點解釋一下inline的padding-top或者padding-bottom。當(dāng)給inline的元素設(shè)置這兩個值時，實際上是加上了padding的，在設(shè)置背景色的時候可以清楚的看到背景色作用在了padding上，但是卻沒有拉開和下方元素的距離。
代碼如下：

<span class="block1">block1</span>
<span class="block2">block2</span>
<div class="block3">block3</div>

.block1 {
  background-color: lightblue;
  width: 100px; // 無效
  height: 500px; //無效
  margin-right: 20px;
  margin-bottom: 20px; // 無法拉開距離
  padding-left: 10px;
  padding-bottom: 10px; // 無法拉開距離
}

.block2 {
  display: inline-block;
  width: 300px; // 可以起作用
  background-color: lightgray;
}
.block3 {
  background-color: red;
}

圖片如下：

border-radius: 999px;和border-radius: 50%;的正確理解。

先看代碼：

<div class="block1">block1</div>
<div class="block2">block2</div>

.block1 {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  border-radius: 999px;
}

.block2 {
  width: 200px;
  height: 100px;
  background-color: lightgray;
  border-radius: 50%;
}

首先要注意，設(shè)置border: 999px;只是表示設(shè)置一個很大的值，事實上不用設(shè)置999px，只要理解了原理，就能找到那個臨界值。

其次，設(shè)置border-radius: 999px;其實是設(shè)置了x和Y方向上的兩個值，等價于border-radius: 999px/999px;

當(dāng)我們設(shè)置border-raidus: 999px;時，你可以先想象在一個矩形內(nèi)部畫了兩個巨大無比的圓，這兩個圓因為太大了，所以產(chǎn)生了交疊的部分，于是根據(jù)文檔里的這一段：

意思是：
L是邊長，S是border-radius設(shè)置的兩個方向的值的和，如果 f = min(L / s) 小于1，則border-radius都要乘以f來縮小。拿上面的代碼來說，因為最小邊是100px，s為999px + 999px，所以 f = 100 / (999 + 999)是小于1的，所以，border-radius都要乘以f，得出來border-radius：999px;等價于border-radius: 50px;因此變成了block1中的跑道形狀。

當(dāng)我們設(shè)置border-raidus: 50%;的時候，下面這張圖就足夠解釋了：

總結(jié)：

• border-radius: 50px;等價于border-radius: 50px/50px;有兩個方向。

• 通常，50%的radius用的比較多，常用來設(shè)置圓形的頭像，對一個正方形元素設(shè)置border-radius: 50%;即可實現(xiàn)。

• 當(dāng)border-radius非常大時，會產(chǎn)生交疊，導(dǎo)致要一起縮小，縮小至最短邊的一半。

margin和padding的區(qū)別，何時用哪個？

區(qū)別：

• 首先，以border為界，margin在border之外，padding在border里。

• 其次，背景色會作用在padding上，不會作用到margin上。

• margin在垂直方向上可能會出現(xiàn)合并的問題（具體可搜索margin坍塌或者外邊距合并）

我的用法：

通常情況下，我會這樣用：

• 在需要拉開內(nèi)部元素與父元素的距離時，在父元素上加padding

• 在需要拉開元素和元素之間的距離時，用margin

<div class="container">
  <div class="son1">son1</div>
  <div class="son2">son2</div>
</div>

.container {
  background-color: lightblue;
  padding: 10px;
}
.son1 {
  margin-bottom: 10px;
  background-color: orange;
}
.son2 {
  background-color: lightgray;
}

以上是“css中display: none;和visibility:hidden;的區(qū)別是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！