css中display:none;和visibility:hidden;的區別是什么

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

創新互聯-專業網站定制、快速模板網站建設、高性價比元謀網站開發、企業建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式元謀網站制作公司更省心,省錢,快速模板網站建設找我們，業務覆蓋元謀地區。費用合理售后完善，10多年實體公司更值得信賴。

display: none;和visibility:hidden;的區別

簡單來說：

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

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

inline、inline-block、block的區別

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

<div>標簽默認為display: block;

<span>標簽默認為display: inline;

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

接下來講區別：

對于display: block;

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

• 可設置寬度和高度。

• 在未設置寬度時，其寬度會撐滿。

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

對于display: inline;

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

• 寬度和高度由內容撐開，設置width和height是無效的。

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

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

對于display: inline-block;

• 它像inline和block的合體。

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

• 可設置寬度和高度。

重點解釋一下inline的padding-top或者padding-bottom。當給inline的元素設置這兩個值時，實際上是加上了padding的，在設置背景色的時候可以清楚的看到背景色作用在了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%;
}

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

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

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

意思是：
L是邊長，S是border-radius設置的兩個方向的值的和，如果 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中的跑道形狀。

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

總結：

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

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

• 當border-radius非常大時，會產生交疊，導致要一起縮小，縮小至最短邊的一半。

margin和padding的區別，何時用哪個？

區別：

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

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

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

我的用法：

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

• 在需要拉開內部元素與父元素的距離時，在父元素上加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;的區別是什么”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯行業資訊頻道！

文章標題：css中display:none;和visibility:hidden;的區別是什么
網站鏈接：http://m.kartarina.com/article6/jeohig.html

成都網站建設公司_創新互聯，為您提供網站內鏈、品牌網站設計、網站導航、域名注冊、關鍵詞優化、微信公眾號

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯