溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下前端面試CSS中的高頻考點(diǎn)有哪些的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。
用來(lái)控制元素的盒子模型的解析模式，默認(rèn)為content-box
context-box：W3C 的標(biāo)準(zhǔn)盒子模型，設(shè)置元素的 height/width 屬性指的是 content 部分的高/寬
border-box：IE 傳統(tǒng)盒子模型。設(shè)置元素的 height/width 屬性指的是 border + padding + content部分的高/寬
CSS position屬性用于指定一個(gè)元素在文檔中的定位方式。
absolute 的元素會(huì)被移出正常文檔流，并不為元素預(yù)留空間，通過(guò)指定元素相對(duì)于最近的非 static 定位祖先元素進(jìn)行定位，確定元素位置。絕對(duì)定位的元素可以設(shè)置外邊距，且不會(huì)與其他邊距合并。
行內(nèi)元素：一個(gè)行內(nèi)元素只占據(jù)它對(duì)應(yīng)標(biāo)簽的邊框所包含的空間。
塊級(jí)元素：塊級(jí)元素占據(jù)其父元素（容器）的整個(gè)空間，因此創(chuàng)建了一個(gè)“塊”。
區(qū)別：
是否另起一行：認(rèn)情況下，行內(nèi)元素不會(huì)以新的一行開始，而塊級(jí)元素會(huì)新起一行。
是否可設(shè)置寬高：塊級(jí)元素可以設(shè)置 width, height屬性，注意：塊級(jí)元素即使設(shè)置了寬度，仍然是獨(dú)占一行的。 而行內(nèi)元素設(shè)置 width, height 無(wú)效。
是否可設(shè)置內(nèi)外邊距：塊級(jí)元素都可，行內(nèi)元素的水平方向的 padding-left/right, margin-left/right 都產(chǎn)生邊距效果，但是豎直方向的 padding-top/bottom, margin-top/bottom 都不會(huì)產(chǎn)生邊距效果。（也就是水平方向有效，豎直方向無(wú)效）
是否包含對(duì)方：塊級(jí)元素可以包含行內(nèi)元素和塊級(jí)元素。行內(nèi)元素不能包含塊級(jí)元素
1、常見的行內(nèi)元素
<span>、<a>、<lable>、<strong>、<b>、<small>、<abbr>、<button>、<input>、<textarea>、<select>、<img>
2、常見的塊級(jí)元素
<div>、<p>、<li>、<h2> ~ <h7>、<form>、<header>、<hr>、<ol>、<ul>、<article>、<aside>、<dd>、<dl>
可以使用 JS 設(shè)置 DOM 的字體為某一個(gè)值，然后再取出來(lái)，如果值設(shè)置成功，就說(shuō)明支持。
flex 是 flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫。
除了auto (1 1 auto) 和 none (0 0 auto)這兩個(gè)快捷值外，還有以下設(shè)置方式：
當(dāng) flex 取值為一個(gè)非負(fù)數(shù)字，則該數(shù)字為 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：
.item {flex: 1;}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}當(dāng) flex 取值為 0 時(shí)，對(duì)應(yīng)的三個(gè)值分別為 0 1 0%
.item {flex: 0;}
.item {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 0%;
}媒體查詢(Media Queries)早在在css2時(shí)代就存在,經(jīng)過(guò)css3的洗禮后變得更加強(qiáng)大bootstrap的響應(yīng)式特性就是從此而來(lái)的.
簡(jiǎn)單的來(lái)講媒體查詢是一種用于修飾css何時(shí)起作用的語(yǔ)法.
媒體查詢的引入，其作用就是允許添加表達(dá)式用以確定媒體的環(huán)境情況，以此來(lái)應(yīng)用不同的樣式表。換句話說(shuō)，其允許我們?cè)诓桓淖儍?nèi)容的情況下，改變頁(yè)面的布局以精確適應(yīng)不同的設(shè)備
link屬于HTML標(biāo)簽，而@import是css提供的；
頁(yè)面被加載時(shí)，link會(huì)同時(shí)被加載，而@import引用的css會(huì)等到頁(yè)面被加載完再加載；
link是XHTML標(biāo)簽，無(wú)兼容問(wèn)題，而@import只在IE5以上才能識(shí)別；
link方式的樣式的權(quán)重高于@import的權(quán)重。
這個(gè)問(wèn)題的答案和“為何CSS相鄰兄弟選擇器只支持后面的元素，而不支持前面的兄弟元素？”是一樣的。
瀏覽器解析HTML文檔，是從前往后，由外及里的。所以，我們時(shí)常會(huì)看到頁(yè)面先出現(xiàn)頭部然后主體內(nèi)容再出現(xiàn)的加載情況。
但是，如果CSS支持了父選擇器，那就必須要頁(yè)面所有子元素加載完畢才能渲染HTML文檔，因?yàn)樗^“父選擇器”，就是后代元素影響祖先元素，如果后代元素還沒(méi)加載處理，如何影響祖先元素的樣式？于是，網(wǎng)頁(yè)渲染呈現(xiàn)速度就會(huì)大大減慢，瀏覽器會(huì)出現(xiàn)長(zhǎng)時(shí)間的白板?？偟膩?lái)說(shuō)就是CSS和HTML本身的渲染機(jī)制決定的。
何時(shí)使用margin：
需要在border外側(cè)添加空白
空白處不需要背景色
上下相連的兩個(gè)盒子之間的空白，需要相互抵消時(shí)。
何時(shí)使用padding：
需要在border內(nèi)側(cè)添加空白
空白處需要背景顏色
上下相連的兩個(gè)盒子的空白，希望為兩者之和。
常見的如下：
| 值 | 描述 |
|---|---|
| none | 元素不會(huì)顯示 |
| block | 此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符。 |
| inline | 默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符。 |
| inline-block | 行內(nèi)塊元素?？梢栽O(shè)置寬高，同行顯示。 |
| inline-table | 此元素會(huì)作為內(nèi)聯(lián)表格來(lái)顯示（類似 table），表格前后沒(méi)有換行符。 |
| table | 此元素會(huì)作為塊級(jí)表格來(lái)顯示（類似 table），表格前后帶有換行符。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 display 屬性的值。 |
| grid | 網(wǎng)格布局（Grid）是最強(qiáng)大的CSS 布局方案。 它將網(wǎng)頁(yè)劃分成一個(gè)個(gè)網(wǎng)格，可以任意組合不同的網(wǎng)格，做出各種各樣的布局。 |
| flex | 彈性布局，用來(lái)為盒狀模型提供最大的靈活性。 |
其他的可以自行查閱：MDN-display
行框的排列會(huì)受到中間空白（回車空格）等的影響，因?yàn)榭崭褚矊儆谧址?這些空白也會(huì)被應(yīng)用樣式，占據(jù)空間，所以會(huì)有間隔，把字符大小設(shè)為0，就沒(méi)有空格了。
解決方法：
相鄰元素代碼代碼全部寫在一排
浮動(dòng)元素，float:left;
在父級(jí)元素中用font-size:0;
display:none：元素不可見，不占據(jù)空間，無(wú)法響應(yīng)點(diǎn)擊事件
visibility:hidden：元素不可見，占據(jù)頁(yè)面空間，無(wú)法響應(yīng)點(diǎn)擊事件
opacity:0：改變?cè)赝该鞫?，元素不可見，占?jù)頁(yè)面空間，可以響應(yīng)點(diǎn)擊事件
設(shè)置height、width屬性為0：將元素的 margin，border，padding，height和width 等影響元素盒模型的屬性設(shè)置成0，如果元素內(nèi)有子元素或內(nèi)容，還應(yīng)該設(shè)置其 overflow:hidden 來(lái)隱藏其子元素。特點(diǎn)：元素不可見，不占據(jù)頁(yè)面空間，無(wú)法響應(yīng)點(diǎn)擊事件
position:absolute： 將元素移出可視區(qū)域，元素不可見，不影響頁(yè)面布局
clip-path：通過(guò)裁剪的形式，元素不可見，占據(jù)頁(yè)面空間，無(wú)法響應(yīng)點(diǎn)擊事件
登錄后復(fù)制.hide { clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px); }
最常用的還是display:none和visibility:hidden，其他的方式只能認(rèn)為是奇招，它們的真正用途并不是用于隱藏元素，所以并不推薦使用它們
| # | display: none | visibility: hidden | opacity: 0 |
|---|---|---|---|
| 頁(yè)面中 | 不存在 | 存在 | 存在 |
| 重排 | 會(huì) | 不會(huì) | 不會(huì) |
| 重繪 | 會(huì) | 會(huì) | 不一定 |
| 自身綁定事件 | 不觸發(fā) | 不觸發(fā) | 可觸發(fā) |
| transition | 不支持 | 支持 | 支持 |
| 子元素可復(fù)原 | 不能 | 能 | 不能 |
| 被遮擋的元素可觸發(fā)事件 | 能 | 能 | 不能 |
因?yàn)闉g覽器的兼容問(wèn)題，不同瀏覽器對(duì)標(biāo)簽的默認(rèn)值是不同的，如果沒(méi)有對(duì)瀏覽器的CSS初始化，會(huì)造成相同頁(yè)面在不同瀏覽器的顯示存在差異。
表現(xiàn)上
display:none 是徹底消失，不在文檔流中占位，瀏覽器也不會(huì)解析該元素；
visibility:hidden 是視覺上消失了，可以理解為透明度為0的效果，在文檔流中占位，瀏覽器會(huì)解析該元素；
性能上
使用 visibility:hidden 比 display:none 性能上要好，display:none 切換顯示時(shí)，頁(yè)面產(chǎn)生回流（當(dāng)頁(yè)面中的一部分元素需要改變規(guī)模尺寸、布局、顯示隱藏等，頁(yè)面重新構(gòu)建，此時(shí)就是回流。所有頁(yè)面第一次加載時(shí)需要產(chǎn)生一次回流），而visibility切換是否顯示時(shí)則不會(huì)引起回流。
選擇器：通用兄弟選擇器、偽類選擇器、偽元素選擇器、否定選擇器、狀態(tài)偽類選擇器
新樣式：邊框、box-shadow、背景、文字、顏色
邊框：
border-radius：創(chuàng)建圓角邊框
box-shadow：為元素添加陰影
border-image：使用圖片來(lái)繪制邊框
背景：
新增了幾個(gè)關(guān)于背景的屬性，分別是background-clip、background-origin、background-size和background-break
文字：word-wrap、text-overflow、text-shadow、text-decoration
過(guò)渡：transition
轉(zhuǎn)換：transform
動(dòng)畫：animation
其他：漸變、flex彈性布局、Grid柵格布局、媒體查詢、混合模式等等...
硬件加速就是將瀏覽器的渲染過(guò)程交給GPU處理，而不是使用自帶的比較慢的渲染器。這樣就可以使得 animation 與 transition 更加順暢。
我們可以在瀏覽器中用css開啟硬件加速，使GPU (Graphics Processing Unit) 發(fā)揮功能，從而提升性能。
現(xiàn)在大多數(shù)電腦的顯卡都支持硬件加速。鑒于此，我們可以發(fā)揮GPU的力量，從而使我們的網(wǎng)站或應(yīng)用表現(xiàn)的更為流暢。
單冒號(hào)（:）用于CSS3偽類，一般匹配的是元素的一些特殊狀態(tài)，如hover、link等，
雙冒號(hào)（::）用于CSS3偽元素（偽元素由雙冒號(hào)和偽元素名稱組成），而偽元素一般匹配的是特殊位置，比如after、before等。
在新的CSS3中引入的偽元素不允許再支持舊的單冒號(hào)是寫法
想讓插入的內(nèi)容出現(xiàn)在其它內(nèi)容前，使用::before，反之使用::after，在代碼順序上，::after生成的內(nèi)容也比::before生成的內(nèi)容靠后
偽類
相信大多數(shù)初學(xué)者都會(huì)認(rèn)為CSS匹配是左向右的，其實(shí)恰恰相反。
CSS匹配發(fā)生在Render Tree構(gòu)建時(shí)（Chrome Dev Tools將其歸屬于Layout過(guò)程）。此時(shí)瀏覽器構(gòu)建出了DOM，而且拿到了CSS樣式，此時(shí)要做的就是把樣式跟DOM上的節(jié)點(diǎn)對(duì)應(yīng)上，瀏覽器為了提高性能需要做的就是快速匹配。
首先要明確一點(diǎn)，瀏覽器此時(shí)是給一個(gè)"可見"節(jié)點(diǎn)找對(duì)應(yīng)的規(guī)則，這和jQuery選擇器不同，后者是使用一個(gè)規(guī)則去找對(duì)應(yīng)的節(jié)點(diǎn)，這樣從左到右或許更快。但是對(duì)于前者，由于CSS的龐大，一個(gè)CSS文件中或許有上千條規(guī)則，而且對(duì)于當(dāng)前節(jié)點(diǎn)來(lái)說(shuō)，大多數(shù)規(guī)則是匹配不上的，稍微想一下就知道，如果從右開始匹配（也是從更精確的位置開始），能更快排除不合適的大部分節(jié)點(diǎn)，而如果從左開始，只有深入了才會(huì)發(fā)現(xiàn)匹配失敗，如果大部分規(guī)則層級(jí)都比較深，就比較浪費(fèi)資源了。
除了上面這點(diǎn)，我們前面還提到DOM構(gòu)建是"循序漸進(jìn)的"，而且DOM不阻塞Render Tree構(gòu)建（只有CSSOM阻塞），這樣也是為了能讓頁(yè)面更早有元素呈現(xiàn)。
考慮如下情況，如果我們此時(shí)構(gòu)建的只是部分DOM，而CSSOM構(gòu)建完成，瀏覽器就會(huì)構(gòu)建Render Tree。
這個(gè)時(shí)候?qū)γ恳粋€(gè)節(jié)點(diǎn)，如果找到一條規(guī)則從右向左匹配，我們只需要逐層觀察該節(jié)點(diǎn)父節(jié)點(diǎn)是否匹配，而此時(shí)其父節(jié)點(diǎn)肯定已經(jīng)在DOM上。
但是反過(guò)來(lái)，我們可能會(huì)匹配到一個(gè)DOM上尚未存在的節(jié)點(diǎn)，此時(shí)的匹配過(guò)程就浪費(fèi)了資源。
避免過(guò)度約束
避免后代選擇符
避免鏈?zhǔn)竭x擇符
使用緊湊的語(yǔ)法
避免不必要的命名空間
避免不必要的重復(fù)
最好使用表示語(yǔ)義的名字。一個(gè)好的類名應(yīng)該是描述他是什么而不是像什么
避免 !important，可以選擇其他選擇器
盡可能的精簡(jiǎn)規(guī)則，你可以合并不同類里的重復(fù)規(guī)則
頁(yè)面加載自上而下 當(dāng)然是先加載樣式。
寫在body標(biāo)簽后由于瀏覽器以逐行方式對(duì)HTML文檔進(jìn)行解析，當(dāng)解析到寫在尾部的樣式表（外聯(lián)或?qū)懺趕tyle標(biāo)簽）會(huì)導(dǎo)致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之后重新渲染，在windows的IE下可能會(huì)出現(xiàn)FOUC現(xiàn)象（即樣式失效導(dǎo)致的頁(yè)面閃爍問(wèn)題）
當(dāng)按百分比設(shè)定一個(gè)元素的寬度時(shí)，它是相對(duì)于父容器的寬度計(jì)算的，但是，對(duì)于一些表示豎向距離的屬性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，當(dāng)按百分比設(shè)定它們時(shí)，依據(jù)的也是父容器的寬度，而不是高度。
transition 是過(guò)度屬性，強(qiáng)調(diào)過(guò)度，它的實(shí)現(xiàn)需要觸發(fā)一個(gè)事件（比如鼠標(biāo)移動(dòng)上去，焦點(diǎn)，點(diǎn)擊等）才執(zhí)行動(dòng)畫。它類似于flash的補(bǔ)間動(dòng)畫，設(shè)置一個(gè)開始關(guān)鍵幀，一個(gè)結(jié)束關(guān)鍵幀。
animation 是動(dòng)畫屬性，它的實(shí)現(xiàn)不需要觸發(fā)事件，設(shè)定好時(shí)間之后可以自己執(zhí)行，且可以循環(huán)一個(gè)動(dòng)畫。它也類似于flash的補(bǔ)間動(dòng)畫，但是它可以設(shè)置多個(gè)關(guān)鍵幀（用@keyframe定義）完成動(dòng)畫。
當(dāng)對(duì)一個(gè)文檔進(jìn)行布局（layout）的時(shí)候，瀏覽器的渲染引擎會(huì)根據(jù)標(biāo)準(zhǔn)之一的 CSS 基礎(chǔ)框盒模型（CSS basic box model），將所有元素表示為一個(gè)個(gè)矩形的盒子（box）
一個(gè)盒子由四個(gè)部分組成：content、padding、border、margin
標(biāo)準(zhǔn)盒子模型：標(biāo)準(zhǔn)盒子模型，是瀏覽器默認(rèn)的盒子模型
從上圖可以看到：
盒子總寬度 = width + padding + border + margin;
盒子總高度 = height + padding + border + margin
也就是，width/height 只是內(nèi)容高度，不包含 padding 和 border 值
所以上面問(wèn)題中，設(shè)置width為200px，但由于存在padding，但實(shí)際上盒子的寬度有240px
IE 怪異盒子模型
從上圖可以看到：
盒子總寬度 = width + margin;
盒子總高度 = height + margin;
也就是，width/height 包含了 padding 和 border 值
Atom CSS：原子CSS，意思是一個(gè)類只干一件事。
不同于大家常用的BEM這類規(guī)則，原子css就是拆分，所有 CSS 類都有一個(gè)唯一的 CSS 規(guī)則
優(yōu)點(diǎn)
減少了css體積，提高了css復(fù)用
減少起名的復(fù)雜度
缺點(diǎn)
增加了記憶成本。將css拆分為原子之后，你勢(shì)必要記住一些class才能書寫，哪怕 tailwindcss 提供了完善的工具鏈，你寫background，也要記住開頭是bg。
增加了html結(jié)構(gòu)的復(fù)雜性。當(dāng)整個(gè)dom都是這樣class名，勢(shì)必會(huì)帶來(lái)調(diào)試的麻煩，有的時(shí)候很難定位具體css問(wèn)題
你仍需要起class名。對(duì)于大部分屬性而言，你可以只用到center,auto，100%，這些值，但是有時(shí)候你仍需要設(shè)定不一樣的參數(shù)值，例如left，top，這時(shí)候你還需要起一個(gè)class名
float：使用 float 脫離文檔流時(shí)，其他盒子會(huì)無(wú)視這個(gè)元素，但其他盒子內(nèi)的文本依然會(huì)為這個(gè)元素讓出位置，環(huán)繞在該元素的周圍。
absolute：absolute 稱為絕對(duì)定位，是相對(duì)于該元素的父類（及以上，如果直系父類元素不滿足條件則繼續(xù)向上查詢）元素進(jìn)行定位的，并且這個(gè)父類元素的position必須是非static定位的（static是默認(rèn)定位方式）。
fixed: 固定定位，完全脫離文檔流，相對(duì)于瀏覽器窗口進(jìn)行定位。（相對(duì)于瀏覽器窗口就是相對(duì)于html）
瀏覽器會(huì)下載 HTML 解析頁(yè)面生成 DOM 樹，遇到 CSS 標(biāo)簽就開始解析 CSS，這個(gè)過(guò)程不會(huì)阻塞，但是如果遇到了 JS 腳本，此時(shí)假如 CSSOM 還沒(méi)有構(gòu)建完，需要等待 CSSOM 構(gòu)建完，再去執(zhí)行 JS 腳本，然后再執(zhí)行 DOM 解析，此時(shí)會(huì)阻塞。
CSS Sprites是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式，就是把網(wǎng)頁(yè)中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進(jìn)行背景定位。
優(yōu)點(diǎn)：
減少網(wǎng)頁(yè)的http請(qǐng)求，提高性能，這也是CSS Sprites最大的優(yōu)點(diǎn)，也是其被廣泛傳播和應(yīng)用的主要原因；
減少圖片的字節(jié)：多張圖片合并成1張圖片的字節(jié)小于多張圖片的字節(jié)總和；
減少了命名困擾：只需對(duì)一張集合的圖片命名，不需要對(duì)每一個(gè)小元素進(jìn)行命名提高制作效率；
缺點(diǎn)：
圖片合成比較麻煩；
背景設(shè)置時(shí)，需要得到每一個(gè)背景單元的精確位置；
維護(hù)合成圖片時(shí)，最好只是往下加圖片，而不要更改已有圖片。
多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms。
canvas標(biāo)簽的width和height是畫布實(shí)際寬度和高度，繪制的圖形都是在這個(gè)上面。
而style的width和height是canvas在瀏覽器中被渲染的高度和寬度。
如果canvas的width和height沒(méi)指定或值不正確，就被設(shè)置成默認(rèn)值。
真正意義上的inline-block水平呈現(xiàn)的元素間，換行顯示或空格分隔的情況下會(huì)有間距，很簡(jiǎn)單的個(gè)例子：
<input /> <input type="submit" />
我們使用CSS更改非inline-block水平元素為inline-block水平，也會(huì)有該問(wèn)題
這種表現(xiàn)是符合規(guī)范的應(yīng)該有的表現(xiàn)。
元素被當(dāng)成行內(nèi)元素排版的時(shí)候，元素之間的空白符（空格、回車換行等）都會(huì)被瀏覽器處理，根據(jù)white-space的處理方式（默認(rèn)是normal，合并多余空白），原來(lái)HTML代碼中的回車換行被轉(zhuǎn)成一個(gè)空白符，在字體不為0的情況下，空白符占據(jù)一定寬度，所以inline-block的元素之間就出現(xiàn)了空隙。這些元素之間的間距會(huì)隨著字體的大小而變化，當(dāng)行內(nèi)元素font-size:16px時(shí)，間距為8px。
不過(guò)，這類間距有時(shí)會(huì)對(duì)我們布局，或是兼容性處理產(chǎn)生影響，以下展示幾種方法去掉
移除空格：元素間留白間距出現(xiàn)的原因就是標(biāo)簽段之間的空格，因此，去掉HTML中的空格，自然間距就木有了
使用margin負(fù)值
.space a {
display: inline-block;
margin-right: -3px;
}使用font-size:0
.space { font-size: 0; }
.space a { font-size: 12px; }使用letter-spacing
.space { letter-spacing: -3px; }
.space a { letter-spacing: 0; }
使用word-spacing
.space { word-spacing: -6px; }
.space a { word-spacing: 0; }他們都是 CSS 預(yù)處理器，是 CSS 上的一種抽象層。他們是一種特殊的語(yǔ)法/語(yǔ)言編譯成 CSS。 例如 Less 是一種動(dòng)態(tài)樣式語(yǔ)言，將 CSS 賦予了動(dòng)態(tài)語(yǔ)言的特性，如變量，繼承，運(yùn)算， 函數(shù)，LESS 既可以在客戶端上運(yùn)行 (支持 IE 6+, Webkit, Firefox)，也可以在服務(wù)端運(yùn)行 (借助 Node.js)。
它們的優(yōu)點(diǎn)？
結(jié)構(gòu)清晰，便于擴(kuò)展。 可以方便地屏蔽瀏覽器私有語(yǔ)法差異。封裝對(duì)瀏覽器語(yǔ)法差異的重復(fù)處理， 減少無(wú)意義的機(jī)械勞動(dòng)。
可以輕松實(shí)現(xiàn)多重繼承。 完全兼容 CSS 代碼，可以方便地應(yīng)用到老項(xiàng)目中。LESS 只是在 CSS 語(yǔ)法上做了擴(kuò)展，所以老的 CSS 代碼也可以與 LESS 代碼一同編譯。
p:first-of-type 選擇屬于其父元素的首個(gè)元素
p:last-of-type 選擇屬于其父元素的最后元素
p:only-of-type 選擇屬于其父元素唯一的元素
p:only-child 選擇屬于其父元素的唯一子元素
p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素
:enabled :disabled 表單控件的禁用狀態(tài)。
:checked 單選框或復(fù)選框被選中
...
1. CSS動(dòng)畫
優(yōu)點(diǎn)
瀏覽器可以對(duì)動(dòng)畫進(jìn)行優(yōu)化
代碼相對(duì)簡(jiǎn)單,性能調(diào)優(yōu)方向固定
對(duì)于幀速表現(xiàn)不好的低版本瀏覽器，CSS3可以做到自然降級(jí)，而JS則需要撰寫額外代碼
缺點(diǎn)
運(yùn)行過(guò)程控制較弱,無(wú)法附加事件綁定回調(diào)函數(shù)
代碼冗長(zhǎng)，想用CSS實(shí)現(xiàn)稍微復(fù)雜一點(diǎn)動(dòng)畫,最后CSS代碼都會(huì)變得非常笨重
2. JS 動(dòng)畫
優(yōu)點(diǎn)
控制能力很強(qiáng), 可以在動(dòng)畫播放過(guò)程中對(duì)動(dòng)畫進(jìn)行控制：開始、暫停、回放、終止、取消都是可以做到的。
動(dòng)畫效果比css3動(dòng)畫豐富,有些動(dòng)畫效果，比如曲線運(yùn)動(dòng),沖擊閃爍,視差滾動(dòng)效果，只有js動(dòng)畫才能完成
CSS3有兼容性問(wèn)題，而JS大多時(shí)候沒(méi)有兼容性問(wèn)題
缺點(diǎn)
代碼的復(fù)雜度高于CSS動(dòng)畫
JavaScript在瀏覽器的主線程中運(yùn)行，而主線程中還有其它需要運(yùn)行的JavaScript腳本、樣式計(jì)算、布局、繪制任務(wù)等,對(duì)其干擾導(dǎo)致線程可能出現(xiàn)阻塞，從而造成丟幀的情況
什么是浮動(dòng)：浮動(dòng)（float）最初是為了讓文字環(huán)繞圖片排布，就想報(bào)紙上面的圖文混排模式。但 Web 開發(fā)人員很快意識(shí)到，任何東西都可以浮動(dòng)，而不僅僅是圖像，所以浮動(dòng)的使用范圍擴(kuò)大了。浮動(dòng)曾被用來(lái)實(shí)現(xiàn)整個(gè)網(wǎng)站頁(yè)面的布局，它使信息列得以橫向排列（默認(rèn)的設(shè)定則是按照這些列在源代碼中出現(xiàn)的順序縱向排列）。目前出現(xiàn)了更新更好的頁(yè)面布局技術(shù)，所以使用浮動(dòng)來(lái)進(jìn)行頁(yè)面布局應(yīng)被看作傳統(tǒng)的布局方法。
什么時(shí)候需要清除浮動(dòng)：
父元素的高度無(wú)法被撐開，影響與父元素同級(jí)的元素
與浮動(dòng)元素同級(jí)的非浮動(dòng)元素（內(nèi)聯(lián)元素）會(huì)跟隨其后
若非第一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁(yè)面顯示的結(jié)構(gòu)。
清除浮動(dòng)的方式：
父級(jí)div定義height
最后一個(gè)浮動(dòng)元素后加空div標(biāo)簽 并添加樣式clear:both。
包含浮動(dòng)元素的父標(biāo)簽添加樣式overflow為hidden或auto。
父級(jí)div定義zoom
IconFont 的使用原理來(lái)自于 css 的 @font-face 屬性。
這個(gè)屬性用來(lái)定義一個(gè)新的字體，基本用法如下：
@font-face {
font-family: <YourFontName>;
src: <url> [<format>],[<source> [<format>]], *;
[font-weight: <weight>];
[font-style: <style>];
}
font-family：為載入的字體取名字。
src：[url]加載字體，可以是相對(duì)路徑，可以是絕對(duì)路徑，也可以是網(wǎng)絡(luò)地址。[format]定義的字體的格式，用來(lái)幫助瀏覽器識(shí)別。主要取值為：【truetype(.ttf)、opentype（.otf）、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)】。
font-weight：定義加粗樣式。
font-style：定義字體樣式。
可以從以下三點(diǎn)進(jìn)行分析
1. 結(jié)構(gòu)
display: none: 會(huì)讓元素完全從渲染樹中消失，渲染的時(shí)候不占據(jù)任何空間, 不能點(diǎn)擊
visibility: hidden:不會(huì)讓元素從渲染樹消失，渲染元素繼續(xù)占據(jù)空間，只是內(nèi)容不可見，不能點(diǎn)擊
opacity: 0: 不會(huì)讓元素從渲染樹消失，渲染元素繼續(xù)占據(jù)空間，只是內(nèi)容不可見，可以點(diǎn)擊
2. 繼承
display: none和opacity: 0：是非繼承屬性，子孫節(jié)點(diǎn)消失由于元素從渲染樹消失造成，通過(guò)修改子孫節(jié)點(diǎn)屬性無(wú)法顯示。
visibility: hidden：是繼承屬性，子孫節(jié)點(diǎn)消失由于繼承了hidden，通過(guò)設(shè)置visibility: visible;可以讓子孫節(jié)點(diǎn)顯示。
3. 性能
display: none: 修改元素會(huì)造成文檔回流,讀屏器不會(huì)讀取display: none元素內(nèi)容，性能消耗較大
visibility: hidden: 修改元素只會(huì)造成本元素的重繪,性能消耗較少讀屏器讀取visibility: hidden元素內(nèi)容
opacity: 0:修改元素會(huì)造成重繪，性能消耗較少
static:
這個(gè)是元素的默認(rèn)定位方式，元素出現(xiàn)在正常的文檔流中，會(huì)占用頁(yè)面空間。
relative: 相對(duì)定位方式，相對(duì)于其原來(lái)的位置進(jìn)行定位。會(huì)占用該元素在文檔中初始的頁(yè)面空間，即在使用top，bottom，left，right進(jìn)行移動(dòng)位置之后依舊不會(huì)改變其所占用空間的位置。可以使用z-index進(jìn)行在z軸方向上的移動(dòng)。
absolute: 絕對(duì)定位方式，脫離文檔流，不會(huì)占用頁(yè)面空間。以最近的不是static定位的父級(jí)元素作為參考進(jìn)行定位，如果其所有的父級(jí)元素都是static定位，那么此元素最終則是以當(dāng)前窗口作為參考進(jìn)行定位。
fixed: 絕對(duì)定位方式，直接以瀏覽器窗口作為參考進(jìn)行定位。其它特性同absolute定位。
當(dāng)父元素使用了transform的時(shí)候，會(huì)以父元素定位。
sticky: 粘性定位，可以簡(jiǎn)單理解為relative和fixed布局的混合。當(dāng)粘性約束矩形在可視范圍內(nèi)為relative，反之，則為fixed粘性定位元素如果和它的父元素一樣高，則垂直滾動(dòng)的時(shí)候，粘性定位效果是不會(huì)出現(xiàn)的，它的定位效果完全受限于父級(jí)元素們。
Flexible Box 簡(jiǎn)稱 flex，意為”彈性布局”，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局
采用Flex布局的元素，稱為flex容器container
它的所有子元素自動(dòng)成為容器成員，稱為flex項(xiàng)目item
容器中默認(rèn)存在兩條軸，主軸和交叉軸，呈90度關(guān)系。項(xiàng)目默認(rèn)沿主軸排列，通過(guò)flex-direction來(lái)決定主軸的方向。每根軸都有起點(diǎn)和終點(diǎn)，這對(duì)于元素的對(duì)齊非常重要
關(guān)于flex常用的屬性，我們可以劃分為容器屬性和容器成員屬性
容器屬性有：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content
容器成員屬性有： order、flex-grow、flex-shrink、flex-basis、flex、align-self
更多屬性寫法可前往 MDN-flex 查看
通常 z-index 的使用是在有兩個(gè)重疊的標(biāo)簽，在一定的情況下控制其中一個(gè)在另一個(gè)的上方或者下方出現(xiàn)。z-index值越大就越是在上層。z-index元素的position屬性需要是relative，absolute或是fixed。
z-index屬性在下列情況下會(huì)失效：
父元素position為relative時(shí)，子元素的z-index失效。解決：父元素position改為absolute或static；
元素沒(méi)有設(shè)置position屬性為非static屬性。解決：設(shè)置該元素的position屬性為relative，absolute或是fixed中的一種；
元素在設(shè)置z-index的同時(shí)還設(shè)置了float浮動(dòng)。解決：float去除，改為display：inline-block；
點(diǎn)擊前往：前端布局之淺談BFC
先說(shuō)下結(jié)論：
css加載不會(huì)阻塞DOM樹的解析
css加載會(huì)阻塞DOM樹的渲染
css加載會(huì)阻塞后面js語(yǔ)句的執(zhí)行
為了避免讓用戶看到長(zhǎng)時(shí)間的白屏?xí)r間，我們應(yīng)該盡可能的提高css加載速度，比如可以使用以下幾種方法:
使用CDN(因?yàn)镃DN會(huì)根據(jù)你的網(wǎng)絡(luò)狀況，替你挑選最近的一個(gè)具有緩存內(nèi)容的節(jié)點(diǎn)為你提供資源，因此可以減少加載時(shí)間)
對(duì)css進(jìn)行壓縮(可以用很多打包工具，比如webpack,gulp等，也可以通過(guò)開啟gzip壓縮)
合理的使用緩存(設(shè)置cache-control,expires,以及E-tag都是不錯(cuò)的，不過(guò)要注意一個(gè)問(wèn)題，就是文件更新后，你要避免緩存而帶來(lái)的影響。其中一個(gè)解決防范是在文件名字后面加一個(gè)版本號(hào))
減少http請(qǐng)求數(shù)，將多個(gè)css文件合并，或者是干脆直接寫成內(nèi)聯(lián)樣式(內(nèi)聯(lián)樣式的一個(gè)缺點(diǎn)就是不能緩存)
瀏覽器渲染的流程如下：
HTML解析文件，生成DOM Tree，解析CSS文件生成CSSOM Tree
將Dom Tree和CSSOM Tree結(jié)合，生成Render Tree(渲染樹)
根據(jù)Render Tree渲染繪制，將像素渲染到屏幕上。
從流程我們可以看出來(lái):
DOM解析和CSS解析是兩個(gè)并行的進(jìn)程，所以這也解釋了為什么CSS加載不會(huì)阻塞DOM的解析。
然而，由于Render Tree是依賴于DOM Tree和CSSOM Tree的，所以他必須等待到CSSOM Tree構(gòu)建完成，也就是CSS資源加載完成(或者CSS資源加載失敗)后，才能開始渲染。因此，CSS加載是會(huì)阻塞Dom的渲染的。
由于js可能會(huì)操作之前的Dom節(jié)點(diǎn)和css樣式，因此瀏覽器會(huì)維持html中css和js的順序。因此，樣式表會(huì)在后面的js執(zhí)行前先加載執(zhí)行完畢。所以css會(huì)阻塞后面js的執(zhí)行。
點(diǎn)擊前往：js 和 css 是如何影響DOM樹構(gòu)建的？
點(diǎn)擊前往：前端頁(yè)面之“回流重繪”
是什么：響應(yīng)式網(wǎng)站設(shè)計(jì)（Responsive Web design）是一種網(wǎng)絡(luò)頁(yè)面設(shè)計(jì)布局，頁(yè)面的設(shè)計(jì)與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整
描述響應(yīng)式界面最著名的一句話就是“Content is like water”，大白話便是“如果將屏幕看作容器，那么內(nèi)容就像水一樣”
響應(yīng)式網(wǎng)站常見特點(diǎn)：
同時(shí)適配PC + 平板 + 手機(jī)等
標(biāo)簽導(dǎo)航在接近手持終端設(shè)備時(shí)改變?yōu)榻?jīng)典的抽屜式導(dǎo)航
網(wǎng)站的布局會(huì)根據(jù)視口來(lái)調(diào)整模塊的大小和位置
基本原理： 響應(yīng)式設(shè)計(jì)的基本原理是通過(guò)媒體查詢檢測(cè)不同的設(shè)備屏幕尺寸做處理 響應(yīng)式設(shè)計(jì)實(shí)現(xiàn)通常會(huì)從以下幾方面思考：
彈性盒子（包括圖片、表格、視頻）和媒體查詢等技術(shù)
使用百分比布局創(chuàng)建流式布局的彈性UI，同時(shí)使用媒體查詢限制元素的尺寸和內(nèi)容變更范圍
使用相對(duì)單位使得內(nèi)容自適應(yīng)調(diào)節(jié)
選擇斷點(diǎn)，針對(duì)不同斷點(diǎn)實(shí)現(xiàn)不同布局和內(nèi)容展示
總結(jié)：
響應(yīng)式布局優(yōu)點(diǎn)：
面對(duì)不同分辨率設(shè)備靈活性強(qiáng)
能夠快捷解決多設(shè)備顯示適應(yīng)問(wèn)題
缺點(diǎn)：
僅適用布局、信息、框架并不復(fù)雜的部門類型網(wǎng)站
兼容各種設(shè)備工作量大，效率低下
代碼累贅，會(huì)出現(xiàn)隱藏?zé)o用的元素，加載時(shí)間加長(zhǎng)
其實(shí)這是一種折中性質(zhì)的設(shè)計(jì)解決方案，多方面因素影響而達(dá)不到最佳效果
一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會(huì)出現(xiàn)用戶混淆的情況
理解： 預(yù)處理語(yǔ)言擴(kuò)充了css語(yǔ)言，增加了諸如變量、混合（mixin）、函數(shù)等功能，讓 css 更易維護(hù)、方便。本質(zhì)上，預(yù)處理是css的超集，包含一套自定義的語(yǔ)法及一個(gè)解析器，根據(jù)這些語(yǔ)法定義自己的樣式規(guī)則，這些規(guī)則最終會(huì)通過(guò)解析器，編譯生成對(duì)應(yīng)的 css 文件
有哪些： css預(yù)編譯語(yǔ)言在前端里面有三大優(yōu)秀的預(yù)編處理器，分別是：sass、less、stylus
1px邊框問(wèn)題由來(lái)： 蘋果 iPhone4 首次提出了 Retina Display（視網(wǎng)膜屏幕）的概念，在 iPhone4 使用的視網(wǎng)膜屏幕中，把 2x2 個(gè)像素當(dāng) 1 個(gè)物理像素使用，即使用 2x2 個(gè)像素顯示原來(lái) 1 個(gè)物理像素顯示的內(nèi)容，從而讓 UI 顯示更精致清晰，這 2x2 個(gè)像素叫做邏輯像素。
像這種像素比（像素比（即dpr）＝ 物理像素 / 邏輯像素）為 2 的視網(wǎng)膜屏幕也被稱為二倍屏，目前市面上還有像素比更高的三倍屏、四倍屏。
而 CSS 中 1px 指的是物理像素，因此，設(shè)置為 1px 的邊框在 dpr = 2 的視網(wǎng)膜屏幕中實(shí)際占用了 2 個(gè)邏輯像素的寬度，這就導(dǎo)致了界面邊框變粗的視覺體驗(yàn)。
解決方案：使用 transform 解決
通過(guò)設(shè)置元素的 box-sizing 為 border-box，然后構(gòu)建偽元素，再使用 CSS3 的 transform 縮放，這是目前市面上最受推崇的解決方法。這種方法可以滿足所有的場(chǎng)景，而且修改靈活，唯一的缺陷是，對(duì)于已使用偽元素的元素要多嵌套一個(gè)無(wú)用元素。具體的實(shí)現(xiàn)如下：
.one-pixel-border {
position: relative;
box-sizing: border-box;
}
.one-pixel-border::before {
display: block;
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
border: 1px solid red;
transform: translate(-50%, -50%) scale(0.5, 0.5);
}
這樣就可以得到 0.5px 的邊框。
還可以結(jié)合媒體查詢（@media）解決不同 dpr 值屏幕的邊框問(wèn)題，如下：
@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
...
}
@media screen and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
...
}
當(dāng)然還有不少其他的解決方案：border-image、background-image、viewport + rem + js、box-shadow等，但都有各自的缺點(diǎn)，不進(jìn)行推薦，此處也不做詳細(xì)介紹。
以下代碼可解決這種卡頓的問(wèn)題：
-webkit-overflow-scrolling: touch;
是因?yàn)檫@行代碼啟用了硬件加速特性，所以滑動(dòng)很流暢。
px 像素（Pixel）。絕對(duì)單位。像素 px 是相對(duì)于顯示器屏幕分辨率而言的，是一 個(gè)虛擬長(zhǎng)度單位，是計(jì)算機(jī)系統(tǒng)的數(shù)字化圖像長(zhǎng)度單位
em 是相對(duì)長(zhǎng)度單位，相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。如當(dāng)前對(duì)行內(nèi)文本的字 體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。它會(huì)繼承父級(jí)元素的字體大 小，因此并不是一個(gè)固定的值
rem 是 CSS3 新增的一個(gè)相對(duì)單位（root em，根 em），使用 rem 為元素設(shè)定字 體大小時(shí)，仍然是相對(duì)大小，但相對(duì)的只是 HTML 根元素
區(qū)別： IE 無(wú)法調(diào)整那些使用 px 作為單位的字體大小，而 em 和 rem 可以縮放，rem 相對(duì)的只是 HTML 根元素。這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身，通過(guò)它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐 層復(fù)合的連鎖反應(yīng)。目前，除了 IE8 及更早版本外，所有瀏覽器均已支持 rem。
點(diǎn)擊前往：如何使用 CSS 提高頁(yè)面性能？
letter-spacing作用于所有字符，但word-spacing僅作用于空格字符。換句話說(shuō)，word-spacing的作用就是增加空格的間隙寬度。
沒(méi)有設(shè)置left/top/right/bottom屬性值的絕對(duì)定位稱為“無(wú)依賴絕對(duì)定位”。無(wú)依賴絕對(duì)定位其定位的位置和沒(méi)有設(shè)置position:absolute時(shí)候的位置相關(guān)。
（1）誰(shuí)大誰(shuí)上：當(dāng)具有明顯的層疊水平標(biāo)識(shí)的時(shí)候，如生效的z-index屬性值，在同一個(gè)層疊上下文領(lǐng)域，層疊水平值大的那一個(gè)覆蓋小的那一個(gè)。
（2）后來(lái)居上：當(dāng)元素的層疊水平一致、層疊順序相同的時(shí)候，在DOM流中處于后面的元素會(huì)覆蓋前面的元素。
如果使用數(shù)值作為font-weight屬性值，必須是100～900的整百數(shù)。因?yàn)檫@里的數(shù)值僅僅是外表長(zhǎng)得像數(shù)值，實(shí)際上是一個(gè)具有特定含義的關(guān)鍵字，并且這里的數(shù)值關(guān)鍵字和字母關(guān)鍵字之間是有對(duì)應(yīng)關(guān)系的。
（1）text-indent 僅對(duì)第一行內(nèi)聯(lián)盒子內(nèi)容有效。
（2）非替換元素以外的 display 計(jì)算值為 inline 的內(nèi)聯(lián)元素設(shè)置 text-indent值無(wú)效，如果計(jì)算值 inline-block/inline-table 則會(huì)生效。
（3）<input>標(biāo)簽按鈕 text-indent 值無(wú)效。
（4）<button>標(biāo)簽按鈕 text-indent 值有效。
（5）text-indent 的百分比值是相對(duì)于當(dāng)前元素的“包含塊”計(jì)算的，而不是當(dāng)前元素。
優(yōu)點(diǎn)：在屏幕分辨率千差萬(wàn)別的時(shí)代，只要將rem與屏幕分辨率關(guān)聯(lián)起來(lái)就可以實(shí)現(xiàn)頁(yè)面的整體縮放，使得在設(shè)備上的展現(xiàn)都統(tǒng)一起來(lái)了。 而且現(xiàn)在瀏覽器基本都已經(jīng)支持rem了，兼容性也非常的好。
缺點(diǎn)：
（1）在奇葩的dpr設(shè)備上表現(xiàn)效果不太好，比如一些華為的高端機(jī)型用rem布局會(huì)出現(xiàn)錯(cuò)亂。
（2）使用iframe引用也會(huì)出現(xiàn)問(wèn)題。
（3）rem在多屏幕尺寸適配上與當(dāng)前兩大平臺(tái)的設(shè)計(jì)哲學(xué)不一致。即大屏的出現(xiàn)到底是為了看得又大又清楚，還是為了看的更多的問(wèn) 題。
“首選最小寬度”，指的是元素最適合的最小寬度。 東亞文字（如中文）最小寬度為每個(gè)漢字的寬度。 西方文字最小寬度由特定的連續(xù)的英文字符單元決定。并不是所有的英文字符都會(huì)組成連續(xù)單元，一般會(huì)終止于空格（普通空格）、短橫線、問(wèn)號(hào)以及其他非英文字符等。
如果想讓英文字符和中文一樣，每一個(gè)字符都用最小寬度單元，可以試試使用CSS中的word-break:break-all。
對(duì)于普通文檔流中的元素，百分比高度值要想起作用，其父級(jí)必須有一個(gè)可以生效的高度值。
原因是如果包含塊的高度沒(méi)有顯式指定（即高度由內(nèi)容決定），并且該元素不是絕對(duì)定位，則計(jì)算值為auto，因?yàn)榻忉尦闪薬uto，所以無(wú)法參與計(jì)算。
使用絕對(duì)定位的元素會(huì)有計(jì)算值，即使祖先元素的height計(jì)算為auto也是如此。
（1）max-width 會(huì)覆蓋 width，即使 width 是行類樣式或者設(shè)置了 !important。
（2）min-width 會(huì)覆蓋 max-width，此規(guī)則發(fā)生在 min-width 和 max-width 沖突的時(shí)候。
（1）內(nèi)容區(qū)域（content area）。內(nèi)容區(qū)域指一種圍繞文字看不見的盒子，其大小僅受字符本身特性控制，本質(zhì)上是一個(gè)字符盒子 （character box）；但是有些元素，如圖片這樣的替換元素，其內(nèi)容顯然不是文字，不存在字符盒子之類的，因此，對(duì)于這些 元素，內(nèi)容區(qū)域可以看成元素自身。
（2）內(nèi)聯(lián)盒子（inline box）?！皟?nèi)聯(lián)盒子”不會(huì)讓內(nèi)容成塊顯示，而是排成一行，這里的“內(nèi)聯(lián)盒子”實(shí)際指的就是元素的“外在盒 子”，用來(lái)決定元素是內(nèi)聯(lián)還是塊級(jí)。該盒子又可以細(xì)分為“內(nèi)聯(lián)盒子”和“匿名內(nèi)聯(lián)盒子”兩類。
（3）行框盒子（line box），每一行就是一個(gè)“行框盒子”（實(shí)線框標(biāo)注），每個(gè)“行框盒子”又是由一個(gè)一個(gè)“內(nèi)聯(lián)盒子”組成的。
（4）包含塊（containing box），由一行一行的“行框盒子”組成。
content屬性生成的對(duì)象稱為“匿名替換元素”。
（1）我們使用content生成的文本是無(wú)法選中、無(wú)法復(fù)制的，好像設(shè)置了user select:none聲明一般，但是普通元素的文本卻可以被輕松選中。同時(shí)，content生成的文本無(wú)法被屏幕閱讀設(shè)備讀取，也無(wú)法被搜索引擎抓取，因此，千萬(wàn)不要自以為是地把重要的文本信息使用content屬性生成，因?yàn)檫@對(duì)可訪問(wèn)性和SEO都很不友好。
（2）content生成的內(nèi)容不能左右:empty偽類。
（3）content動(dòng)態(tài)生成值無(wú)法獲取。
margin的'auto'可不是擺設(shè)，是具有強(qiáng)烈的計(jì)算意味的關(guān)鍵字，用來(lái)計(jì)算元素對(duì)應(yīng)方向應(yīng)該獲得的剩余間距大小。但是觸發(fā)mar gin:auto計(jì)算有一個(gè)前提條件，就是width或height為auto時(shí)，元素是具有對(duì)應(yīng)方向的自動(dòng)填充特性的。
（1）如果一側(cè)定值，一側(cè)auto，則auto為剩余空間大小。
（2）如果兩側(cè)均是auto，則平分剩余空間。
（1）一個(gè)設(shè)置了overflow:hidden聲明的元素，假設(shè)同時(shí)存在border屬性和padding屬性，則當(dāng)子元素內(nèi)容超出容器寬度 高度限制的時(shí)候，剪裁的邊界是border box的內(nèi)邊緣，而非padding box的內(nèi)邊緣。
（2）HTML中有兩個(gè)標(biāo)簽是默認(rèn)可以產(chǎn)生滾動(dòng)條的，一個(gè)是根元素，另一個(gè)是文本域。
（3）滾動(dòng)條會(huì)占用容器的可用寬度或高度。
（4）元素設(shè)置了overflow:hidden聲明，里面內(nèi)容高度溢出的時(shí)候，滾動(dòng)依然存在，僅僅滾動(dòng)條不存在！
<style type="text/css">
#parent p { background-color: red; }
div .a.b.c.d.e.f.g.h.i.j.k p{ background-color: green;
</style>
......
<div id="parent">
<div class="a b c d e f g h i j k">
<p>xxxx</p>
</div>
</div>
大家需要注意，權(quán)重是按優(yōu)先級(jí)進(jìn)行比較的，而不是相加規(guī)則。
答案：red。
body#god div.dad span.son {
width: 200px;
}
body#god span#test {
width: 250px;
}
本題考察css的樣式優(yōu)先級(jí)權(quán)重，大家需要記住：
當(dāng)兩個(gè)權(quán)值進(jìn)行比較的時(shí)候，是從高到低逐級(jí)將等級(jí)位上的權(quán)重值（如 權(quán)值 1,0,0,0 對(duì)應(yīng)--> 第一等級(jí)權(quán)重值，第二等級(jí)權(quán)重值，第三等級(jí)權(quán)重值，第四等級(jí)權(quán)重值）來(lái)進(jìn)行比較的，而不是簡(jiǎn)單的 1000個(gè)數(shù) + 100個(gè)數(shù) + 10個(gè)數(shù) + 1個(gè)數(shù) 的總和來(lái)進(jìn)行比較的，換句話說(shuō)，低等級(jí)的選擇器，個(gè)數(shù)再多也不會(huì)越等級(jí)超過(guò)高等級(jí)的選擇器的優(yōu)先級(jí)的。 所以本題的分析思路是：
先比較高權(quán)重位，即第一個(gè)樣式的高權(quán)重為 #god = 100
第二個(gè)樣式的高權(quán)重為 #god + #text = 200
100 < 200
所以最終計(jì)算結(jié)果是取 width: 250px;
若兩個(gè)樣式的高權(quán)重?cái)?shù)量一樣的話，則需要比較下一個(gè)高權(quán)重！
答案：width: 250px;
<div class="container">
<div style="height: 100px"></div>
<div style="min-height: 10px"></div>
</div>
<style>
.container{
display: flex;
}
.container > div {
width: 100px;
}
</style>
Flex 布局會(huì)默認(rèn)：
把所有子項(xiàng)變成水平排列。
默認(rèn)不自動(dòng)換行。
讓子項(xiàng)與其內(nèi)容等寬，并把所有子項(xiàng)的高度變?yōu)樽罡咦禹?xiàng)的高度。
答案：100px
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
最簡(jiǎn)單的方法：
html {
touch-action: none;
touch-action: pan-y;
}
還可以直接指定對(duì)應(yīng)元素的寬度和overflow：
html {
width: 100vw;
overflow-x: hidden;
}
.box {
width: 0;
height: 0;
border-style:solid;
border-width: 0 50px 50px;
border-color: transparent transparent #d9534f;
}
兩欄布局
浮動(dòng)實(shí)現(xiàn)
<style>
.box{
overflow: hidden;
}
.left {
float: left;
width: 200px;
background-color: gray;
height: 400px;
}
.right {
margin-left: 210px;
background-color: lightgray;
height: 200px;
}
</style>
<div class="box">
<div class="left">左邊</div>
<div class="right">右邊</div>
</div>
flex實(shí)現(xiàn)
<style>
.box{
display: flex;
}
.left {
width: 100px;
background-color: skyblue;
height: 400px;
}
.right {
flex: 1;
background-color: pink;
height: 200px;
}
</style>
<div class="box">
<div class="left">左邊</div>
<div class="right">右邊</div>
</div>
三欄布局
5. 單行文本如何實(shí)現(xiàn)兩端對(duì)齊 <style>
.wrap {
display: flex;
justify-content: space-between;
}
.left,
.right,
.middle {
height: 500px;
}
.left {
width: 200px;
background: coral;
}
.right {
width: 120px;
background: lightblue;
}
.middle {
background: #555;
width: 100%;
margin: 0 20px;
}
</style>
<div class="wrap">
<div class="left">左側(cè)</div>
<div class="middle">中間</div>
<div class="right">右側(cè)</div>
</div>
方法一：添加一行
根據(jù)justify對(duì)最后一行無(wú)效，我們可以新增一行，使該行文本不是最后一行，實(shí)現(xiàn)如下：
<style>
//scss
.item {
height: 32px;
line-height: 32px;
margin-bottom: 8px;
.label {
display: inline-block;
height: 100%;
width: 100px;
text-align: justify;
vertical-align: top;
&::after {
display: inline-block;
width: 100%;
content: '';
height: 0;
}
}
.value {
padding-right: 10px;
}
}
</style>
<div class="item">
<span class="label" >哈哈哈</span>：
<span class="value">哈哈哈</span>
</div>
方法二： text-align-last
text-align-last，該屬性定義的是一段文本中最后一行在被強(qiáng)制換行之前的對(duì)齊規(guī)則。
//scss
.item {
margin-bottom: 8px;
.label {
display: inline-block;
height: 100%;
min-width: 100px;
text-align: justify;
text-align-last: justify;
}
.value {
padding-right: 10px;
}
}
<style type="text/css">
.anima {
width: 800px;
height: 600px;
animation-name: likes;
animation-direction: alternate;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-duration: 1s;
}
@keyframes likes {
0%{
transform: scale(1);
}
25%{
transform: scale(0.9);
}
50%{
transform: scale(0.85);
}
75%{
transform: scale(0.9);
}
100%{
transform: scale(1);
}
}
</style>
<image class="anima" mode="widthFix" @click="nav" src="./1.jpg"></image>
單行文本溢出隱藏
<style>
div {
width: 100px;
height: 100px;
/* 溢出隱藏 */
overflow: hidden;
/* 溢出用省略號(hào)顯示 */
text-overflow: ellipsis;
/* 規(guī)定段落中的文本不進(jìn)行換行 */
white-space: nowrap;
}
</style>
<div>
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
多行文本溢出隱藏
<style>
div {
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
/* 作為彈性伸縮盒子模型顯示 */
display: -webkit-box;
/* 顯示的行數(shù) */
-webkit-line-clamp: 3;
/* 設(shè)置伸縮盒子的子元素排列方式：從上到下垂直排列 */
-webkit-box-orient: vertical;
}
</style>
<div>
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</div>
我們?cè)诓季忠粋€(gè)頁(yè)面時(shí)，通常都會(huì)用到水平居中和垂直居中，處理水平居中很好處理，不外乎就是設(shè)定margin:0 auto;或是text-align:center;,就可以輕松解決掉水平居中的問(wèn)題，但一直以來(lái)最麻煩對(duì)齊問(wèn)題就是「垂直居中」，以下將介紹幾種單純利用CSS垂直居中的方式，只需要理解背后的原理就可以輕松應(yīng)用。
下面為公共代碼：
<style>
.box {
width: 300px;
height: 300px;
background: #ddd;
}
.small {
background: red;
}
</style>
<body>
<div class="box">
<div class="small">small</div>
</div>
</body>
1. absolute + margin實(shí)現(xiàn)
方法一：
.box {
position: relative;
}
.small {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
width: 100px;
height: 100px;
}
方法二：
.box {
position: relative;
}
.small {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100px;
height: 100px;
}
2. absolute + calc 實(shí)現(xiàn)
.box {
position: relative;
}
.small {
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
width: 100px;
height: 100px;
}
3. absolute + transform 實(shí)現(xiàn)
.box {
position: relative;
}
.small {
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
width: 100px;
height: 100px;
}
4. 轉(zhuǎn)行內(nèi)元素
.box {
line-height: 300px;
text-align: center;
font-size: 0px;
}
.small {
padding: 6px 10px;
font-size: 16px;
display: inline-block;
vertical-align: middle;
line-height: 16px;
}
5. 使用flex
方法一：
.box {
display: flex;
justify-content: center;
align-items: center;
}
方法二：
.box {
display: flex;
justify-content: center;
}
.small {
align-self: center;
}
以上就是“前端面試CSS中的高頻考點(diǎn)有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼