前端入門(mén)-day2（常見(jiàn)css問(wèn)題及解答）

tuantuan 發(fā)布于2019-08-29 17:02 / 2459人閱讀

摘要：寫(xiě)在前面今天是入門(mén)前端的小伙伴們應(yīng)該已經(jīng)看了一些的基礎(chǔ)和的基礎(chǔ)了，是不是遇到了很多關(guān)于的問(wèn)題呢。因?yàn)楹苌儆刑珡?fù)雜的問(wèn)題，所以直接寫(xiě)一篇關(guān)于的常見(jiàn)問(wèn)題及解答啦和的區(qū)別簡(jiǎn)單來(lái)說(shuō)不會(huì)再占據(jù)空間，就跟不存在一樣。

寫(xiě)在前面

今天是入門(mén)前端的day2, 小伙伴們應(yīng)該已經(jīng)看了一些HTML的基礎(chǔ)和CSS的基礎(chǔ)了，是不是遇到了很多關(guān)于CSS的問(wèn)題呢。因?yàn)镠TML很少有太復(fù)雜的問(wèn)題，所以直接寫(xiě)一篇關(guān)于CSS的常見(jiàn)問(wèn)題及解答啦~

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

簡(jiǎn)單來(lái)說(shuō)：

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

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

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

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

標(biāo)簽?zāi)J(rèn)為display: block;

標(biāo)簽?zāi)J(rèn)為display: inline;

但是，默認(rèn)值可以被重寫(xiě)。即你可以對(duì)

標(biāo)簽設(shè)置display: inline;，對(duì)標(biāo)簽設(shè)置display: block;

接下來(lái)講區(qū)別：

對(duì)于display: block;

它獨(dú)占一行，即不允許有其他元素在其左右。

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

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

上下左右的padding和margin都會(huì)起作用（這里的起作用是指可以拉開(kāi)和其他元素的距離）。

對(duì)于display: inline;

它不會(huì)獨(dú)占一行，可以允許其他元素在其左右。

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

左右的margin和padding可以拉開(kāi)距離，但是上下的margin和padding不能拉開(kāi)距離。

更多需要注意的點(diǎn)看這里。

對(duì)于display: inline-block;

它像inline和block的合體。

允許其他元素在其左右。

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

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

block1
block2
block3

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

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

圖片如下：

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

先看代碼：

block1
block2

.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è)置一個(gè)很大的值，事實(shí)上不用設(shè)置999px，只要理解了原理，就能找到那個(gè)臨界值。

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

當(dāng)我們?cè)O(shè)置border-raidus: 999px;時(shí)，你可以先想象在一個(gè)矩形內(nèi)部畫(huà)了兩個(gè)巨大無(wú)比的圓，這兩個(gè)圓因?yàn)樘罅耍援a(chǎn)生了交疊的部分，于是根據(jù)文檔里的這一段：

意思是：
L是邊長(zhǎng)，S是border-radius設(shè)置的兩個(gè)方向的值的和，如果 f = min(L / s) 小于1，則border-radius都要乘以f來(lái)縮小。拿上面的代碼來(lái)說(shuō)，因?yàn)樽钚∵吺?00px，s為999px + 999px，所以 f = 100 / (999 + 999)是小于1的，所以，border-radius都要乘以f，得出來(lái)border-radius：999px;等價(jià)于border-radius: 50px;因此變成了block1中的跑道形狀。

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

總結(jié)：

border-radius: 50px;等價(jià)于border-radius: 50px/50px;有兩個(gè)方向。

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

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

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

區(qū)別：

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

其次，背景色會(huì)作用在padding上，不會(huì)作用到margin上。

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

我的用法：
通常情況下，我會(huì)這樣用：

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

在需要拉開(kāi)元素和元素之間的距離時(shí)，用margin


  son1
  son2


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

最后

這一篇先到此為止，太長(zhǎng)了不適合閱讀，因此會(huì)拆到下一篇里邊。下一篇仍然是講一些CSS的問(wèn)題~