css篇-简化版
【CSS篇】簡化版
(1)???? CSS盒模型
?
?
CSS盒模型
題目：談談你對CSS盒模型的認識
?
1)?????? 基本概念：標準模型+IE模型
2)?????? 標準模型和IE模型的區別
計算寬度和高度的不同
3)?????? CSS如何設置這兩種模型
4)?????? JS如何設置獲取盒模型對應的寬和高？
JS怎么寫才能拿到盒模型對應的寬和高呢？
5)?????? 實例題(根據盒模型解釋邊距重疊)
6)?????? BFC(邊距重疊解決方案) 或者IFC
?
?
詳細解讀：
1)?????? 基本概念：標準模型+IE模型
2)?????? 標準模型和IE模型的區別
標準模型的寬度指的就是content的寬度，不包含padding 和 border。
IE模型的寬高是計算padding和border的。如果設置寬度為200px，那么對于IE模型來說，它的200px是包含padding和border。
3)?????? CSS如何設置這兩種模型？
box-sizing: content-box;
4)?????? JS如何設置獲取盒模型對應的寬和高？
dom.style.width/height
dom.currentStyle.width/height(這個屬性只有IE支持)
window.getComputedStyle(dom).width/height(這個屬性所有瀏覽器都支持)
dom.getBoundingClientRect().width/height(計算絕對位置)
5)?????? 實例題(根據盒模型解釋邊距重疊)
?
6)?????? BFC(邊距重疊解決方案) 或者IFC
6-1)BFC的基本概念
塊級格式化上下文
6-2)BFC的原理
在BFC的垂直方向的邊距會發生重疊
BFC的區域不會與清除浮動的區域發生重疊
計算BFC的高度的時候，浮動元素也會參與計算。
BFC不與float重疊
BFC子元素即使是float也會參與高度計算
6-3)如何創建BFC
overflow: hidden;
float的值不為none
position的值不是 static
display的是table
6-4)BFC的使用場景
?
?
* 什么是 BFC
?
?? BFC（Block Formatting Context）格式化上下文，是 Web 頁面中盒模型布局的 CSS 渲染模式，指一個獨立的渲染區域或者說是一個隔離的獨立容器。
* 形成 BFC 的條件
?
?? * 浮動元素，float 除 none 以外的值
?? * 定位元素，position（absolute，fixed）
?? * display 為以下其中之一的值 inline-block，table-cell，table-caption
?? * overflow 除了 visible 以外的值（hidden，auto，scroll）
* BFC 的特性
?? * 內部的 Box 會在垂直方向上一個接一個的放置。
?? * 垂直方向上的距離由 margin 決定
?? * bfc 的區域不會與 float 的元素區域重疊。
?? * 計算 bfc 的高度時，浮動元素也參與計算
?? * bfc 就是頁面上的一個獨立容器，容器里面的子元素不會影響外面元素。
?
?
?
?
(2) 面試總結【css篇】- css選擇器以及優先級
優先（優先級為）： !important > 內聯樣式 > #id > .class > tag > * > 繼承? > 默認 。
當選擇器的權重相同時，它將應用于就近原則。
?
?
權重的計算方式：
?
-----------------------------------------------------
來源： MDN web docs?
?
不同種類的CSS選擇器：
選擇器可以被分為以下類別：
- 簡單選擇器 （Simple selectors）：通過元素類型、class 或 id 匹配一個或多個元素。
- 屬性選擇器 （Attribute selectors) : 通過 屬性 / 屬性值 匹配一個或多個元素。
- 偽類 (Pseudo-classes) ：匹配處于確定狀態的一個或多個元素，比如被鼠標指針懸停的元素，或當前被選中或未選中的復選框，
或元素是DOM樹中一父節點的第一個子節點。
- 偽元素（Pseudo-elements) : 匹配處于相關的確定位置的一個或多個元素，例如每個段落的第一個字，或者某個元素之前生成的內容。
- 組合器（Combinators) ：這里不僅僅是選擇器本身，還有以有效的方式組合兩個或更多的選擇器用于非常特定的選擇的方法。
例如，你可以只選擇divs的直系子節點的段落，或者直接跟在headings后面的段落。
- 多重選擇器（Multiple selectors) ：這些也不是單獨的選擇器； 這個思路是將以逗號分隔開的多個選擇器放在一個CSS規則下面，
以將一組聲明應用于由這些選擇器選擇的所有元素。
?
-----------------------------------------------------
屬性選擇器：
(1) 存在和值 (Presence and value)屬性選擇器
這些屬性選擇器嘗試匹配精確的屬性值：
-?[attr]?: 該選擇器選擇包含 attr 屬性的所有元素，不論 attr 的值為何。
- [attr=val] : 該選擇器僅選擇 attr 屬性被賦值為? val 的所有元素。
- [attr~=val] : 該選擇器僅選擇具有 attr 屬性的元素， 而且要求 val 值 是 attr 值包含的被空格分隔的取值列表里中的一個。
讓我們看一個特別的例子，下面是它的HTML代碼：
?
我的食譜配料： <i lang="fr-FR">Poulet basquaise</i>
<ul>
??? <li data-quantity="1kg" data-vegetable>Tomatoes</li>
??? <li data-quantity="3" data-vegetable>Onions</li>
??? <li data-quantity="3" data-vegetable>Garlic</li>
??? <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li>
??? <li data-quantity="2kg" data-meat>Chicken</li>
??? <li data-quantity="optional 150g" data-meat>Bacon bits</li>
??? <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li>
??? <li data-quantity="25cl" data-vegetable="liquid">White wine</li>
</ul>
?
?
和一個簡單的樣式表：
?
/* 所有具有"data-vegetable"屬性的元素將被應用綠色的文本顏色 */
[data-vegetable] {
??? color: green;
}
/* 所有具有"data-vegetable"屬性且屬性值剛好為"liquid"的元素將被應用金色的背景顏色 */
[data-vegetable = "liquid"] {
??? background-color: goldenrod;
}
?
/* 所有具有"data-vegetable"屬性且屬性值包含"spicy"的元素，
即使元素的屬性中還包含其他屬性值， 都會被應用紅色的文本顏色 */
[data-vegetable~="spicy"] {
??? color: red;
}
?
?
結果如下：
?
?
(2) 子串值 （Substring value) 屬性選擇器
這種情況的屬性選擇器也被稱為"偽正則選擇器"，因為它們提供類似 regular expression 的靈活匹配方式（但請注意，這些選擇器并不是真正的正則表達式）：
-? [attr |= val] ：選擇 attr 屬性的值是 val 或值以 val- 開頭的元素（注意，這里的 "-" 不是一個錯誤，這是用來處理語言編碼的）。
-? [attr ^= val] :? 選擇 attr 屬性的值以 val 開頭（包括 val）的元素。
-? [attr $= val] :? 選擇 attr 屬性的值以 val 結尾 （包括 val)? 的元素。
-? [attr *= val] :? 選擇 attr 屬性的值中包含子字符串 val 的元素（一個子字符串就是一個字符串的一部分而已，例如， "cat" 是字符串 "caterpillar" 的子字符串）。
讓我們繼續我們前面的例子，并添加以下CSS規則：
?
?
/* 語言選擇的經典用法 */
[lang |= "fr"] {
???? font-weight: bold;
}
/* 具有"data-vegetable"屬性含有值"not spicy"的所有元素，都變回綠色*/
[data-vegetable*="not spicy"] {
??? color: green;
}
/* 具有"data-quantity"屬性其值以"kg"結尾的所有元素 */
[data-quantity$="kg"] {
??? font-weight: bold;
}
/* 具有屬性"data-quantity"其值以"optional"開頭的所有元素 */
[data-quantity^="optional"] {
??? opacity: 0.5;
}
?
?
?
-----------------------------------------------------
偽類（Pseudo-class)
一個CSS偽類（Pseudo-class)是一個以冒號 （：）作為前綴，被添加到一個選擇器末尾的關鍵字，當你希望樣式在特定狀態下才被呈現到指定的元素時，
你可以往元素的選擇器后面加上對應的偽類（pseudo-class)。你可能希望某個元素在處于某種狀態下呈現另一種樣式，例如當鼠標懸停在元素上面時，
或者當一個復選框被禁用或被勾選時，又或者當一個元素是它在DOM樹中父元素的第一個子元素時。
:active? ? ? ? ? ? :indeterminate? ? ? ? ?:only-of-type
:any? ? ? ? ? ? ? ?:in-range? ? ? ? ? ? ? ? ? :optional
:checked? ? ? ?:invalid? ? ? ? ? ? ? ? ? ? ?:out-of-range
:default? ? ? ? ? :lang()? ? ? ? ? ? ? ? ? ? ? :read-only
:dir()? ? ? ? ? ? ? :last-child? ? ? ? ? ? ? ? ?:read-write
:disabled? ? ? ?:last-of-type? ? ? ? ? ? ? :required
:empty? ? ? ? ? :left? ? ? ? ? ? ? ? ? ? ? ? ? ?:right
:enabled? ? ? ?:link? ? ? ? ? ? ? ? ? ? ? ? ? :root
:first? ? ? ? ? ? ? :not()? ? ? ? ? ? ? ? ? ? ? ? :scope
:first-child? ? ? :nth-child()? ? ? ? ? ? ? ?:target
:first-of-type? ?:nth-last-child()? ? ? ?:valid
:fullscreen? ? ?:nth-last-of-type()? ? :visited
:focus? ? ? ? ? ? :nth-of-type()? ?
:hover? ? ? ? ? ?:only-child
一個偽類（Pseudo-class)的例子：
<a href="#" target="_blank">百度一下</a>
?
一些樣式：
?
/* 這些樣式將在任何情況下應用于我們的鏈接 */
a {
??? color: blue;
??? font-weight: bold;
}
/* 我們想讓被訪問過的鏈接和未被訪問的鏈接看起來一樣 */
a:visited {
??? color: blue;
}
/* 當光標懸停于鏈接，鍵盤激活或鎖定鏈接時，我們讓鏈接呈現高亮 */
a:hover, a:active, a:focus {
??? color: darkred;
??? text-decoration: none;
}???
?
?
?
-----------------------------------------------------
組合器和選擇器組
雖然一次使用一個選擇器就很有用，但在某些情形中卻可能效率低下。?CSS選擇器在你開始組合他們進行細粒度選擇的時候變得更具使用價值?；谠刂g的相互關聯關系，CSS提供了幾種方法來對元素進行選擇。下表使用連接符展示了這些關聯關系(A和B代表前文所述的任意選擇器):
?
?
轉載于:https://www.cnblogs.com/still1/p/11008380.html
總結
- 上一篇： Rust中文论坛已更新上线
- 下一篇： 刷题or源码链接