整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
模型
說下盒模型?
有兩種盒模型，W3C盒模型和IE盒模型。通常說的“IE盒子模型”指的是IE5.5，IE6及其以后，盒模型都為 content-box。當瀏覽器未設置<!doctype>聲明時，盒模型都為 border-box。
通過 css3 的box-sizing屬性，可以更改元素的盒子模型。標準 W3C 盒子模型的范圍包括 margin、border、padding、content，并且 content 部分不包含其他部分。
標準盒模型 box-sizing: content-box
IE 盒子模型的范圍也包括 margin、border、padding、content，和標準 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。IE盒模型 box-sizing: border-box
標準的CSS的盒子模型？
標準盒子模型：寬度=內容的寬度(content)+ border + padding + margin
與低版本IE的盒子模型有什么不同的？
低版本IE盒子模型：寬度=內容寬度(content+border+padding)+ margin
box-sizing屬性？
用來控制元素的盒子模型的解析模式，默認為content-box
context-box：W3C的標準盒子模型，設置元素的 height/width 屬性指的是content部分的高/寬
border-box：IE傳統盒子模型。設置元素的height/width屬性指的是border + padding + content部分的高/寬
盒子模型在不同瀏覽器上的區別
盒子模型是CSS中一個重要的概念，理解了盒子模型才能更好的排版。盒子模型有兩種，分別是IE盒子模型和標準W3C盒子模型。它們對盒子模型的解釋各不相同，先看看我們熟知的標準盒子模型：
標準的w3c盒子模型的范圍包括margin、border、padding、content，并且content部分不包含其他部分。
在來看下IE盒子模型：
IE盒子模型的范圍也包括margin、border、padding、content，和標準w3c盒子模型不同的是：ie盒子模型的content部分包含了border和padding。
例如：
一個盒子的margin為20px，border為1px，padding為10px，content的寬為200px、高為50px，加入用標準盒子模型解釋，那么這個盒子需要占據的位置為：
寬：20*2 + 1 * 2 + 10* 2 + 200=262px, 高：20 * 2 + 1 * 2 + 10 * 2 + 50=112px。
盒子的實際大小為：寬1*2 + 10 * 2 + 200=222px,高1* 2 + 10 * 2 + 50=72px。
假如用IE盒子模型，那么盒子需要占據的位置為：
寬：20 * 2 + 200=240px,高：20 * 2 + 50=70px。
盒子的實際大?。簩?00px,高50px。
一般推薦使用W3C盒子模型，怎樣才算是選擇了標準W3C盒子模型呢？就是在網頁上加DOCKTYPE申明。如果不加，那么各個瀏覽器會根據自己的行為去理解網頁。
CSS3增加了box-sizing屬性，值包括content-box|border-box|inherit。
在我們的重置樣式文件中一般也會重置這個屬性，把box-sizing設置成border-box方便于排版。
水平垂直居中
不定寬高水平垂直居中？
1.通過display：flex；justify-content:center; align-items:center;就可以讓子元素不定寬高水平垂直居中
2.也可以父display：flex；，子設置一個margin：auto；
3.通過css3，給父元素設置相對定位，給子元素設置絕對定位，left：50% top：50% 通過transform：translate(-50%，-50%)拉回自身的寬和高的一半。
4.通過給父元素設置display：table-cell; vertical-align：middle text-align：center 給子元素設置vertical-align：middle text-align：center。就可以讓子元素不定寬高水平垂直居中了。
文字在垂直和水平方向重疊的兩個屬性分別是什么？
垂直方向：line-height。設置成比字體高度還小就可以讓兩行重疊
水平方向：letter-spacing。設置為負值即可實現重疊。
如何居中div
-水平居中1：給 div 設置一個寬度，然后添加 margin:0 auto; 屬性
div{
width: 200px;
margin: 0 auto;
}
-水平居中2：利用 text-align:center 實現
.container{
background: rgba(0, 0, 0, .5);
text-align: center:
font-size: 0;
}
.box{
display: inline-block;
width: 500px;
height: 400px;
background-color: pink;
}
-讓絕對定位的div居中
div{
positionn: absolute;
width: 300px;
height: 300px;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; /* 方便看效果 */
}
-水平垂直居中1
/* 確定容器的寬高，寬500高300 */
div{
position: absolute;
width:500px;
height: 300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px;
background-color: pink;
}
-水平垂直居中2
/* 未知容器寬高，利用 transform 屬性 */
div{
position: absolute;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink;
}
-水平垂直居中3
/* 利用 flex 布局實際使用時應考慮兼容性 */
.container{
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.container div{
width: 100px;
height: 100px;
background-color: pink;
}
為什么margin: 0 auto會讓div居中
margin 可以有4個值，分別對應影響的方向是上，右，下，左， 2個值的時候，對應第一個值是 控制上下距離，第二個值是控制左右， 所以magrgin：0 auto， 就是上下距離為0，auto是自適應，這里指的是左右兩個方向的距離一樣，也就是說，不論你的寬度怎么變化，都是兩個方向距離一樣，形成居中。
要給居中元素一個寬度，否則無效
該元素不可以浮動，否則無效
BFC
什么是BFC？
BFC是W3C CSS2.1規范中的一個概念，在CSS3.0規范中已被修改為flow root。它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。BFC(block formatting context)，中文為“塊級格式化上下文”
對BFC的理解？
BFC規定了內部的Block Box如何布局。
定位方案：
內部的Box會在垂直方向上一個接一個放置。
Box垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰Box的margin會發生重疊。
每個元素的margin box 的左邊，與包含塊border box的左邊相接觸。
BFC的區域不會與float box重疊。
BFC是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。
計算BFC的高度時，浮動元素也會參與計算。
float屬性不為none 【會影響上級元素】
position為absolute或fixed 【會影響上機元素】
display為inline-block, table-cell, table-caption, flex, inline-flex
overflow不為visible, 【建議使用auto/hidden】
<html>根元素
如何觸發BFC？
BFC解決了什么問題？
解決自適應兩欄布局問題：利用BFC的區域不會與float box重疊的規則。
解決浮動后塌陷問題：利用計算BFC的高度時，浮動元素也參與計算規則。
解決垂直margin重疊問題：利用Box垂直方向的距離由margin決定。
屬于同一個BFC(同一個標記)的兩個相鄰Box的margin會發生重疊規則，在一個box外包裹一個容器，讓他生成不同的BFC，這樣就不會margin重疊了。
為什么overflow:hidden能觸發bfc？
塊級格式化上下文 (Block Formatting Context)：
盒子在容器(包含塊)內從上到下一個接一個地放置
兩個兄弟盒之間的豎直距離由 margin 屬性決定
同一個 BFC 內垂直 margin 會合并
盒子的左外邊緣挨著容器(包含塊)的左邊
塊級格式化上下文(BFC) 的特性
BFC 內的浮動不會影響到BFC外部的元素
BFC 的高度會包含其內的浮動元素
BFC 不會和浮動元素重疊
BFC 可以通過 overflow:hidden 等方法創建
所有要處理 margin 折疊，就需要讓兩個元素處于不同的BFC，overflow: hidden正好可以觸發BFC
Position
Position定位值有哪些？
static(默認)：按照正常文檔流進行排列；
relative:相對定位 一般給父元素設置
absolute:絕對定位 一般給子元素設置 相對父元素或祖先帶定位樣式的元素定位
fixed :固定在某個位置，相對瀏覽器窗口固定在一個位置
Inherit:繼承父元素的position值。
absolute的containing block計算方式跟正常流有什么不同？
無論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然后再判斷：
若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
否則,則由這個祖先元素的 padding box 構成。
如果都找不到，則為 initial containing block。
補充：
static(默認的)/relative：簡單說就是它的父元素的內容框(即去掉padding的部分)
absolute: 向上找最近的定位為absolute/relative的元素
fixed: 它的containing block一律為根元素(html/body)
display
display有哪些值？說明他們的作用?
inline(默認)–內聯
none–隱藏
block–塊顯示
table–表格顯示
list-item–項目列表
inline-block
display:none與visibility：hidden的區別？
display：none 不顯示對應的元素，在文檔布局中不再分配空間(回流+重繪)
visibility：hidden 隱藏對應元素，在文檔布局中仍保留原來的空間(重繪)
即是，使用CSS display:none屬性后，HTML元素(對象)的寬度、高度等各種屬性都將“丟失”；而使用visibility:hidden屬性后，HTML元素(對象)僅僅是在視覺上看不見(完全透明)，而它所占據的空間位置任然存在。
display:inline-block 什么時候會顯示間隙？
有空格時候會有間隙 解決：移除空格
margin正值的時候 解決：margin使用負值
使用font-size時候 解決：font-size:0、letter-spacing、word-spacing
overflow屬性定義溢出元素內容區的內容會如何處理?
參數是scroll時候，必會出現滾動條。
參數是auto時候，子元素內容大于父元素時出現滾動條。
參數是visible時候，溢出的內容出現在父元素之外。
參數是hidden時候，溢出隱藏。
visibility屬性有個collapse屬性值？在不同瀏覽器下以后什么區別？
當一個元素的visibility屬性被設置成collapse值后，對于一般的元素，它的表現跟hidden是一樣的。
chrome中，使用collapse值和使用hidden沒有區別。
firefox，opera和IE，使用collapse值和使用display：none沒有什么區別。
position跟display、overflow、float這些特性相互疊加后會怎么樣？
display屬性規定元素應該生成的框的類型；position屬性規定元素的定位類型；float屬性是一種布局方式，定義元素在哪個方向浮動。
類似于優先級機制：position：absolute/fixed優先級最高，有他們在時，float不起作用，display值需要調整。float 或者absolute定位的元素，只能是塊元素或表格。
float浮動
為什么會出現浮動和什么時候需要清除浮動？清除浮動的方式？
浮動元素碰到包含它的邊框或者浮動元素的邊框停留。由于浮動元素不在文檔流中，所以文檔流的塊框表現得就像浮動框不存在一樣。浮動元素會漂浮在文檔流的塊框上。
浮動帶來的問題：
父元素的高度無法被撐開，影響與父元素同級的元素
與浮動元素同級的非浮動元素(內聯元素)會跟隨其后
若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構。
清除浮動的方式：
父級div定義height
最后一個浮動元素后加空div標簽 并添加樣式clear:both。
包含浮動元素的父標簽添加樣式overflow為hidden或auto。
父級div定義zoom
設置元素浮動后，該元素的display值是多少？
自動變成display:block
margin和padding分別適合什么場景使用？
何時使用margin：
需要在border外側添加空白
空白處不需要背景色
上下相連的兩個盒子之間的空白，需要相互抵消時。
需要在border內側添加空白
空白處需要背景顏色
上下相連的兩個盒子的空白，希望為兩者之和。
何時使用padding：
兼容性的問題：在IE5 IE6中，為float的盒子指定margin時，左側的margin可能會變成兩倍的寬度。通過改變padding或者指定盒子的display：inline解決。
選擇器
CSS常用選擇器
標簽選擇器
ID選擇器
類選擇器
組選擇器
通配符選擇器
后代選擇器
子元素選擇器
偽類選擇器
哪些屬性可以繼承？
可繼承的屬性：font-size, font-family, color
不可繼承的樣式：border, padding, margin, width, height
優先級(就近原則)：!important > [ id > class > tag ]
!important 比內聯優先級高
CSS優先級算法如何計算？
元素選擇符： 1
class選擇符： 10
id選擇符：100
元素標簽：1000
!important聲明的樣式優先級最高，如果沖突再進行計算。
如果優先級相同，則選擇最后出現的樣式。
繼承得到的樣式的優先級最低。
CSS3新增偽類有那些?
p:first-of-type 選擇屬于其父元素的首個元素
p:last-of-type 選擇屬于其父元素的最后元素
p:only-of-type 選擇屬于其父元素唯一的元素
p:only-child 選擇屬于其父元素的唯一子元素
p:nth-child(2) 選擇屬于其父元素的第二個子元素
:enabled :disabled 表單控件的禁用狀態。
:checked 單選框或復選框被選中。
::before 和 :after 中雙冒號和單冒號的區別？這2個偽元素的作用？
·在 CSS3 中 : 表示偽類， :: 表示偽元素
·想讓插入的內容出現在其他內容前，使用::befroe。否則，使用::after
Flex布局
常見父項的屬性：
●flex-direction :設置主軸的方向
Row 默認值從左到右
row-reverse 從右到左
column 從上到下
column-reverse 從下到上
●justify-content :設置主軸上的子元素排列方式
flex-start 默認值從頭部開始 如果主軸是x軸，則從左到右
flex-end 從尾部開始排列(但元素的順序還是從左到右)
center 在主軸居中對齊(如果主軸是x軸則水平居中)
space- around 平分剩余空間
space – between 先兩邊貼邊再平分剩余空間(重要)
●flex-wrap :設置子元素是否換行
默認情況下,項目都排在一條線(又稱”軸線”) 上。flex-wrap屬性定義 , flex布局中默認是不換行的。
nowrap 默認值，不換行
wrap 換行
●align-content :設置側軸上的子元素的排列方式(多行)
設置子項在側軸.上的排列方式并且只能用于子項出現換行的情況(多行) , 在單行下是沒有效果的。
flex-start 默認值在側軸的頭部開始排列
flex- end 在側軸的尾部開始排列
center 在側軸中間顯示
space-around 子項在側軸平分剩余空間
space- between 子項在側軸先分布在兩頭,再平分剩余空間
stretch 設置子項元素高度平分父元素高度
●align-items :設置側軸上的子元素排列方式(單行)
該屬性是控制子項在側軸(默認是y軸).上的排列方式在子項為單項(單行)的時候使用
flex-start 從上到下
flex- end 從下到上
center 擠在一起居中(垂直居中)
stretch 拉伸(默認值但是子盒子如果給高度就不會生效)
●flex-flow :復合屬性,相當于同時設置了flex-direction和flex-wrap
flex-dicection: column;
flex-wrap: wrap;
它倆的簡寫可以寫成：
flex-flow: column wrap;
常見子項的屬性：
●flex子項目占的份數
flex屬性定義子項目分配剩余空間,用flex來表示占多少份數。
●align-self控制子項自己在側軸的排列方式
align-self屬性允許單個項目有與其他項目不-樣的對齊方式，可覆蓋align-items屬性。
默認值為auto ,表示繼承父元素的align-items屬性,如果沒有父元素,則等同于stretch。
span:nth-child(2){
/*設置自己在側軸的排列方式*/
align-self:flex-end;
}
●order屬性定義子項的排列順序(前后順序)
數值越小,排列越靠前,默認為0。(這個是左右的形式)
注意:和z-index不-樣。(index是疊羅漢的形式)
flex屬性flex:1到底是什么？
flex屬性 是 flex-grow、flex-shrink、flex-basis三個屬性的縮寫。
推薦使用此簡寫屬性，而不是單獨寫這三個屬性。
flex-grow：定義項目的的放大比例；
默認為0，即使存在剩余空間，也不會放大；
所有項目的flex-grow為1：等分剩余空間(自動放大占位)；
flex-grow為n的項目，占據的空間(放大的比例)是flex-grow為1的n倍。
flex-shrink：定義項目的縮小比例；
默認為1，即 如果空間不足，該項目將縮小；
所有項目的flex-shrink為1：當空間不足時，縮小的比例相同；
flex-shrink為0：空間不足時，該項目不會縮??；
flex-shrink為n的項目，空間不足時縮小的比例是flex-shrink為1的n倍。
flex-basis： 定義在分配多余空間之前，項目占據的主軸空間(main size)，瀏覽器根據此屬性計算主軸是否有多余空間，
默認值為auto，即 項目原本大小；
設置后項目將占據固定空間。
所以flex屬性的默認值為：0 1 auto (不放大會縮小)
flex為none：0 0 auto (不放大也不縮小)
flex為auto：1 1 auto (放大且縮小)
flex為一個非負數字n：該數字為flex-grow的值，
flex：n ；=flex-grow：n；
flex-shrink：1；
flex-basis：0%;
flex為兩個非負數字n1，n2： 分別為flex-grow和flex-shrink的值。
flex：n1 n2；=flex-grow：n1；
flex-shrink：n2；
flex-basis：0%;
flex為一個長度或百分比L：視為flex-basis的值，
flex：L；=flex-grow：1；
flex-shrink：1；
flex-basis：L;
flex為一個非負數字n和一個長度或百分比L：分別為flex-grow和flex-basis的值，
flex：n L；=flex-grow：n；
flex-shrink：1；
flex-basis：L;
可以發現，flex-grow和flex-shrink在flex屬性中不規定值則為1，flex-basis為0%。
flex：1即為flex-grow：1，經常用作自適應布局，將父容器的display：flex，側邊欄大小固定后，將內容區flex：1，內容區則會自動放大占滿剩余空間。
請解釋一下flexbox(彈性盒布局模型),以及適用場景？
該布局模型的目的是提供一種更加高效的方式來對容器中的條目進行布局、對齊和分配空間。在傳統的布局方式中，block 布局是把塊在垂直方向從上到下依次排列的；而 inline 布局則是在水平方向來排列。彈性盒布局并沒有這樣內在的方向限制，可以由開發人員自由操作。
試用場景：彈性布局適合于移動前端開發，在Android和ios上也完美支持。
如何讓DOM元素不顯示在瀏覽器的可視范圍內？
最基本的：
設置display屬性為none，或者設置visiblity為hidden
技巧性：
設置高度為0， 設置透明度為0，設置z-index位置在-1000
一個滿屏品字布局如何設計?
第一種真正的品字：
三塊高寬是確定的；
上面那塊用margin: 0 auto;居中；
下面兩塊用float或者inline-block不換行；
用margin調整位置使他們居中。
第二種全屏的品字布局:
上面的div設置成100%，下面的div分別寬50%，然后使用float或者inline使其不換行。
兼容
常見的兼容性問題？
不同瀏覽器的標簽默認的margin和padding不一樣。*{margin:0;padding:0;}
IE6雙邊距bug：塊屬性標簽float后，又有橫行的margin情況下，在IE6顯示margin比設置的大。hack：display:inline;將其轉化為行內屬性。
漸進識別的方式，從總體中逐漸排除局部。首先，巧妙的使用“9”這一標記，將IE瀏覽器從所有情況中分離出來。接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。
{
background-color: #f1ee18;/*所有識別*/
. background-color: #00deff; /*IE6、7、8識別*/
+background-color:#a200ff;/*IE6、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}
設置較小高度標簽(一般小于10px)，在IE6，IE7中高度超出自己設置高度。hack：給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小于你設置的高度。
IE下，可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性；Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法:統一通過getAttribute()獲取自定義屬性。
Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示,可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。
超鏈接訪問過后hover樣式就不出現了，被點擊訪問過的超鏈接樣式不再具有hover和active了。解決方法是改變CSS屬性的排列順序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}
瀏覽器兼容性有哪些
1. 瀏覽器默認的 margin 和 padding 不同
解決：加一個全局 *{ margin: 0; padding: 0; }來統一
2. 谷歌中文界面下默認會將小于12px 的文本強制按照12px顯示
解決：使用-webkit-transform:scale(.75);收縮的是整個span盒子大小，這時候，必須將span準換成塊元素。
3.超鏈接訪問過后hover樣式就不會出現了，被點擊訪問過的超鏈接樣式不再具有hover 和active 了
解決：改變css 屬性的排列順序L-V-H-A
CSS 預處理器
Less sass
Sass、Less是什么？為什么要使用？
他們是CSS預處理器。他是CSS上的一種抽象層。它們是一種特殊的語法、語言編譯成CSS。
例如Less是一種動態樣式語言。將CSS賦予了動態語言的特性，如變量，繼承，運算，函數。Less即可以在客戶端上運行(支持IE6+,Webkit,Firefox)，也可以在服務端運行(借助Node.js)。
Sass變量必須是$開始，而Less變量必須使用@符號開始。
為什么要使用它們？
結構清晰，便于擴展。
可以方便地屏蔽瀏覽器私有語法差異。這個不用多說，封裝對瀏覽器語法差異的重復處理，減少無異議的機械勞動。
可以輕松實現多重繼承。
完全兼容CSS代碼，可以方便地應用到老項目中。Less只是在CSS語法上做了擴展，所以老的CSS代碼也可以與Less代碼一同編譯。
CSS 3的新增特性？
ie9開始支持
1.選擇器增加；
2.樣式增加：常用
比如：圓角。陰影，漸變背景，半透明，圖片邊框等；
3.新增的背景樣式：
背景圖片的顯示范圍，和起點，縮放。
4.引入了flex彈性 盒模型； 常用
5.陰影效果；文本及盒子陰影。 常用
6.顏色與透明；
新增了HSL/HSLA/RGBA幾種顏色模式；
7.web字體和web圖標 常用
@font-face{
font-family: myFont;
src: url('')
}
div{
font-family: myFont
}
8.和容器的變形； 常用
transform: translate(50px,100px);平移
transform: rotate(30deg);旋轉
transform: scale(2,4);縮放
transform: skew(30deg,20deg);翻轉
9.過度動畫和交互； 常用
transition過度和animation動畫
10.word-wrap(對長的不可分割單詞換行)word-wrap：break-word
11.媒體查詢：定義兩套css，當瀏覽器的尺寸變化時會采用不同的屬性
CSS 創建一個三角形
把上、左、右三條邊隱藏掉(顏色設為 transparent)
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
CSS 初始化樣式是為什么？
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
CSS 優化 提高性能的方法有哪些？
答案一：
避免過度約束
避免后代選擇符
避免鏈式選擇符
使用緊湊的語法
避免不必要的命名空間
避免不必要的重復
最好使用表示語義的名字。一個好的類名應該是描述他是什么而不是像什么
避免！important，可以選擇其他選擇器
盡可能的精簡規則，你可以合并不同類里的重復規則
答案二：
加載性能：
① CSS 壓縮：將寫好的CSS 進行打包壓縮，可以減少很多的體積。
② CSS單一樣式：當需要下邊距和左邊距的時候，很多時候選擇：margin: top 0 bottom 0;
但margin-top: top;margin-bottom: bottom;執行的效率更高。
選擇器性能：
① 關鍵選擇器。選擇器的最后面的部分為關鍵選擇器(即用來匹配目標元素的部分)
CSS 選擇器是怎樣被瀏覽器解析的？
CSS選擇器的解析是從右向左解析的。若從左向右的匹配，發現不符合規則，需要進行回溯，會損失很多性能。若從右向左匹配，先找到所有的最右節點，對于每一個節點，向上尋找其父節點直到找到根元素或滿足條件的匹配規則，則結束這個分支的遍歷。兩種匹配規則的性能差別很大，是因為從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節點(葉子節點)，而從左向右的匹配規則的性能都浪費在了失敗的查找上面。
而在 CSS 解析完畢后，需要將解析的結果與 DOM Tree 的內容一起進行分析建立一棵 Render Tree，最終用來進行繪圖。在建立 Render Tree 時(WebKit 中的「Attachment」過程)，瀏覽器就要為每個 DOM Tree 中的元素根據 CSS 的解析結果(Style Rules)來確定生成怎樣的 Render Tree。
CSS Sprites
將一個頁面涉及到的所有圖片都包含到一張大圖中去，然后利用CSS的 background-image，background- repeat，background-position 的組合進行背景定位。利用CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的性能；CSS Sprites能減少圖片的字節。
CSS Hack是什么?ie6,7,8的hack分別是什么？
針對不同的瀏覽器寫不同的CSS Code的過程，就是CSS Hack。實例如下：
#test{
width: 300px;
height: 300px;
background-color: blue;
background-color: red; /* all ie */
background-color: yellow>background-color: yellow\0; /* ie8 */<; /* ie8 */
+background-color: pink; /* ie7 */
_background-color: orange; /* ie6 */
:root #test{
background: purple; /* ie9 */
}
@media all and {min-width: 0px} #test{background-color: black>@media all and {min-width: 0px} #test{background-color: black\0;} /* opera */<;} /* opera */
@media screen and {-webkit-min-device-pixel-ratio: 0 } {#test {background-color: gray}} /* chrome and safari */
}
@media可以針對不同的媒體類型定義不同的樣式。特別是如果你需要設計響應式的頁面，@media是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器寬度和高度重新渲染頁面。
CSS 引入方式？
外部樣式表。引入一個外部CSS文件；
內部樣式表。將CSS代碼放在<head>標簽內部；
內聯樣式，將CSS樣式直接定義在HTML元素內部；
移動端的布局用過媒體查詢嗎？
通過媒體查詢可以為不同大小和尺寸的媒體定義不同的css，適應相應的設備的顯示。
<head>里邊<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”>
CSS : @media only screen and (max-device-width:480px) {/css樣式/}
在網頁中的應該使用奇數還是偶數的字體？為什么呢？
使用偶數字體。偶數字號相對更容易和 web 設計的其他部分構成比例關系。Windows 自帶的點陣宋體(中易宋體)從 Vista 開始只提供 12、14、16 px 這三個大小的點陣，而 13、15、17 px時用的是小一號的點。(即每個字占的空間大了 1 px，但點陣沒變)，于是略顯稀疏。
元素豎向的百分比設定是相對于容器的高度嗎？
當按百分比設定一個元素的寬度時，它是相對于父容器的寬度計算的，但是，對于一些表示豎向距離的屬性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，當按百分比設定它們時，依據的也是父容器的寬度，而不是高度。
全屏滾動的原理是什么？用到了CSS的哪些屬性？
原理：有點類似于輪播，整體的元素一直排列下去，假設有5個需要展示的全屏頁面，那么高度是500%，只是展示100%，剩下的可以通過transform進行y軸定位，也可以通過margin-top實現
overflow：hidden；transition：all 1000ms ease；
什么是響應式設計？響應式設計的基本原理是什么？如何兼容低版本的IE？
響應式網站設計(Responsive Web design)是一個網站能夠兼容多個終端，而不是為每一個終端做一個特定的版本。
基本原理是通過媒體查詢檢測不同的設備屏幕尺寸做處理。
頁面頭部必須有meta聲明的viewport。
視差滾動效果？
視差滾動(Parallax Scrolling)通過在網頁向下滾動的時候，控制背景的移動速度比前景的移動速度慢來創建出令人驚嘆的3D效果。
CSS3實現
優點：開發時間短、性能和開發效率比較好，缺點是不能兼容到低版本的瀏覽器
jQuery實現
通過控制不同層滾動速度，計算每一層的時間，控制滾動效果。
優點：能兼容到各個版本的，效果可控性好
缺點：開發起來對制作者要求高
插件實現方式
例如：parallax-scrolling，兼容性十分好
line-height的理解？
行高是指一行文字的高度，具體說是兩行文字間基線的距離。CSS中起高度作用的是height和line-height，沒有定義height屬性，最終其表現作用一定是line-height。
單行文本垂直居中：把line-height值設置為height一樣大小的值可以實現單行文字的垂直居中，其實也可以把height刪除。
多行文本垂直居中：需要設置display屬性為inline-block。
讓頁面里的字體變清晰，變細用CSS怎么做？
-webkit-font-smoothing在window系統下沒有起作用，但是在IOS設備上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。
如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？
多數顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms。
li與li之間不可見空白間隔引起原因？解決辦法？
行框的排列會受到中間空白(回車空格)等的影響，因為空格也屬于字符,這些空白也會被應用樣式，占據空間，所以會有間隔，把字符大小設為0，就沒有空格了。
解決方法：
可以將<li>代碼全部寫在一排
浮動li中float：left
在ul中用font-size：0(谷歌不支持)；可以使用letter-space：-3px
width: auto 和 width: 100% 的區別
width: 100% 會使元素box的寬度等于父元素的contentbox的寬度
width: auto 會時元素撐滿整個父元素，margin, border, padding, content 區域會自動分配水平空間
有一個高度自適應的div，里面有兩個div，一個高度100px，希望另一個填滿剩下的高度
外層div使用position：relative；高度要求自適應的div使用position: absolute; top: 100px; bottom: 0; left: 0
png、jpg、gif 這些圖片格式解釋一下，分別什么時候用。有沒有了解過webp？
png是便攜式網絡圖片(Portable Network Graphics)是一種無損數據壓縮位圖文件格式.優點是：壓縮比高，色彩好。 大多數地方都可以用。
jpg是一種針對相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調及顏色平滑變化做的不錯。在www上，被用來儲存和傳輸照片的格式。
gif是一種位圖文件格式，以8位色重現真色彩的圖像?？梢詫崿F動畫效果.
webp格式是谷歌在2010年推出的圖片格式，壓縮率只有jpg的2/3，大小比png小了45%。缺點是壓縮的時間更久了，兼容性不好，目前谷歌和opera支持。
style標簽寫在body后與body前有什么區別？
頁面加載自上而下 當然是先加載樣式。
寫在body標簽后由于瀏覽器以逐行方式對HTML文檔進行解析，當解析到寫在尾部的樣式表(外聯或寫在style標簽)會導致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之后重新渲染，在windows的IE下可能會出現FOUC現象(即樣式失效導致的頁面閃爍問題)
使用 base64 編碼的優缺點
base64編碼是一種圖片處理格式，通過特定的算法將圖片編碼成一長串字符串，
在頁面上顯示時可用該字符串來代替圖片的url屬性
使用base64的優點：
① 減少一個圖片的 HTTP 請求
使用base64的缺點：
① 根據base64的編碼原理，編碼后的大小會比源文件大小大1/3，如果把大圖片編碼到html/css中，
不僅會造成文件體積增加，影響文件的加載速度，還會增加瀏覽器對html或css文件解析渲染的時間。
② 使用base64無法直接緩存，要緩存只能緩存包含base64的文件，比如HTML 或CSS，
這相比于直接緩存圖片的效果要差很多。
③ ie8以前的瀏覽器不支持
一般一些網站的小圖標可以使用base64圖片引入
超鏈接訪問過后hover樣式就不出現的問題時什么？如何解決？
被點擊訪問過的超鏈接樣式不再具有hover和active了，解決方式是改變CSS屬性的排列順序：L-V-H-A(linked, visited, hover, active)。
rgba()和opacity的透明效果有什么區別？
rgba()和opacity都能實現透明效果，但最大的不同是opacity作用于元素，以及元素內的所有內容的透明度，而rgba()只作用于元素的顏色或起背景色。設置rgba透明的元素的子元素不會繼承透明效果。
px和em的區別
px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em的值不是固定的，并且em會繼承父級元素的字體大小。
瀏覽器的默認字體高度都是16px。所以未經調整的瀏覽器都符合：1em=16px。那么12px=0.75em, 10px=0.625em。
描述一個“reset”的css文件并如何使用它。知道normalize.css嗎？你了解他們的不同之處嗎?
重置樣式非常多，凡是一個前端開發人員肯定會有一個常用的重置css文件并知道如何使用它們。他們是盲目的在做還是知道為什么這么做呢？原因是不同的瀏覽器對一些元素有不同的的默認樣式，如果你不處理，在不同瀏覽器下回存在必要的風險，或者更有戲劇性發生。
你可能會用Normalize來代替你的重置樣式文件。它沒有重置所有的樣式風格，但僅提供一套合理的默認樣式值。既能夠讓眾多瀏覽器達到一致和合理，但不擾亂其他的東西(如粗體的標題)。
content有什么用？有什么應用？
CSS的content屬性專門應用在before/after偽元素上，用來插入生成內容。
最常見的應用是利用偽類清除浮動：
CSS Code復制內容到剪貼板
//一種常見利用偽類清除浮動的代碼
.clearfix:after {
content:"."; //這里利用到了content屬性
display:block;
height:0;
visibility:hidden;
clear:both; }
.clearfix {
*zoom:1;
}
after偽元素通過content在元素的后面生成一個點的塊級元素，再利用clear: both清除浮動。
最普通的排序算法， 從數組下標1開始每增1項排序一次，越往后遍歷次數越多；
原理圖：
代碼：
TML的常用列表可以分為三種：無序列表，有序列表以及定義列表。
定義：<ul>...</ul> ，表示項目之間沒有順序規定的列表。
內層標簽是 <li>...</li>，它有一個type屬性，常用的值有三種：
小實例：
<ul>
? <li>默認值</li><br>
? <li type="disc">實心圓點</li><br>
? <li type="circle">空心圓點</li><br>
? <li type="square">實心方塊</li><br>
</ul>定義：<ol>...</ol>， 相對于無序列表而言，具有一定的順序的列表，一般用數字或者是字母放在表示項目的最前端表示先后順序。
內層標簽是 <li>...</li>，同樣它的type屬性常用值有四種：
小實例：
<ol>
? <li>默認值</li><br>
? <li type="A">大寫字母</li><br>
? <li type="a">小寫字母</li><br>
? <li type="I">羅馬數字</li><br>
? <li type="1">純數字</li><br><br><br>
</ol>定義：<dl>...</dl>，不僅僅是一列項目，還是項目及其注釋的組合。
由 <dl> 標簽開始，內層標簽 <dt>...</dt> 包裹對象文本， <dd>...</dd> 包裹著解釋文本。（內層只能是 dt 和 dd 標簽，且dt 必須是在 dd 前面）
小實例：
<dl>
? <dt>HTML</dt>
? <dd>HTML稱為超文本標記語言，是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。</dd><br>
? <dt>CSS</dt>
? <dd>層疊樣式表(英文全稱：Cascading Style
? Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。</dd><br>
? <dt>JavaScript</dt>
? <dd>JavaScript是一種直譯式腳本語言，是一種動態類型、弱類型、基于原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。</dd><br>
</dl>動手小練習
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
