介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
（1）有兩種玉控， IE 盒子模型、W3C 盒子模型狮惜；
（2）盒模型： 內(nèi)容(content)高诺、填充(padding)、邊界(margin)讽挟、 邊框(border)懒叛；
（3）區(qū) 別： IE的content部分把 border 和 padding計算了進(jìn)去;
CSS選擇符有哪些？哪些屬性可以繼承耽梅？
- 1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標(biāo)簽選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul > li）
6.后代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.偽類選擇器（a:hover, li:nth-child） - 可繼承的樣式： font-size font-family color, UL LI DL DD DT;
- 不可繼承的樣式：border padding margin width height ;
CSS優(yōu)先級算法如何計算薛窥？
- 優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);
- 載入樣式以最后載入的定位為準(zhǔn);優(yōu)先級為: !important > id > class > tag important 比 內(nèi)聯(lián)優(yōu)先級高
CSS3新增偽類有那些眼姐？
舉例：
p:first-of-type 選擇屬于其父元素的首個 <p> 元素的每個 </p><p> 元素诅迷。
p:last-of-type 選擇屬于其父元素的最后 </p><p> 元素的每個 </p><p> 元素。
p:only-of-type 選擇屬于其父元素唯一的 </p><p> 元素的每個 </p><p> 元素众旗。
p:only-child 選擇屬于其父元素的唯一子元素的每個 </p><p> 元素罢杉。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 </p><p> 元素。
:after 在元素之前添加內(nèi)容,也可以用來做清除浮動贡歧。
:before 在元素之后添加內(nèi)容
:enabled
:disabled 控制表單控件的禁用狀態(tài)滩租。
:checked 單選框或復(fù)選框被選中。</p>
如何居中div利朵？如何居中一個浮動元素律想？如何讓絕對定位的div居中？
- 給div設(shè)置一個寬度绍弟，然后添加margin:0 auto屬性
div{ width:200px; margin:0 auto; }
- 居中一個浮動元素
確定容器的寬高 寬500 高 300 的層 設(shè)置層的外邊距
.div {
width:500px ; height:300px;//高度可以不設(shè)
margin: -150px 0 0 -250px;
position:relative; //相對定位
background-color:pink; //方便看效果
left:50%; top:50%;
}
- 讓絕對定位的div居中
position: absolute;
width: 1200px;
background: none;
margin: 0 auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
display有哪些值技即？說明他們的作用。
block 象塊類型元素一樣顯示樟遣。
none 缺省值而叼。象行內(nèi)元素類型一樣顯示身笤。
inline-block 象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類型元素一樣顯示葵陵。
list-item 象塊類型元素一樣顯示液荸，并添加樣式列表標(biāo)記。
table 此元素會作為塊級表格來顯示
inherit 規(guī)定應(yīng)該從父元素繼承 display 屬性的值
position的值relative和absolute定位原點是埃难？
absolute 生成絕對定位的元素莹弊，相對于值不為 static的第一個父元素進(jìn)行定位。
fixed （老IE不支持） 生成絕對定位的元素涡尘，相對于瀏覽器窗口進(jìn)行定位忍弛。
relative 生成相對定位的元素，相對于其正常位置進(jìn)行定位考抄。
static 默認(rèn)值莱预。沒有定位苍日，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right z-index 聲明）。
inherit 規(guī)定從父元素繼承 position 屬性的值。
CSS3有哪些新特性铃诬？
新增各種CSS選擇器 （: not(.input)：所有 class 不是“input”的節(jié)點）
圓角 （border-radius:8px）
多列布局 （multi-column layout）
陰影和反射 （Shadow\Reflect）
文字特效 （text-shadow苦始、）
文字渲染 （Text-decoration）
線性漸變 （gradient）
旋轉(zhuǎn) （transform） 增加了旋轉(zhuǎn),縮放,定位,傾斜,動畫擂达，多背景
transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:
請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景蹋肮？
.
用純CSS創(chuàng)建一個三角形的原理是什么？
把上丢早、左姨裸、右三條邊隱藏掉（顏色設(shè)為 transparent）
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
一個滿屏 品 字布局 如何設(shè)計?
簡單的方式：
上面的div寬100%， 下面的兩個div分別寬50%怨酝， 然后用float或者inline使其不換行即可
經(jīng)常遇到的瀏覽器的兼容性有哪些傀缩？原因，解決方法是什么农猬，常用hack的技巧 赡艰？
- png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.
- 瀏覽器默認(rèn)的margin和padding不同斤葱。解決方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一慷垮。
- IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下揍堕，在ie6顯示margin比設(shè)置的大料身。
浮動ie產(chǎn)生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}
這種情況之下IE會產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式控制中加入 ——display:inline;將其轉(zhuǎn)化為行內(nèi)屬性鹤啡。(這個符號只有ie6會識別)
漸進(jìn)識別的方式，從總體中逐漸排除局部蹲嚣。
首先递瑰，巧妙的使用“\9”這一標(biāo)記祟牲，將IE游覽器從所有情況中分離出來。
接著抖部，再次使用“+”將IE8和IE7说贝、IE6分離開來，這樣IE8已經(jīng)獨(dú)立識別慎颗。
css .bb{
background-color:#f1ee18;/*所有識別*/
.background-color:#00deff\9; /*IE6乡恕、7、8識別*/
+background-color:#a200ff;/*IE6俯萎、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}
- IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性, 也可以使用getAttribute()獲取自定義屬性; Firefox下,只能使用getAttribute()獲取自定義屬性傲宜。 解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性。
- IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性; Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性夫啊。
- 解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)函卒。
- Chrome 中文界面下默認(rèn)會將小于 12px 的文本強(qiáng)制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。
超鏈接訪問過后hover樣式就不出現(xiàn)了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
li與li之間有看不見的空白間隔是什么原因引起的撇眯？有什么解決辦法报嵌？
行框的排列會受到中間空白（回車\空格）等的影響，因為空格也屬于字符,這些空白也會被應(yīng)用樣式熊榛，占據(jù)空間锚国，所以會有間隔，把字符大小設(shè)為0玄坦，就沒有空格了血筑。
為什么要初始化CSS樣式。
- 因為瀏覽器的兼容問題营搅，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的云挟，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。- 當(dāng)然转质，初始化樣式會對SEO有一定的影響园欣，但魚和熊掌不可兼得，但力求影響最小的情況下初始化休蟹。最簡單的初始化方法：
* {padding: 0; margin: 0;} （強(qiáng)烈不建議）```
淘寶的樣式初始化代碼：
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; }
###absolute的containing block(容器塊)計算方式跟正常流有什么不同沸枯？
無論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素赂弓，然后再判斷：
1绑榴、若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區(qū)域) 的最小矩形盈魁；
2翔怎、否則,則由這個祖先元素的 padding box 構(gòu)成。如果都找不到，則為 initial containing block赤套。
補(bǔ)充:
1. static(默認(rèn)的)/relative：簡單說就是它的父元素的內(nèi)容框（即去掉padding的部分
2. absolute: 向上找最近的定位為absolute/relative的元素
3. fixed: 它的containing block一律為根元素(html/body)飘痛，根元素也是initial containing block
###CSS里的visibility屬性有個collapse屬性值是干嘛用的？在不同瀏覽器下以后什么區(qū)別容握？
...
###position跟display宣脉、margin collapse、overflow剔氏、float這些特性相互疊加后會怎么樣塑猖？
...
###對BFC規(guī)范(塊級格式化上下文：block formatting context)的理解？
（W3C CSS 2.1 規(guī)范中的一個概念,它是一個獨(dú)立容器谈跛，決定了元素如何對其內(nèi)容進(jìn)行定位,以及與其他元素的關(guān)系和相互作用羊苟。） 一個頁面是由很多個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。
不同類型的 Box,會參與不同的 Formatting Context（決定如何渲染文檔的容器）,因此Box內(nèi)的元素會以不同的方式渲染,也就是說BFC內(nèi)部的元素和外部的元素不會互相影響币旧。
###css定義的權(quán)重
以下是權(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)重相同巍虫，則最后定義的樣式會起作用，但是應(yīng)該避免這種情況出現(xiàn)
###請解釋一下為什么會出現(xiàn)浮動和什么時候需要清除浮動鳍刷？清除浮動的方式
...
###移動端的布局用過媒體查詢嗎占遥？
...
###使用 CSS 預(yù)處理器嗎？喜歡那個输瓜？
SASS (SASS瓦胎、LESS沒有本質(zhì)區(qū)別，只因為團(tuán)隊前端都是用的SASS)
//用面向?qū)ο笏枷雽慶ss
* CSS優(yōu)化尤揣、提高性能的方法有哪些搔啊？
* 瀏覽器是怎樣解析CSS選擇器的？
* 在網(wǎng)頁中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體北戏？為什么呢负芋？
* margin和padding分別適合什么場景使用？
* 抽離樣式模塊怎么寫嗜愈，說出思路旧蛾，有無實踐經(jīng)驗？[阿里航旅的面試題]
* 元素豎向的百分比設(shè)定是相對于容器的高度嗎蠕嫁？
* 全屏滾動的原理是什么锨天？用到了CSS的那些屬性？
* 什么是響應(yīng)式設(shè)計剃毒？響應(yīng)式設(shè)計的基本原理是什么病袄？如何兼容低版本的IE搂赋？
* 視差滾動效果，如何給每頁做不同的動畫益缠？（回到頂部厂镇，向下滑動要再次出現(xiàn)，和只出現(xiàn)一次分別怎么做左刽？）
* ::before 和 :after中雙冒號和單冒號 有什么區(qū)別？解釋一下這2個偽元素的作用酌媒。
* 如何修改chrome記住密碼后自動填充表單的黃色背景 欠痴？
* 你對line-height是如何理解的？
* 設(shè)置元素浮動后秒咨，該元素的display值是多少喇辽？（自動變成display:block）
* 怎么讓Chrome支持小于12px 的文字？
* 讓頁面里的字體變清晰雨席，變細(xì)用CSS怎么做菩咨？（-webkit-font-smoothing: antialiased;）
* font-style屬性可以讓它賦值為“oblique” oblique是什么意思？
* position:fixed;在android下無效怎么處理陡厘？
###如果需要手動寫動畫抽米，你認(rèn)為最小時間間隔是多久，為什么糙置？（阿里）
多數(shù)顯示器默認(rèn)頻率是60Hz云茸，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms
###display:inline-block 什么時候會顯示間隙谤饭？(攜程)
移除空格标捺、使用margin負(fù)值、使用font-size:0揉抵、letter-spacing亡容、word-spacing
* overflow: scroll時不能平滑滾動的問題怎么處理？
* 有一個高度自適應(yīng)的div冤今，里面有兩個div闺兢，一個高度100px，希望另一個填滿剩下的高度辟汰。
* png列敲、jpg、gif 這些圖片格式解釋一下帖汞，分別什么時候用戴而。有沒有了解過webp？
### 什么是Cookie 隔離翩蘸？（或者說：請求資源的時候不要讓它帶cookie怎么做）
如果靜態(tài)文件都放在主域名下所意，那靜態(tài)文件請求的時候都帶有的cookie的數(shù)據(jù)提交給server的，非常浪費(fèi)流量，所以不如隔離開扶踊。
因為cookie有域的限制泄鹏，因此不能跨域提交請求，故使用非主要域名的時候秧耗，請求頭中就不會帶有cookie數(shù)據(jù)备籽，這樣可以降低請求頭的大小，降低請求時間分井，從而達(dá)到降低整體請求延時的目的车猬。
同時這種方式不會將cookie傳入Web Server，也減少了Web Server對cookie的處理分析環(huán)節(jié)尺锚，提高了webserver的http請求的解析速度珠闰。
* style標(biāo)簽寫在body后與body前有什么區(qū)別？
頁面加載自上而下 當(dāng)然是先加載樣式
###什么是CSS 預(yù)處理器 / 后處理器瘫辩？
- 預(yù)處理器例如：LESS伏嗜、Sass、Stylus伐厌，用來預(yù)編譯Sass或less承绸，增強(qiáng)了css代碼的復(fù)用性， 還有層級挣轨、mixin八酒、變量、循環(huán)刃唐、函數(shù)等羞迷，具有很方便的UI組件模塊化開發(fā)能力，極大的提高工作效率画饥。
- 后處理器例如：PostCSS衔瓮，通常被視為在完成的樣式表中根據(jù)CSS規(guī)范處理CSS，讓其更有效抖甘；目前最常做的 是給CSS屬性添加瀏覽器私有前綴热鞍，實現(xiàn)跨瀏覽器兼容性的問題。
[題目收集于網(wǎng)絡(luò)](http://gold.xitu.io/)
### css 題目到此衔彻，后面歡迎評論添加薇宠。