面試之道之 CSS 基礎

時間 2019-11-06

標籤面試之道 css 基礎欄目快樂工作简体版

原文原文鏈接

想說的是

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

盒子模型

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

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

標準 W3C 盒子模型git

IE 盒子模型github

`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 實現一個三角形

以倒三角爲例吧，倒三角是上有寬度，下無寬度，左右虛寬。因此這麼設置post

上邊框設置非透明；
下邊框不作設置；
左右邊框設置爲透明；

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