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