前端入門-day2（常見css問題及解答）

寫在前面

今天是入門前端的day2, 小夥伴們應該已經看了一些HTML的基礎和CSS的基礎了，是否是遇到了不少關於CSS的問題呢。由於HTML不多有太複雜的問題，因此直接寫一篇關於CSS的常見問題及解答啦~

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的問題~