寫在前面
今天是入門前端的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的問題~