寫在前面的棱貌，整理了自己認(rèn)為需要理解的內(nèi)容宝磨。
需要持續(xù)更新...
CSS 盒子模型，box-sizing 屬性的理解
1> CSS 盒模型分為兩種：
-
W3C 標(biāo)準(zhǔn)盒模型：由
margin、border萨惑、padding剩岳、content組成贪婉；盒寬度是 content 內(nèi)容的寬度； -
IE 傳統(tǒng)盒模型：由
margin卢肃、border疲迂、padding、content組成莫湘；盒寬度包括了 content尤蒿、padding、border 寬度幅垮。
2> box-sizing 屬性：
用來控制元素的盒子模型的解析模式腰池，默認(rèn)為content-box。
- content-box：W3C的標(biāo)準(zhǔn)盒子模型忙芒，設(shè)置元素的 height/width 屬性指的是content部分的高/寬
- border-box：IE傳統(tǒng)盒子模型示弓。設(shè)置元素的height/width屬性指的是border + padding + content部分的高/寬
什么是響應(yīng)式設(shè)計(jì)，響應(yīng)式設(shè)計(jì)的基本原理是什么
- 響應(yīng)式網(wǎng)站設(shè)計(jì)是一個(gè)網(wǎng)站能夠兼容多個(gè)終端呵萨，而不是為每一個(gè)終端做一個(gè)特定的版本奏属。
- 基本原理是通過媒體查詢檢測(cè)不同的設(shè)備屏幕尺寸做處理。頁面頭部必須有 meta 聲明的 viewport潮峦。
CSS 解析規(guī)則
-
規(guī)則：
CSS選擇器是從右向左解析囱皿。
若從左向右的匹配，發(fā)現(xiàn)不符合規(guī)則忱嘹，需要進(jìn)行回溯嘱腥，會(huì)損失很多性能。
若從右向左匹配拘悦，先找到所有的最右節(jié)點(diǎn)齿兔，對(duì)于每一個(gè)節(jié)點(diǎn)，向上尋找父節(jié)點(diǎn)直到找到根元素或者滿足條件的匹配規(guī)則础米，則結(jié)束這個(gè)分支的遍歷分苇。
兩種匹配規(guī)則的性能差別很大，是因?yàn)閺挠蚁蜃蟮钠ヅ湓诘谝徊骄秃Y選掉了大量的不符合條件的最右節(jié)點(diǎn)（葉子節(jié)點(diǎn)）椭盏，而從左向右的匹配規(guī)則的性能都浪費(fèi)在了失敗的查找上面组砚。
闡述一下 CSS Sprites
-
定義：
將一個(gè)頁面涉及到的所有圖片都包含到一張大圖中去，然后利用 CSS 的background-image掏颊，background- repeat糟红，background-position的組合進(jìn)行背景定位艾帐。 -
優(yōu)點(diǎn) ：
（1）利用 CSS Sprites 能很好地減少網(wǎng)頁的 http 請(qǐng)求，從而大大的提高頁面的性能盆偿；
（2）CSS Sprites 能減少圖片的字節(jié)柒爸。 -
缺點(diǎn)：
（1）圖片合并時(shí)需預(yù)留好足夠空間，寬屏事扭、高分辨率的屏幕下易出現(xiàn)背景斷裂捎稚；
（2）開發(fā)較麻煩，測(cè)量繁瑣求橄；
（3）維護(hù)麻煩今野，背景少許改動(dòng)有可能影響整張圖片，使得字節(jié)增加還要改動(dòng)css罐农。
常見的兼容性問題条霜？
-
不同瀏覽器的標(biāo)簽?zāi)J(rèn)的 margin 和 padding 不一樣。
* { margin:0; padding:0; } -
IE6 雙邊距 bug：
塊屬性標(biāo)簽 float 后涵亏，又有橫行的 margin 情況下宰睡，在 IE6 顯示 margin 比設(shè)置的大。/* 將其轉(zhuǎn)化為行內(nèi)屬性气筋。*/ display:inline; -
漸進(jìn)識(shí)別的方式：
從總體中逐漸排除局部拆内。首先，巧妙的使用 “9” 這一標(biāo)記宠默，將 IE 瀏覽器從所有情況中分離出來麸恍。接著，再次使用 “+” 將 IE8 和 IE7光稼、IE6 分離開來或南，這樣 IE8已經(jīng)獨(dú)立識(shí)別。{ background-color: #f1ee18; /*所有識(shí)別*/ .background-color: #00deff\9; /*IE6艾君、7、8識(shí)別*/ +background-color: #a200ff; /*IE6肄方、7識(shí)別*/ _background-color: #1e0bd1; /*IE6識(shí)別*/ } -
設(shè)置較小高度標(biāo)簽（一般小于10px）冰垄，在 IE6，IE7 中高度超出自己設(shè)置高度权她。
/* 1. 給超出高度的標(biāo)簽設(shè)置*/ overflow:hidden; /* 2. 設(shè)置行高 line-height 小于你設(shè)置的高度 */虹茶。 IE 下，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性隅要，也可以使用getAttribute() 獲取自定義屬性蝴罪；Firefox下，只能使用 getAttribute() 獲取自定義屬性
解決方法：
統(tǒng)一通過getAttribute()獲取自定義屬性步清。-
Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示
p { font-size:10px; -webkit-transform:scale(0.8); } /* -webkit-text-size-adjust: none; 這個(gè)屬性值可能會(huì)有些問題 */ 超鏈接訪問過后 hover 樣式就不出現(xiàn)了要门，被點(diǎn)擊訪問過的超鏈接樣式不再具有 hover 和 active 了虏肾。
解決方法：
改變CSS屬性的排列順序：L-V-H-A ( love hate ):
a:link {}a:visited {}a:hover {}a:active {}
為什么要初始化CSS樣式
因?yàn)闉g覽器的兼容問題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的欢搜，如果沒對(duì) CSS 初始化往往會(huì)出現(xiàn)瀏覽器之間的頁面顯示差異。
CSS3有哪些新特性
- 顏色：新增 RGBA吹埠、HSLA模式
- 文字陰影：text-shadow
- 邊框：border-radius【圓角】廓推，border-image【邊框圖片】，box-shadow【邊框陰影】
- 盒子模型：box-sizing
- 背景：background-size【背景圖片的尺寸】，background-origin【設(shè)置背景圖片的原點(diǎn)】太闺，background-clip【設(shè)置背景圖片的裁剪區(qū)域】最住，以“，”分隔可以設(shè)置多背景，用于自適應(yīng)布局
- 漸變：linear-gradient(to direction, color, ...)、radial-gradient
- 過渡：transition可實(shí)現(xiàn)動(dòng)畫
- 自定義動(dòng)畫：animation
- 在CSS3中唯一引入的偽元素是 ::selection
- 實(shí)現(xiàn)媒體查詢 @media遵湖，多欄布局 Flex
- 2D轉(zhuǎn)換：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
- 3D轉(zhuǎn)換
CSS3 新增偽類垄潮？
- p:first-of-type
- p:last-of-type
- p:only-of-type
- p:only-child
- p:nth-child(2)
- :enabled
- :disabled
- :checked
CSS優(yōu)化逢勾、提高性能的方法有哪些
- 移除空的 CSS 規(guī)則
- 抽象提取公共樣式，減少代碼量
- 不在選擇符中使用 ID 標(biāo)識(shí)符
- 盡量減少頁面重排沐扳、重繪：正確使用 display 的屬性
- 不濫用浮動(dòng)纱烘、web字體
- 不聲明過多的 font-size
- 遵守盒模型規(guī)則
說一下 CSS 預(yù)處理器哺壶，Less 帶來的好處芭逝？
-
CSS預(yù)處理器：
為 CSS 增加了編程特性的拓展語言翎猛，可以使用變量懊缺、簡(jiǎn)單邏輯判斷俊扳、函數(shù)等基本編程技巧宽堆。CSS 預(yù)處理器編譯輸出依舊是標(biāo)準(zhǔn)的 CSS 樣式冤馏。 -
解決問題：
（1）CSS 語法不夠強(qiáng)大日麸，因?yàn)闊o法嵌套導(dǎo)致有很多重復(fù)的選擇器；
（2）沒有變量和合理的樣式機(jī)制逮光，導(dǎo)致邏輯上相關(guān)的屬性值只能以字面量的形式重復(fù)輸出代箭，難以維護(hù)。 -
優(yōu)點(diǎn)：
（1）容易維護(hù)：減少了大量的重復(fù)選擇器涕刚，避免了一些樣式的低級(jí)錯(cuò)誤嗡综；
（2）提高復(fù)用性：使用變量維護(hù)某個(gè)屬性值，修改方便杜漠；
（3）減少代碼：常用代碼使用代碼塊极景；
（4）生成更加復(fù)雜的樣式：提供了顏色函數(shù)（lighten，darken 等）驾茴，mixins盼樟，loops 等方法，使 CSS 更像編程語言锈至，能夠讓開發(fā)者生成更復(fù)雜的 CSS 樣式晨缴。 -
缺點(diǎn)
編譯需要一定的時(shí)間 -
補(bǔ)充
Less、Sass 都是動(dòng)態(tài)的樣式語言峡捡，是 CSS 預(yù)處理器击碗， CSS 上的一種抽象層筑悴。
Less 變量符號(hào)是 @，Sass 變量符號(hào)是 $ 稍途。
CSS 偽類和偽元素阁吝？
-
偽類：
（1）用于當(dāng)元素處于某個(gè)狀態(tài)時(shí)，為其添加對(duì)應(yīng)的樣式械拍，這個(gè)狀態(tài)是根據(jù)用戶行為而動(dòng)態(tài)變化的突勇，功能類似于 class。但它是基于 DOM 樹之外的信息殊者，所以叫偽類与境。例如：:hoveractive
（2）用單冒號(hào)(:)來表示 -
偽元素：
（1）DOM 樹沒有定義的虛擬元素，通常用來創(chuàng)建不存在于文檔中的元素猖吴。比如：::after::before
（2）起初摔刁，是用單冒號(hào)(:)表示；后來被規(guī)范成雙冒號(hào)(::)表示
CSS選擇器有哪些海蔽？哪些屬性可以繼承共屈？
CSS選擇器：
(1) id選擇器
(2) 類選擇器
(3) 標(biāo)簽選擇器
(4) 相鄰選擇器（h1 + p）
(5)子選擇器（ul > li）
(6) 后代選擇器（li a）
(7) 通配符選擇器（*）
(8) 屬性選擇器（a[rel="external"]）
(9) 偽類選擇器（a:hover，li:nth-child）可繼承的屬性：
1> 字體系列屬性：
font党窜，font-family拗引， font-weight，font-size幌衣，font-style矾削，font-variant；
2> 文本系列屬性：
text-indent‘豁护，text-align哼凯，line-height，word-spacing楚里，letter-spacing断部，text-transform，direction班缎，color
3> 元素可見性：
visibility
4> 表格布局屬性：
caption-style蝴光，border-collapse，border-spacing达址，empty-cells蔑祟，table-layout
5> 列表屬性：
list-style-type，list-style-position沉唠，list-style
6> 光標(biāo)屬性：
cursor
7> 引用：
quotes不可繼承的屬性：border做瞪，padding，margin，width装蓬，height
1> display
2> 文本屬性：
vertical-align，text-decoration
3> 盒子模型屬性：
height纱扭，width牍帚，padding，margin乳蛾，border
4> 背景屬性：
背景圖片暗赶，顏色，位置肃叶；
5> 定位屬性：
float蹂随，clear（清除浮動(dòng)），position因惭，
6> 生成內(nèi)容：
content岳锁，counter-reset，counter-increment
7> 輪廓樣式屬性：
outline-style蹦魔，outline-width激率，outline-color，outline
8> 頁面樣式屬性：
size勿决，page-break-before乒躺，page-break-after
CSS優(yōu)先級(jí)算法如何計(jì)算？
-
可以給選擇器假設(shè)權(quán)重值：
id選擇器權(quán)重假設(shè)為 100
class/偽類選擇器假設(shè)為 10
標(biāo)簽選擇器假設(shè)為 1
注意點(diǎn)：
(1) important 聲明的樣式優(yōu)先級(jí)最高低缩，其次是行內(nèi)樣式嘉冒；
(2) 如果優(yōu)先級(jí)相同，則選擇最后出現(xiàn)的樣式咆繁。
(3) 繼承得到的樣式的優(yōu)先級(jí)最低讳推。
元素豎向的百分比設(shè)定是相對(duì)于容器的高度嗎？
- 當(dāng)按百分比設(shè)定一個(gè)元素寬度時(shí)么介，它是相對(duì)于
父容器的寬度計(jì)算的娜遵； - 對(duì)于一些表示豎向距離的屬性，例如
padding-top壤短，padding-bottom设拟，margin-top，margin-bottom等久脯，當(dāng)按百分比設(shè)定它們時(shí)纳胧，依據(jù)的也是父容器的寬度，而不是高度帘撰。
上下 margin 重合問題跑慕？
-
解決方法：在重合元素外包裹一層容器，并觸發(fā)該容器生成一個(gè)BFC
<div class="aside"></div> <!-- 給盒子 main 外面再包一層 div --> <div class="text"> <div class="main"></div> </div>.aside { margin-bottom: 100px; width: 100px; height: 150px; background: #f66; } /* 通過改變此 div 的屬性使兩個(gè)盒子分屬于兩個(gè)不同的 BFC，以此來阻止margin 重疊 */ .main { margin-top: 100px; height: 200px; background: #fcc; } .text { overflow: hidden; }
清除浮動(dòng)核行，什么時(shí)候需要清除浮動(dòng)牢硅，清除浮動(dòng)都有哪些方法
浮動(dòng)的元素是脫離文檔標(biāo)準(zhǔn)流的，如果不清除浮動(dòng)芝雪，就會(huì)造成父元素高度塌陷减余，影響頁面布局。
- 清除浮動(dòng)方法：
（1）為父元素設(shè)置高度惩系；
（2）父容器設(shè)置 overflow: hidden或者auto位岔。
<div style="overflow: hidden;">
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div>
（3）在浮動(dòng)元素下方添加一個(gè)非浮動(dòng)元素
<div>
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
<div style="clear:both;"></div>
</div>
（4）為父元素添加偽元素(推薦)
.clear::after {
content:"";
display:block;
clear:both;
}
display: inline-block 什么時(shí)候會(huì)顯示間隙？
（1）有空格時(shí)候會(huì)有間隙堡牡。解決：刪除除空格
（2）margin 正值的時(shí)候抒抬。解決：margin 使用負(fù)值
（3）使用 font-size 時(shí)候。解決：font-size: 0晤柄、letter-spacing擦剑、word-spacing
position 跟 display、overflow可免、float 這些特性相互疊加后會(huì)怎么樣抓于？
-
屬性介紹：
display 屬性：規(guī)定元素應(yīng)該生成的框的類型；
position 屬性：規(guī)定元素的定位類型浇借；
float 屬性：是一種布局方式捉撮，定義元素在哪個(gè)方向浮動(dòng)。 -
效果：類似于優(yōu)先級(jí)機(jī)制：
position：absolute/fixed 優(yōu)先級(jí)最高妇垢，當(dāng)使用了定位后巾遭，float 不起作用，display 值會(huì)被調(diào)整為 block闯估。
注意：float 或者 absolute 定位的元素灼舍，只能是塊元素或表格。
如何讓一個(gè)不定寬高的盒子水平垂直居中
HTML 頁面結(jié)構(gòu)
<div class="father">
<div class="son">inner</div>
</div>
- flex布局
.father {
display: flex;
justify-content: center;
align-items: center;
}
- 定位 + transform
.father {
position: relative;
}
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
如何實(shí)現(xiàn)一個(gè)最大的正方形涨薪？
width: 100%;
padding-bottom: 100%;
border: 1px solid;
如何畫三角形骑素？
-
原理：
首先，需要把元素的寬度刚夺、高度設(shè)為0献丑。然后設(shè)置邊框樣式。 -
頁面：
<div class="triangle"></div> -
樣式：
.triangle { width: 0; height: 0; border-top: 50px solid blue; border-right: 50px solid red; border-bottom: 50px solid green; border-left: 50px solid yellow; }上述的代碼可以產(chǎn)生的效果如下：
如果想要三角形侠姑，則只需要將其余邊變成透明即可创橄；
.triangle{ width: 0; height: 0; border: 50px solid transparent; border-top: 50px solid blue; }
一行水平居中，多行水平居左莽红？
- html
<div>
<p>文字描述性信息</p>
<div>
- css
div {
width: 300px;
text-align: center;
border: 1px solid;
}
div p {
display: inline-block;
text-align: left;
}
Flex 布局妥畏？
我曾經(jīng)寫過的一篇文章：Flex 布局
兩欄布局邦邦，左邊固定，右邊自適應(yīng)醉蚁，左右不重疊燃辖？
首先定義布局的 html 代碼如下：
<div class="wrapper">
<div class="left">左邊內(nèi)容：寬度固定</div>
<div class="right">右側(cè)內(nèi)容：自適應(yīng)，并且不重合</div>
</div>
(1) 雙 inline-block 布局
.wrapper {
box-sizing: border-box;
font-size: 0;
}
.wrapper > div {
box-sizing: border-box;
display: inline-block;
vertical-align: top;
font-size: 14px;
border: 1px solid green;
}
.wrapper .left {
width: 120px;
}
.wrapper .right {
width: calc(100% - 120px);
}
(2) 雙 float: left 布局
.wrapper {
/* 清除浮動(dòng) */
overflow: auto;
}
.wrapper > div {
box-sizing: border-box;
float: left;
border: 1px solid green;
}
.wrapper .left {
width: 120px;
}
.wrapper .right {
width: calc(100% - 120px);
}
(3) 左側(cè) float馍管，右側(cè) margin-left
.wrapper {
/* 清除浮動(dòng) */
overflow: hidden;
}
.wrapper > div {
box-sizing: border-box;
border: 1px solid green;
}
.wrapper .left {
float: left;
width: 120px;
}
.wrapper .right {
margin-left: 120px;
}
(4) 左側(cè)使用定位郭赐，右側(cè)使用margin-left
.wrapper {
position: relative;
}
.wrapper > div {
box-sizing: border-box;
border: 1px solid green;
}
.wrapper .left {
position: absolute;
width: 120px;
}
.wrapper .right {
margin-left: 120px;
}
(5) 使用 float 與 BFC
.wrapper {
/* 清除浮動(dòng) */
overflow: auto;
}
.wrapper > div {
box-sizing: border-box;
border: 1px solid green;
}
.wrapper .left {
float: left;
}
.wrapper .right {
overflow: auto;
}
(6)使用 flex
.wrapper {
display: flex;
}
.wrapper > div {
box-sizing: border-box;
border: 1px solid green;
}
.wrapper .left {
width: 120px;
}
.wrapper .right {
flex: 1;
}
position 值有哪些？
-
默認(rèn)：static：
按照正常文檔流進(jìn)行排列确沸； -
相對(duì)定位：relative
對(duì)象不可層疊，不脫離文檔流俘陷，參考自身靜態(tài)位置進(jìn)行定位罗捎。 -
絕對(duì)定位：absolute
脫離文檔流。選取最近一個(gè)具有定位設(shè)置的父級(jí)標(biāo)簽進(jìn)行絕對(duì)定位拉盾。如果父級(jí)對(duì)象都沒有設(shè)置定位桨菜，則參考 body 坐標(biāo)原點(diǎn)進(jìn)行定位。 -
固定定位：fixed
脫離文檔流捉偏，相對(duì)于瀏覽器窗口進(jìn)行定位倒得。 -
粘性定位：sticky
主要用在對(duì) scroll 事件的監(jiān)聽上，可以被認(rèn)為是相對(duì)定位和固定定位的混合夭禽。元素在跨越特定閾值前為相對(duì)定位霞掺，之后為固定定位。#wrapper { position: sticky; top: 10px; } /* 在 viewport 視口滾動(dòng)到元素 top 距離小于 10px 之前讹躯，元素為相對(duì)定位菩彬。 之后，元素將固定在與頂部距離 10px 的位置潮梯，直到 viewport 視口回滾到閾值以下骗灶。 */ - 還有一些不常用：inherit，initial
display: none與visibility：hidden的區(qū)別?
- display：none： 元素不占據(jù)空間位置秉馏；會(huì)引起 reflow耙旦，repaint
- visibility： hidden：元素依舊占據(jù)空間位置；會(huì)引起 repaint萝究；
行內(nèi)元素和塊級(jí)元素的區(qū)別免都？
塊級(jí)元素：
div,p,h1-h6,form,ul,li...
（1）各占一行，垂直方向排列糊肤；
（2）可以包含其他塊級(jí)或者行內(nèi)元素琴昆；
（3）高度、行高以及外邊距和內(nèi)邊距都可控制馆揉；
（4）默認(rèn)寬度是它本身父容器的100%（和父元素的寬度一致）业舍，與內(nèi)容無關(guān)。行內(nèi)元素：
span,a,label,input,img,strong,em
（1）水平方向排列，不會(huì)自動(dòng)換行舷暮；
（2）不可以包含塊級(jí)元素态罪，但是可以包含其他行內(nèi)元素或者文本；
（3）行內(nèi)元素設(shè)置width下面、height無效(可以設(shè)置line-height)复颈，margin和padding上下無效；
（4）寬度就是它的文字和圖片的寬度沥割，不可改變耗啦。互相轉(zhuǎn)化：
display: inline：轉(zhuǎn)為行內(nèi)元素
display: block：轉(zhuǎn)為塊級(jí)元素補(bǔ)充
display: inline-block: 顧名思義，匯集了兩種特性机杜；不換行帜讲，又可以設(shè)置對(duì)應(yīng)屬性。
空元素：<br><hr><img><link><meta>
