深刻理解盒模型
//這是css理論的基石,后面很多知識(shí)基本圍繞它展開
- html元素就是一個(gè)長方形的盒子
- 完整的盒模型包括content+border+padding+margin
- 歷史原因,盒模型分為IE盒模型,w3c標(biāo)準(zhǔn)盒模型兩種類型
//區(qū)別1:IE盒模型內(nèi)容是指content+border+padding;而W3C標(biāo)準(zhǔn)盒模型實(shí)際內(nèi)容指的是content本身
//區(qū)別2:兩種盒模型的寬高計(jì)算方式不一樣,IE盒模型寬高指的是整個(gè)conten+border+padding盒模型范圍,W3C標(biāo)準(zhǔn)盒模型的寬高指的是content的寬高 - CSS3引入box-sizing屬性,讓元素可以在兩種盒模型之間切換
//那就意味著css盒模型對(duì)元素寬高的計(jì)算方式是可以改變的
//屬性值有content-box,border-box,inhert(繼承父元素的盒模型類型)
link和@import的區(qū)別？
（1）link屬于XHTML標(biāo)簽，而@import是CSS提供的語法。
（2）頁面被加載時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁面被加載完再加載。
（3）import只在IE 5以上才能識(shí)別，而link是XHTML標(biāo)簽，無兼容問題。
（4）link方式的樣式權(quán)重高于@import的權(quán)重。
（5）使用dom控制樣式時(shí)的差別。當(dāng)使用javascript控制dom去改變樣式的時(shí)候，只能使用link標(biāo)簽，因?yàn)锧import不是dom可以控制的。
CSS 選擇符有哪些？哪些屬性可以繼承？優(yōu)先級(jí)算法如何計(jì)算？CSS 3新增偽類有哪些？
id選擇器（# myid）
類選擇器（.myclassname）
標(biāo)簽選擇器（div、h1、p）
相鄰選擇器（h1 + p）
子選擇器（ul > li）
后代選擇器（li a）
通配符選擇器（ * ）
屬性選擇器（a[rel = "external"]）
偽類選擇器（a: hover, li: nth - child）
可繼承： font-size font-family color, UL LI DL DD DT;
不可繼承 ：border padding margin width height ;
優(yōu)先級(jí)就近原則，樣式定義最近者為準(zhǔn)，載入樣式以最后載入的定位為準(zhǔn)。
優(yōu)先級(jí)為：
內(nèi)聯(lián) > id > class > tag ...
CSS3新增偽類舉例：
p:first-of-type 選擇屬于其父元素的首個(gè)<p>元素的每個(gè)<p>元素。
p:last-of-type 選擇屬于其父元素的最后<p>元素的每個(gè)<p>元素。
p:only-of-type 選擇屬于其父元素唯一的<p>元素的每個(gè)<p>元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個(gè)<p>元素。
p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè)<p>元素。
:enabled、:disabled 控制表單控件的禁用狀態(tài)。
:checked 單選框或復(fù)選框被選中。
[完整css3偽類表格](http://www.runoob.com/cssref/css-selectors.html)
如何居中div，如何居中一個(gè)浮動(dòng)元素？
給div設(shè)置一個(gè)寬度，然后添加margin:0 auto屬性
div{
width:200px;
margin:0 auto;
}
如何居中一個(gè)浮動(dòng)元素
確定容器的寬高，如寬500、高 300的層，設(shè)置層的外邊距
.div {
Width:500px ; height:300px;//高度可以不設(shè)
Margin: -150px 0 0 -250px;
position:relative;相對(duì)定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
經(jīng)常遇到的瀏覽器的兼容性有哪些？原因、解決方法是什么？
（1）png24為的圖片在IE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8。
（2）瀏覽器默認(rèn)的margin和padding不同，解決方案是加一個(gè)全局的*{margin:0;padding:0;}來統(tǒng)一。
（3）IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在IE 6顯示margin比設(shè)置的大。
（4）浮動(dòng)ie產(chǎn)生的雙邊距問題：塊級(jí)元素就加display：inline；行內(nèi)元素轉(zhuǎn)塊級(jí)元素display：inline后面再加display：table。
.bb{
background-color:#f1ee18; /*所有識(shí)別*/
.background-color:#00deff\9; /*IE6、7、8識(shí)別*/
+background-color:#a200ff; /*IE6、7識(shí)別*/
_background-color:#1e0bd1; /*IE6識(shí)別*/
}
常用Hack的技巧：
（1）IE下，可以使用獲取常規(guī)屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性；
（2）Firefox下，只能使用getAttribute()獲取自定義屬性。解決方法：統(tǒng)一通過getAttribute()獲取自定義屬性。
（3）IE下，even對(duì)象有x,y屬性，但是沒有pageX,pageY屬性；
（4）Firefox下，event對(duì)象有pageX,pageY屬性，但是沒有x,y屬性。解決方法是條件注釋，缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請求數(shù)。
（5）Chrome 中文界面下默認(rèn)會(huì)將小于12px的文本強(qiáng)制按照12px顯示，可通過加入 CSS屬性-webkit-text-size-adjust: none;來解決。
（6）超鏈接訪問過后hover樣式就不出現(xiàn)了 被點(diǎn)擊訪問過的超鏈接樣式不再具有hover和active了，解決方法是改變CSS屬性的排列順序：
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
列出display的值，說明它們的作用。position的值里，relative和absolute定位原點(diǎn)是？
display值//
block 像塊類型元素一樣顯示。
none 缺省值。像行內(nèi)元素類型一樣顯示。
inline-block 像行內(nèi)元素一樣顯示，但其內(nèi)容像塊類型元素一樣顯示。
list-item 像塊類型元素一樣顯示，并添加樣式列表標(biāo)記。
position定位//
relative：生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。
absolute: 生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
fixed:生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
relative:生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。
因此，"left:20" 會(huì)向元素的 LEFT 位置添加 20 像素。
static: 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
inherit:規(guī)定應(yīng)該從父元素繼承 position 屬性的值。
簡單概括:
//relative參照物是元素本身默認(rèn)位置
//absolute參照物是position屬性非static的父級(jí)元素,如果元素沒有已定位的父元素，那么它的位置相對(duì)于<html>
//fixed參照物是瀏覽器窗口
為什么要初始化CSS樣式？
因?yàn)闉g覽器的兼容問題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的，如果沒對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁面顯示差異。當(dāng)然，初始化樣式會(huì)對(duì)SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
最簡單的初始化方法就是：* {padding: 0; margin: 0;} （筆者不建議這樣）
淘寶的樣式初始化：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
CSS是怎樣定義權(quán)重規(guī)則的？
以下是權(quán)重的規(guī)則：標(biāo)簽的權(quán)重為1，class的權(quán)重為10，id的權(quán)重為100，以下例子是演示各種定義的權(quán)重值：
/*權(quán)重為1*/
div{
}
/*權(quán)重為10*/
.class1{
}
/*權(quán)重為100*/
#id1{
}
/*權(quán)重為100+1=101*/
#id1 div{
}
/*權(quán)重為10+1=11*/
.class1 div{
}
/*權(quán)重為10+10+1=21*/
.class1 .class2 div{
}
如果權(quán)重相同，則最后定義的樣式會(huì)起作用，但是應(yīng)該避免這種情況出現(xiàn)。
如何理解表現(xiàn)與內(nèi)容相分離？
表現(xiàn)與結(jié)構(gòu)相分離簡單的說就是HTML中只有標(biāo)簽元素 表現(xiàn)完全是由CSS文件控制的。
如何定義高度為1px的容器？
div{
heigh：1px;
width:10px;
background:#000;
overflow:hidden
}
IE 6下這個(gè)問題是默認(rèn)行高造成的，overflow:hidden | zoom:0.08 | line- height:1px這樣也可以解決。
如何解決IE 6的3px問題？
_zoom:1; margin-left: value; _margin-left: value-3px;
Firefox下文本無法撐開容器的高度，如何解決？
清除浮動(dòng) .clear{ clear:both; height:0px; overflow:hidden;}
怎么樣才能讓層顯示在Flash之上呢?
解決的辦法是給Flash設(shè)置透明屬性
<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />
cursor:hand在FF下不顯示小手，如何解決？
cursor; pointer;
在IE中內(nèi)容會(huì)自適應(yīng)高度，而FF不會(huì)自適應(yīng)高度，怎么辦？
在要自適應(yīng)高度的層中加一個(gè)層，樣式為
.clear{clear:both;font-size:0px;height:1px}，
這樣解決有一個(gè)小小的問題，高度會(huì)多一個(gè)像素。還有一種解決方法，給當(dāng)前層加上一個(gè)偽類。
#test:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
用純 CSS 創(chuàng)建一個(gè)三角形的原理是什么？
把上、左、右三條邊隱藏掉（顏色設(shè)為 transparent）
#demo {
width:0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
如何設(shè)計(jì)一個(gè)滿屏“品”字布局？
簡單的方式：
上面的div寬100%，
下面的兩個(gè)div分別寬50%，
用float或inline使其不換行。
怎么讓Chrome支持小于12px 的文字？
body{-webkit-text-size-adjust:none}
前端頁面有哪三層構(gòu)成，分別是什么？作用是什么？
最準(zhǔn)確的網(wǎng)頁設(shè)計(jì)思路是把網(wǎng)頁分成三個(gè)層次，即：結(jié)構(gòu)層、表示層、行為層。
網(wǎng)頁的結(jié)構(gòu)層（structural layer）由HTML或XHTML之類的標(biāo)記語言負(fù)責(zé)創(chuàng)建。標(biāo)簽，也就是那些出現(xiàn)在尖括號(hào)里的單詞，對(duì)網(wǎng)頁內(nèi)容的語義含義做出了描述，但這些標(biāo)簽不包含任何關(guān)于如何顯示有關(guān)內(nèi)容的信息。例如，P 標(biāo)簽表達(dá)了這樣一種語義：“這是一個(gè)文本段?！?網(wǎng)頁的表示層（presentation layer）由CSS負(fù)責(zé)創(chuàng)建。 CSS對(duì)“如何顯示有關(guān)內(nèi)容”的問題做出了回答。
網(wǎng)頁的行為層（behavior layer）負(fù)責(zé)回答“內(nèi)容應(yīng)該如何對(duì)事件做出反應(yīng)”這一問題。這是JavaScript語言和DOM主宰的領(lǐng)域。
::before 和 :after中雙冒號(hào)和單冒號(hào) 有什么區(qū)別？解釋一下這2個(gè)偽元素的作用。
單冒號(hào)(:)用于CSS3偽類，雙冒號(hào)(::)用于CSS3偽元素。
偽元素由雙冒號(hào)和偽元素名稱組成。雙冒號(hào)是在css3規(guī)范中引入的，用于區(qū)分偽類和偽元素。但是偽類兼容現(xiàn)存樣式，瀏覽器需要同時(shí)支持舊的偽類，比如:first-line、:first-letter、:before、:after等。
對(duì)于CSS2之前已有的偽元素，比如:before，單冒號(hào)和雙冒號(hào)的寫法::before作用是一樣的。
提醒，如果你的網(wǎng)站只需要兼容webkit、firefox、opera等瀏覽器，建議對(duì)于偽元素采用雙冒號(hào)的寫法，如果不得不兼容IE瀏覽器，還是用CSS2的單冒號(hào)寫法比較安全。
現(xiàn)在HTML5中css3可以寫出一個(gè)旋轉(zhuǎn)的立方體，請寫出要用到的CSS屬性。
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(30deg) rotateX(10deg);
-webkit-animation: rot 4s linear infinite;
介紹一下 Sass 和 Less 是什么？它們有何區(qū)別？
Sass (Syntactically Awesome Stylesheets)是一種動(dòng)態(tài)樣式語言，語法跟css一樣(但多了些功能)，比css好寫，而且更容易閱讀。Sass語法類似與Haml，屬于縮排語法（makeup），用意就是為了快速寫Html和Css。
Less一種動(dòng)態(tài)樣式語言. 將CSS賦予了動(dòng)態(tài)語言的特性，如變量，繼承，運(yùn)算， 函數(shù). LESS 既可以在客戶端上運(yùn)行 (支持IE 6+, Webkit, Firefox)，也可一在服務(wù)端運(yùn)行 (借助 Node.js)。
區(qū)別：
(1))Sass是基于Ruby的，是在服務(wù)端處理的，而Less是需要引入less.js來處理Less代碼輸出Css到瀏覽器，也可以在開發(fā)環(huán)節(jié)使用Less，然后編譯成Css文件，直接放到項(xiàng)目中，也有Less.app、SimpleLess、CodeKit.app這樣的工具，也有在線編譯地址。
(2)變量符不一樣，less是@，而Scss是$，而且變量的作用域也不一樣，后面會(huì)講到。
(3)輸出設(shè)置，Less沒有輸出設(shè)置，Sass提供4中輸出選項(xiàng)：nested, compact, compressed 和 expanded。
(4)Sass支持條件語句，可以使用if{}else{},for{}循環(huán)等等。而Less不支持。
常見ie6的瀏覽器兼容bug（3-5個(gè)）？
- 文字本身的大小不兼容。
同樣是font-size:14px的宋體文字，在不同瀏覽器下占的空間是不一樣的，ie下實(shí)際占高16px，下留白3px，ff 下實(shí)際占高17px，上留白1px，下留白3px，opera下就更不一樣了。解決方案：給文字設(shè)定 line-height 。確保所有文字都有默認(rèn)的 line-height 值。 - IE6吞吃現(xiàn)象。
上下兩個(gè)div，上面的div設(shè)置背景，卻發(fā)現(xiàn)下面沒有設(shè)置背景的div 也有了背景，這就是吞吃現(xiàn)象。對(duì)應(yīng)上面的背景吞吃現(xiàn)象，還有滾動(dòng)下邊框缺失的現(xiàn)象。解決方案：使用zoom:1。這個(gè)zoom好象是專門為解決ie6 bug而生的。 - IE6注釋bug
注釋也能產(chǎn)生bug~~~“多出來的一只豬。”這是前人總結(jié)這個(gè)bug使用的文案，ie6的這個(gè)bug 下，大家會(huì)在頁面看到豬字出現(xiàn)兩遍，重復(fù)的內(nèi)容量因注釋的多少而變。
解決方案：用“<!–[if !IE]> picRotate start <![endif]–>”方法寫注釋。 - img 下的留白，如下代碼：
<div>
<img src=“1.jpg” />
</div>
把div的border打開，你發(fā)現(xiàn)圖片底部不是緊貼著容器底部的，是img后面的空白字符造成，要消除必須這樣寫
<div>
<img src=”1.jpg” /></div>
后面兩個(gè)標(biāo)簽要緊挨著。ie7下這個(gè)bug 依然存在。解決方案：給img設(shè)定 display:block。 - 失去line-height
<div style=”line-height:20px”><img />文字</div>，很遺憾，在ie6下單行文字 line-height 效果消失了。原因是<img />這個(gè)inline-block元素和inline元素寫在一起了。
解決方案：讓img 和文字都 float起來。 - clear層應(yīng)該單獨(dú)使用。也許你為了節(jié)省代碼把clear屬性直接放到下面的一個(gè)內(nèi)容層，這樣有問題，不僅僅是ff和op下失去margin效果，ie下某些margin值也會(huì)失效。
<div style=”background:red;float:left;”>dd</div>
<div style=”clear:both;margin-top:18px;background:green”>ff</div> - ie 下overflow:hidden對(duì)其下的絕對(duì)層position:absolute或者相對(duì)層 position:relative無效。
解決方案：給overflow:hidden加position:relative或者position: absolute。
另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。
css背景屬性
background-color
background-image
background-repeat(背景平鋪設(shè)置)
//默認(rèn)情況下 background-image 屬性會(huì)在頁面的水平或者垂直方向平鋪。一些圖像如果在水平方向與垂直方向平鋪，這樣看起來很不協(xié)調(diào)
//所以需要這個(gè)屬性來限制
background-attachment
//background-attachment:fixed;主要用來定位背景圖片
background-position
//對(duì)于背景圖片位置有要求就使用該屬性,默認(rèn)只展示一次,默認(rèn)阻止平鋪屬性
