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

包子吃多會變蠢發表於2018-10-22
前端CSS

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的三個值

對於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;
}
複製程式碼

圖片如下：

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

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%;
}

複製程式碼

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

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

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

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

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

意思是： 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中的跑道形狀。

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

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

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

總結：

  • border-radius: 50px;等價於border-radius: 50px/50px;有兩個方向。
  • 通常，50%的radius用的比較多，常用來設定圓形的頭像，對一個正方形元素設定border-radius: 50%;即可實現。
  • 當border-radius非常大時，會產生交疊，導致要一起縮小，縮小至最短邊的一半。

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

區別：

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

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

  • 其次，背景色會作用在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;
}
複製程式碼

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

最後

這一篇先到此為止，太長了不適合閱讀，因此會拆到下一篇裡邊。下一篇仍然是講一些CSS的問題~

相關文章