網頁|在CSS學習中的問題總結
- 2019 年 12 月 24 日
- 筆記
問題描述
經過前面對HTML5的入門學習，我已經對HTML格式有了大致了解，也掌握了如何運用標題、段落、圖像以及列表、表格、表單來豐富自己的網頁。為了使頁面看起來更美觀，我開始着手對CSS的學習，在剛開始的學習過程中也確實遇到了許多問題，現在我把他們集中總結。
解決方案
首先明確我的學習順序：CSS盒子模型→CSSborder→CSSoutline→CSS margin→CSS padding.
boxmodle中遇到的問題：
問題一：（待解決）盒中內容過長會超出盒子。如圖：
圖2.1.1內容未超出盒子範圍時
圖2.1.2內容超出盒子範圍時
問題二：（待解決）盒子中文本換行的規則？我原本以為空格會導致換行，但後來發現好像跟空格沒有什麼關係，如圖：
圖2.1.3盒子的代碼
圖2.1.4盒子中文本的換行情況
（2）CSS border中遇到的問題：
問題一：（已解決）在學習盒子模型時，對這樣一行代碼「border:30pxsolid gray」中「solid」一詞存在困惑：好像跟顏色的設置沒有關係，可以去掉嗎？後來實踐證明這個詞並不是可有可無的，去掉他後不會顯示設置為灰色的部分，如圖：
圖2.2.1去掉「solid」之後的盒子
後來查閱發現solid其實是邊框樣式中實線的意思。
問題二：（已解決）對於同一個border，可以有最少一種，最多四種邊框樣式，那麼當我們選用三種樣式時，就會有兩邊是一樣的樣式，是哪兩邊呢？這裡涉及邊框樣式的順序，我發現不論是三種還是四種（因為一、二種不便於觀察規律），都是按照順時針順序設置樣式，即top→right→bottom→left,這是四種時的順序，若border-style為三種，則為top→right→bottom,那麼剩下的left就跟與之對應的right樣式相同。
問題三：（未解決）設置邊框樣式就要有「p.{}」格式，這裡的p與段落標籤顯然不同，但又不知道他的含義是什麼？不過也可以發現一些規律，那就是在「p.」後面、「{}」之前，是可以跟東西的，比如菜鳥上的實例：
圖2.2.2菜鳥實例
實例中的「one」可以理解為這個邊框的「身份」，當邊框數量＞1時可快速區分各邊框。不過有的教學網站直接將邊框樣式作為其身份，使我誤以為需要將每一個樣式都放在P.之後，事實證明，不論放多少個「身份」，他只會識別第一個。以設置三種邊框樣式為例來觀察一個「身份」與多個「身份」的運行區別，如圖：
圖2.2.3一個「身份」代碼
圖2.2.4一個「身份」運行效果
圖2.2.5多個「身份」代碼
圖2.2.6多個「身份」運行效果
不知道為什麼三種樣式、多個「身份」的運行效果會和兩種樣式、一個身份的運行效果相同？但要知道「p.」後面只需跟一個身份就可以了。
問題四：（已解決）在設置border-color時，沒有特別說明border-color是什麼顏色的邊框顯什麼色？下面我們仍然通過對比來尋找答案，如圖：
圖2.2.7border-color代碼
可以看出，共有三個邊框是設置了邊框顏色的，其餘邊框均未特別規定顏色，再對比是否設置邊框顏色的效果圖：
圖2.2.8是否設置了border-color的對比效果圖
其中，前三個邊框均為設置了border-color的效果圖，而後三個則未特殊設置，可以看出，後三個邊框的顏色一致，應該為默認色。
（3）CSS outline中遇到的問題：
問題一：（未解決）為什麼給一個邊框添加輪廓會使所有邊框被框住？如圖：
圖3.1.1outline
在所有邊框的代碼中，僅此一處規定了outline，但所有邊框都增加了一樣的輪廓。（參考圖2.2.8）猜想：是否可以給每一個邊框都定義不同的輪廓？不需要輪廓的邊框是否需要隱藏輪廓才不會顯示輪廓？
（4）CSS margin中遇到的問題：
問題一：（未解決）該在什麼範圍內設置外邊距較為合理？
（5）CSS padding中遇到的問題：
問題一：（已解決）填充順序？與border-style一樣為順時針填充。
結語
在學習H5與CSS的過程中，會遇到很多讓人疑惑的地方，我的解決方法是實踐與記錄。先將問題暫時記在記事本，再在過程中不斷試驗並記錄截圖，方便後期總結對比。總結的過程中也會重新發現很多當初沒有注意或沒有深入思考的點，而正是這些點促成我們的進步。
實習編輯 | 王楠嵐
責 編 | 趙 微
