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

tuantuan 發布于2019-08-29 17:02 / 2456人閱讀

摘要：寫在前面今天是入門前端的小伙伴們應該已經看了一些的基礎和的基礎了，是不是遇到了很多關于的問題呢。因為很少有太復雜的問題，所以直接寫一篇關于的常見問題及解答啦和的區別簡單來說不會再占據空間，就跟不存在一樣。

寫在前面

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

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

簡單來說：

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

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

inline、inline-block、block的區別

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

標簽默認為display: block;

標簽默認為display: inline;

但是，默認值可以被重寫。即你可以對

標簽設置display: inline;，對標簽設置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上，但是卻沒有拉開和下方元素的距離。
代碼如下：

block1
block2
block3

.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%;的正確理解。

先看代碼：

block1
block2

.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


  son1
  son2


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

最后

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

云服務器 GPU云服務器 idcisp業務申請常見問題解答問題解答 java繼承問題求解答 Linux常見故障及解決方案

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114062.html

刷題日記Day2 | 構造二叉樹

摘要：代碼實現構建二叉樹節點對應的值就是后序遍歷數組的最后一個元素在中序遍歷數組中的索引左子樹的節點個數遞歸構造左右子樹把題目的要求細化，搞清楚根節點應該做什么，然...

Hwg 2021-11-17 09:33 評論0 收藏0
【重溫基礎】7.時間對象

摘要：本文是重溫基礎系列文章的第七篇。系列目錄復習資料資料整理個人整理重溫基礎語法和數據類型重溫基礎流程控制和錯誤處理重溫基礎循環和迭代重溫基礎函數重溫基礎表達式和運算符重溫基礎數字本章節復習的是中的時間對象，一些處理的方法。本文是重溫基礎系列文章的第七篇。今日感受：做好自律。系列目錄：【復習資料】ES6/ES7/ES8/ES9資料整理(個人整理) 【重溫基礎】1.語法和數據類型...

YuboonaZhang 2019-08-23 14:12 評論0 收藏0
前端架構師親述：前端工程師成長之路的 N 問及回答

摘要：問題回答者黃軼，目前就職于公司擔任前端架構師，曾就職于滴滴和百度，畢業于北京科技大學。最后附上鏈接問題我目前是一名后端工程師，工作快五年了。 showImg(https://segmentfault.com/img/bVbuaiP?w=1240&h=620); 問題回答者：黃軼，目前就職于 Zoom 公司擔任前端架構師，曾就職于滴滴和百度，畢業于北京科技大學。 1. 前端開發問題大...

crossoverJie 2019-08-23 18:14 評論0 收藏0
【進階1-5期】JavaScript深入之4類常見內存泄漏及如何避免

摘要：本期推薦文章類內存泄漏及如何避免，由于微信不能訪問外鏈，點擊閱讀原文就可以啦。四種常見的內存泄漏劃重點這是個考點意外的全局變量未定義的變量會在全局對象創建一個新變量，如下。因為老版本的是無法檢測節點與代碼之間的循環引用，會導致內存泄漏。（關注福利，關注本公眾號回復[資料]領取優質前端視頻，包括Vue、React、Node源碼和實戰、面試指導）本周正式開始前端進階的第一期，本周的主題...

red_bricks 2019-08-23 13:47 評論0 收藏0
前端進階系列-目錄

摘要：然而在最近的面試中通過學習和思考，找到了前進的方向，也得到一些大公司的錄用機會。算是從初級前端畢業，進階了吧。在這里先寫個目錄。趕時間的同學可以按照我的目錄先自行準備提升，希望推薦文章和交流。背景之前我分享了文章大廠前端面試考什么?,你們一定很想看答案吧？說實話，答案我是有，在準備面試的時候會時不時翻看，但內容比較多，比較凌亂，不能指望我在一篇文章中寫完。我是從非計算機專業自學前...

cod7ce 2019-08-22 16:12 評論0 收藏0