面試之道之 CSS 基礎

程式設計之上發表於2019-07-04

面試CSS

想說的是

本篇連載中，主要收集 CSS 的入門知識，當然大家可在評論區給出一些問題（及答案），我會慢慢完善這塊知識（雖然知道這塊知識永遠寫不完，可那又有什麼關係）。我知道這條路會很長，一步一步走唄，怕什麼！

盒子模型

主要考察標準 W3C 盒子模型與 IE 盒子模型中，屬性 width、height 與屬性 content、border值 和 padding值 的關係，以 width 舉例。

標準 W3C 盒子模型，width = content width；
IE盒子模型，width = content width + border 左右值 + padding 左右值；

標準 W3C 盒子模型

IE 盒子模型

`margin` 與 `padding` 等的技巧寫法

考察對這類寫法技巧的熟悉情況

四個值一樣 padding: 24px;;
上下值一樣、左右值一樣 padding: 12px 24px（上下值 12px，左右值 24px）;
上下值不一樣、左右值一樣 padding: 12px 24px 0（上值 12px，左右值 24px，下值 0，值為 0 可省略單位）;
上下值和左右值都不一樣 padding: 12px 24px 24px 12px;
上下值一樣，左右值不一樣（這個還真沒有），這個主要是寫法順序上實現不了，因為正常賦值順序是上右下左，最有一個是左，如果哪天標準變成 右下左上，那就可以了，哈哈；

display 有哪些值，有何作用

值	作用
block	塊級元素，獨佔一行
inline	預設。內聯元素，以和為貴，共用一行
inline-block	行內塊元素，CSS2.1 新增的值。除了不能獨佔一行，擁有 `block` 塊級元素的屬性
none	元素隱藏，不展示
list-item	元素呈列表展示
flex	彈性容器

position 有哪些值，有何作用

值	作用
static	預設值。無定位，元素處於正常的文件流中，此時忽略 `top、bottom、left、right 和 z-index`
inherit	繼承父元素 `position` 的值
relative	相對（正常位置）定位，可設定 `top、bottom、left、right 和 z-index`
absolute	絕對定位，脫離文件流，可設定 `top、bottom、left、right 和 z-index`
fixed	絕對定位，脫離文件流，相對於瀏覽器視窗，可設定 `top、bottom、left、right 和 z-index`

標籤元素在瀏覽器中不顯示的幾種方法

設定	作用
`opacity: 0`	無副作用，不會改變佈局，繫結了事件是會觸發的
`visibility:hidden`	無副作用，不會改變佈局，繫結了事件不會觸發
`display:node`	有作用，會改變佈局，可理解為移除了元素，當然就無事件觸發這一說

CSS 選擇器優先順序

相同場景下：後者覆蓋前者設定的屬性值；
不同場景的（應該是最全的了吧）：!important > 行間樣式 > id 選擇器 > 類選擇器 > 標籤 > 萬用字元 > 繼承 > 瀏覽器預設屬性；

CSS 實現一個三角形

以倒三角為例吧，倒三角是上有寬度，下無寬度，左右虛寬。所以這麼設定

上邊框設定非透明；
下邊框不做設定；
左右邊框設定為透明；

.triangle {
  	width: 0;
    height: 0;
    font-size: 0;
    border-top: 16px solid green;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
}
複製程式碼