CSS
1、介紹一下標(biāo)準(zhǔn)的CSS的盒子模型桌粉？低版本IE的盒子模型有什么不同的？
（1）有兩種衙四，IE盒子模型铃肯、W3C盒子模型；
（2）盒模型：內(nèi)容(content)传蹈、填充(padding)押逼、邊界(margin)、邊框(border)惦界；
（3）區(qū)別：IE的content部分把border和padding計(jì)算了進(jìn)去;
2挑格、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;
*不可繼承的樣式：borderpadding margin width height ;
3漂彤、CSS優(yōu)先級(jí)算法如何計(jì)算？
*優(yōu)先級(jí)就近原則，同權(quán)重情況下樣式定義最近者為準(zhǔn);
*載入樣式以最后載入的定位為準(zhǔn);
優(yōu)先級(jí)為:
同權(quán)重:內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部）>嵌入樣式表（當(dāng)前文件中）>外部樣式表（外部文件中）挫望。
!important >? id > class > tag
important比內(nèi)聯(lián)優(yōu)先級(jí)高
4立润、CSS3新增偽類有那些？
舉例：
p:first-of-type選擇屬于其父元素的首個(gè)
元素的每個(gè)
元素士骤。p:last-of-type選擇屬于其父元素的最后
元素的每個(gè)
元素范删。
p:only-of-type選擇屬于其父元素唯一的
元素的每個(gè)
元素蕾域。
p:only-child選擇屬于其父元素的唯一子元素的每個(gè)
元素拷肌。
p:nth-child(2)選擇屬于其父元素的第二個(gè)子元素的每個(gè)
元素。
:after在元素之前添加內(nèi)容,也可以用來(lái)做清除浮動(dòng)旨巷。
:before在元素之后添加內(nèi)容
:enabled
:disabled控制表單控件的禁用狀態(tài)巨缘。
:checked單選框或復(fù)選框被選中。
5采呐、如何居中div若锁？
水平居中：給div設(shè)置一個(gè)寬度，然后添加margin:0 auto屬性
div{
width:200px;
margin:0 auto;
}
讓絕對(duì)定位的div居中
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto;
top:0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; /*方便看效果*/
}
水平垂直居中一
確定容器的寬高寬500高300的層
設(shè)置層的外邊距
div {
position: relative;???? /*相對(duì)定位或絕對(duì)定位均可*/
width:500px;
height:300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px;????? /*外邊距為自身寬高的一半*/
background-color: pink;???? /*方便看效果*/
}
水平垂直居中二
未知容器的寬高斧吐，利用`transform`屬性
div {
position: absolute;???? /*相對(duì)定位或絕對(duì)定位均可*/
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink;???? /*方便看效果*/
}
水平垂直居中三
利用flex布局
實(shí)際使用時(shí)應(yīng)考慮兼容性
.container {
display: flex;
align-items: center;??????? /*垂直居中*/
justify-content: center;??? /*水平居中*/
}
.container div {
width: 100px;
height: 100px;
background-color: pink;???? /*方便看效果*/
}
6又固、display有哪些值？說(shuō)明他們的作用煤率。
block塊類型仰冠。默認(rèn)寬度為父元素寬度，可設(shè)置寬高蝶糯，換行顯示洋只。
none缺省值。象行內(nèi)元素類型一樣顯示昼捍。
inline行內(nèi)元素類型识虚。默認(rèn)寬度為內(nèi)容寬度，不可設(shè)置寬高妒茬，同行顯示担锤。
inline-block默認(rèn)寬度為內(nèi)容寬度，可以設(shè)置寬高乍钻，同行顯示肛循。
list-item象塊類型元素一樣顯示，并添加樣式列表標(biāo)記团赁。
table此元素會(huì)作為塊級(jí)表格來(lái)顯示育拨。
inherit規(guī)定應(yīng)該從父元素繼承display屬性的值。
7欢摄、position的值relative和absolute定位原點(diǎn)是熬丧？
absolute
生成絕對(duì)定位的元素，相對(duì)于值不為static的第一個(gè)父元素進(jìn)行定位怀挠。
fixed（老IE不支持）
生成絕對(duì)定位的元素析蝴，相對(duì)于瀏覽器窗口進(jìn)行定位害捕。
relative
生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位闷畸。
static
默認(rèn)值尝盼。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略top, bottom, left, right z-index聲明）佑菩。
inherit
規(guī)定從父元素繼承position屬性的值盾沫。
8、CSS3有哪些新特性殿漠？
新增各種CSS選擇器（: not(.input)：所有class不是“input”的節(jié)點(diǎn)）
圓角（border-radius:8px）
多列布局（multi-column layout）
陰影和反射（Shadow\Reflect）
文字特效（text-shadow肮韧、）
文字渲染（Text-decoration）
線性漸變（gradient）
旋轉(zhuǎn)（transform）
縮放,定位,傾斜,動(dòng)畫(huà),多背景
例如:
transform:\scale(0.85,0.90)\
translate(0px,-30px)\
skew(-9deg,0deg)\Animation:
9帽揪、請(qǐng)解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場(chǎng)景携兵？
一個(gè)用于頁(yè)面布局的全新CSS3功能则披，F(xiàn)lexbox可以把列表放在同一個(gè)方向（從上到下排列，從左到右）莲蜘，并讓列表能延伸到占用可用的空間谭确。
較為復(fù)雜的布局還可以通過(guò)嵌套一個(gè)伸縮容器（flex container）來(lái)實(shí)現(xiàn)。
采用Flex布局的元素票渠，稱為Flex容器（flexcontainer）逐哈，簡(jiǎn)稱"容器"。
它的所有子元素自動(dòng)成為容器成員庄新，稱為Flex項(xiàng)目（flex item）鞠眉，簡(jiǎn)稱"項(xiàng)目"。
常規(guī)布局是基于塊和內(nèi)聯(lián)流方向择诈，而Flex布局是基于flex-flow流可以很方便的用來(lái)做局中械蹋，能對(duì)不同屏幕大小自適應(yīng)。
在布局上有了比以前更加靈活的空間羞芍。
10哗戈、用純CSS創(chuàng)建一個(gè)三角形的原理是什么？
把上荷科、左唯咬、右三條邊隱藏掉（顏色設(shè)為transparent）
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
11、一個(gè)滿屏品字布局如何設(shè)計(jì)?
簡(jiǎn)單的方式：
上面的div寬100%畏浆，
下面的兩個(gè)div分別寬50%胆胰，
然后用float或者inline使其不換行即可
12、css多列等高如何實(shí)現(xiàn)刻获？
利用padding-bottom|margin-bottom正負(fù)值相抵蜀涨；
設(shè)置父容器設(shè)置超出隱藏（overflow:hidden），這樣子父容器的高度就還是它里面的列沒(méi)有設(shè)定padding-bottom時(shí)的高度，
當(dāng)它里面的任一列高度增加了厚柳，則父容器的高度被撐到里面最高那列的高度氧枣，
其他比這列矮的列會(huì)用它們的padding-bottom補(bǔ)償這部分高度差。
13别垮、經(jīng)常遇到的瀏覽器的兼容性有哪些便监？原因，解決方法是什么碳想，常用hack的技巧烧董？
* png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.
*瀏覽器默認(rèn)的margin和padding不同移袍。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來(lái)統(tǒng)一解藻。
* IE6雙邊距bug:塊屬性標(biāo)簽float后老充，又有橫行的margin情況下葡盗，在ie6顯示margin比設(shè)置的大。
浮動(dòng)ie產(chǎn)生的雙倍距離#box{float:left; width:10px; margin:0 0 0 100px;}
這種情況之下IE會(huì)產(chǎn)生20px的距離啡浊，解決方案是在float的標(biāo)簽樣式控制中加入——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性觅够。(_這個(gè)符號(hào)只有ie6會(huì)識(shí)別)
漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部巷嚣。
首先喘先，巧妙的使用“\9”這一標(biāo)記，將IE游覽器從所有情況中分離出來(lái)廷粒。
接著窘拯，再次使用“+”將IE8和IE7、IE6分離開(kāi)來(lái)坝茎，這樣IE8已經(jīng)獨(dú)立識(shí)別涤姊。
css
.bb{
background-color:red;/*所有識(shí)別*/
background-color:#00deff\9; /*IE6、7嗤放、8識(shí)別*/
+background-color:#a200ff;/*IE6思喊、7識(shí)別*/
_background-color:#1e0bd1;/*IE6識(shí)別*/
}
*? IE下,可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性,
也可以使用getAttribute()獲取自定義屬性;
Firefox下,只能使用getAttribute()獲取自定義屬性。
解決方法:統(tǒng)一通過(guò)getAttribute()獲取自定義屬性次酌。
*? IE下,even對(duì)象有x,y屬性,但是沒(méi)有pageX,pageY屬性;
Firefox下,event對(duì)象有pageX,pageY屬性,但是沒(méi)有x,y屬性恨课。
*解決方法：（條件注釋）缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)。
*?Chrome中文界面下默認(rèn)會(huì)將小于12px的文本強(qiáng)制按照12px顯示,
可通過(guò)加入CSS屬性-webkit-text-size-adjust: none;解決岳服。
超鏈接訪問(wèn)過(guò)后hover樣式就不出現(xiàn)了被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
L-V-H-A :?a:link {} a:visited {} a:hover {} a:active {}
14剂公、li與li之間有看不見(jiàn)的空白間隔是什么原因引起的？有什么解決辦法吊宋？
行框的排列會(huì)受到中間空白（回車\空格）等的影響纲辽，因?yàn)榭崭褚矊儆谧址?這些空白也會(huì)被應(yīng)用樣式，占據(jù)空間，所以會(huì)有間隔文兑，把字符大小設(shè)為0盒刚，就沒(méi)有空格了。
15绿贞、為什么要初始化CSS樣式因块。
-因?yàn)闉g覽器的兼容問(wèn)題，不同瀏覽器對(duì)有些標(biāo)簽的默認(rèn)值是不同的籍铁，如果沒(méi)對(duì)CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁(yè)面顯示差異涡上。
-當(dāng)然，初始化樣式會(huì)對(duì)SEO有一定的影響拒名，但魚(yú)和熊掌不可兼得吩愧，但力求影響最小的情況下初始化。
最簡(jiǎn)單的初始化方法：* {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; }
16增显、absolute的containingblock(容器塊)計(jì)算方式跟正常流有什么不同雁佳？
無(wú)論屬于哪種，都要先找到其祖先元素中最近的position值不為static的元素同云，然后再判斷：
（1）若此元素為inline元素糖权，則containing block為能夠包含這個(gè)元素生成的第一個(gè)和最后一個(gè)inline box的padding box (除margin, border外的區(qū)域)的最小矩形；
（2）否則,則由這個(gè)祖先元素的padding box構(gòu)成炸站。
如果都找不到星澳，則為initial containing block。
補(bǔ)充：
（1）static(默認(rèn)的)/relative：簡(jiǎn)單說(shuō)就是它的父元素的內(nèi)容框（即去掉padding的部分）
（2） absolute:向上找最近的定位為absolute/relative的元素
（3） fixed:它的containing block一律為根元素(html/body)旱易，根元素也是initialcontaining block
17禁偎、對(duì)BFC規(guī)范(塊級(jí)格式化上下文：blockformatting context)的理解？
（W3C CSS 2.1規(guī)范中的一個(gè)概念,它是一個(gè)獨(dú)立容器阀坏，決定了元素如何對(duì)其內(nèi)容進(jìn)行定位,以及與其他元素的關(guān)系和相互作用如暖。）
一個(gè)頁(yè)面是由很多個(gè)Box組成的,元素的類型和display屬性,決定了這個(gè)Box的類型。
不同類型的Box,會(huì)參與不同的Formatting Context（決定如何渲染文檔的容器）,因此Box內(nèi)的元素會(huì)以不同的方式渲染,也就是說(shuō)BFC內(nèi)部的元素和外部的元素不會(huì)互相影響全释。
18装处、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)重相同，則最后定義的樣式會(huì)起作用李命，但是應(yīng)該避免這種情況出現(xiàn)
19登淘、請(qǐng)解釋一下為什么需要清除浮動(dòng)？清除浮動(dòng)的方式
清除浮動(dòng)是為了清除使用浮動(dòng)元素產(chǎn)生的影響封字。浮動(dòng)的元素黔州，高度會(huì)塌陷耍鬓，而高度的塌陷使我們頁(yè)面后面的布局不能正常顯示。
（1）父級(jí)div定義height流妻；
（2）父級(jí)div也一起浮動(dòng)牲蜀；
（3）常規(guī)的使用一個(gè)class；
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
（4）SASS編譯的時(shí)候绅这，浮動(dòng)元素的父級(jí)div定義偽類:after
&:after,&:before{
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
解析原理：
1) display:block使生成的元素以塊級(jí)元素顯示,占滿剩余空間;
2) height:0避免生成內(nèi)容破壞原有布局的高度涣达。
3) visibility:hidden使生成的內(nèi)容不可見(jiàn)，并允許可能被生成內(nèi)容蓋住的內(nèi)容可以進(jìn)行點(diǎn)擊和交互;
4）通過(guò)content:"."生成內(nèi)容作為最后一個(gè)元素证薇，至于content里面是點(diǎn)還是其他都是可以的度苔，例如oocss里面就有經(jīng)典的content:".",有些版本可能content里面內(nèi)容為空,一絲冰涼是不推薦這樣做的,firefox直到7.0content:”"仍然會(huì)產(chǎn)生額外的空隙；
5）zoom：1觸發(fā)IEhasLayout浑度。
通過(guò)分析發(fā)現(xiàn)寇窑，除了clear：both用來(lái)閉合浮動(dòng)的，其他代碼無(wú)非都是為了隱藏掉content生成的內(nèi)容箩张，這也就是其他版本的閉合浮動(dòng)為什么會(huì)有font-size：0甩骏，line-height：0。
20伏钠、什么是外邊距合并横漏？
外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)熟掂，它們將形成一個(gè)外邊距。
合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者扎拣。
21赴肚、zoom:1的清除浮動(dòng)原理?
清除浮動(dòng)，觸發(fā)hasLayout二蓝；
Zoom屬性是IE瀏覽器的專有屬性誉券，它可以設(shè)置或檢索對(duì)象的縮放比例。解決ie下比較奇葩的bug刊愚。
譬如外邊距（margin）的重疊踊跟，浮動(dòng)清除，觸發(fā)ie的haslayout屬性等鸥诽。
來(lái)龍去脈大概如下：
當(dāng)設(shè)置了zoom的值之后商玫，所設(shè)置的元素就會(huì)就會(huì)擴(kuò)大或者縮小，高度寬度就會(huì)重新計(jì)算了牡借，這里一旦改變zoom值時(shí)其實(shí)也會(huì)發(fā)生重新渲染拳昌，運(yùn)用這個(gè)原理，也就解決了ie下子元素浮動(dòng)時(shí)候父元素不隨著自動(dòng)擴(kuò)大的問(wèn)題钠龙。
Zoom屬是IE瀏覽器的專有屬性炬藤，火狐和老版本的webkit核心的瀏覽器都不支持這個(gè)屬性御铃。然而，zoom現(xiàn)在已經(jīng)被逐步標(biāo)準(zhǔn)化沈矿，出現(xiàn)在CSS 3.0規(guī)范草案中上真。
目前非ie由于不支持這個(gè)屬性，它們又是通過(guò)什么屬性來(lái)實(shí)現(xiàn)元素的縮放呢羹膳？
可以通過(guò)css3里面的動(dòng)畫(huà)屬性scale進(jìn)行縮放谷羞。
22、移動(dòng)端的布局用過(guò)媒體查詢嗎溜徙？
假設(shè)你現(xiàn)在正用一臺(tái)顯示設(shè)備來(lái)閱讀這篇文章湃缎，同時(shí)你也想把它投影到屏幕上，或者打印出來(lái)蠢壹，而顯示設(shè)備嗓违、屏幕投影和打印等這些媒介都有自己的特點(diǎn)，CSS就是為文檔提供在不同媒介上展示的適配方法
當(dāng)媒體查詢?yōu)檎鏁r(shí)图贸，相關(guān)的樣式表或樣式規(guī)則會(huì)按照正常的級(jí)聯(lián)規(guī)被應(yīng)用蹂季。當(dāng)媒體查詢返回假，標(biāo)簽上帶有媒體查詢的樣式表仍將被下載（只不過(guò)不會(huì)被應(yīng)用）疏日。
包含了一個(gè)媒體類型和至少一個(gè)使用寬度偿洁、高度和顏色等媒體屬性來(lái)限制樣式表范圍的表達(dá)式。CSS3加入的媒體查詢使得無(wú)需修改內(nèi)容便可以使樣式應(yīng)用于某些特定的設(shè)備范圍沟优。
@media (min-width: 700px) and (orientation:landscape){ .sidebar { display: none; } }
23涕滋、使用CSS預(yù)處理器嗎？喜歡那個(gè)挠阁？
SASS (SASS宾肺、LESS沒(méi)有本質(zhì)區(qū)別，只因?yàn)閳F(tuán)隊(duì)前端都是用的SASS)
24侵俗、CSS優(yōu)化锨用、提高性能的方法有哪些？
關(guān)鍵選擇器（key selector）隘谣。選擇器的最后面的部分為關(guān)鍵選擇器（即用來(lái)匹配目標(biāo)元素的部分）增拥；
如果規(guī)則擁有ID選擇器作為其關(guān)鍵選擇器，則不要為規(guī)則增加標(biāo)簽寻歧。過(guò)濾掉無(wú)關(guān)的規(guī)則（這樣樣式系統(tǒng)就不會(huì)浪費(fèi)時(shí)間去匹配它們了）掌栅；
提取項(xiàng)目的通用公有樣式，增強(qiáng)可復(fù)用性熄求，按模塊編寫(xiě)組件渣玲；增強(qiáng)項(xiàng)目的協(xié)同開(kāi)發(fā)性、可維護(hù)性和可擴(kuò)展性;
使用預(yù)處理工具或構(gòu)建工具（gulp對(duì)css進(jìn)行語(yǔ)法檢查弟晚、自動(dòng)補(bǔ)前綴忘衍、打包壓縮逾苫、自動(dòng)優(yōu)雅降級(jí)）；
25枚钓、瀏覽器是怎樣解析CSS選擇器的铅搓？
樣式系統(tǒng)從關(guān)鍵選擇器開(kāi)始匹配，然后左移查找規(guī)則選擇器的祖先元素搀捷。
只要選擇器的子樹(shù)一直在工作星掰，樣式系統(tǒng)就會(huì)持續(xù)左移，直到和規(guī)則匹配嫩舟，或者是因?yàn)椴黄ヅ涠艞壴撘?guī)則氢烘。
--
26、-margin和padding分別適合什么場(chǎng)景使用家厌？
margin是用來(lái)隔開(kāi)元素與元素的間距播玖；padding是用來(lái)隔開(kāi)元素與內(nèi)容的間隔。
margin用于布局分開(kāi)元素使元素與元素互不相干饭于；
padding用于元素與內(nèi)容之間的間隔蜀踏，讓內(nèi)容（文字）與（包裹）元素之間有一段
27、::before和:after中雙冒號(hào)和單冒號(hào)有什么區(qū)別掰吕？解釋一下這2個(gè)偽元素的作用果覆。
單冒號(hào)(:)用于CSS3偽類，雙冒號(hào)(::)用于CSS3偽元素殖熟。（偽元素由雙冒號(hào)和偽元素名稱組成）
雙冒號(hào)是在當(dāng)前規(guī)范中引入的局待，用于區(qū)分偽類和偽元素。不過(guò)瀏覽器需要同時(shí)支持舊的已經(jīng)存在的偽元素寫(xiě)法吗讶，
比如:first-line燎猛、:first-letter、:before照皆、:after等，
而新的在CSS3中引入的偽元素則不允許再支持舊的單冒號(hào)的寫(xiě)法沸停。
想讓插入的內(nèi)容出現(xiàn)在其它內(nèi)容前膜毁，使用::before，否者愤钾，使用::after瘟滨；
在代碼順序上，::after生成的內(nèi)容也比::before生成的內(nèi)容靠后能颁。
如果按堆棧視角杂瘸，::after生成的內(nèi)容會(huì)在::before生成的內(nèi)容之上
28、如何修改chrome記住密碼后自動(dòng)填充表單的黃色背景伙菊？
input:-webkit-autofill,textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(250, 255, 189); /* #FAFFBD; */
background-image: none;
color: rgb(0, 0, 0);
}
29败玉、設(shè)置元素浮動(dòng)后敌土，該元素的display值是多少？
自動(dòng)變成了display:block
30运翼、怎么讓Chrome支持小于12px的文字返干？
（1）用圖片：如果是內(nèi)容固定不變情況下，使用將小于12px文字內(nèi)容切出做圖片血淌，這樣不影響兼容也不影響美觀矩欠。
（2）使用12px及12px以上字體大小：為了兼容各大主流瀏覽器悠夯，建議設(shè)計(jì)美工圖時(shí)候設(shè)置大于或等于12px的字體大小癌淮，如果是接單的這個(gè)時(shí)候就需要給客戶講解小于12px瀏覽器不兼容等事宜。
（3）繼續(xù)使用小于12px字體大小樣式設(shè)置：如果不考慮chrome可以不用考慮兼容沦补，同時(shí)在設(shè)置小于12px對(duì)象設(shè)置-webkit-text-size-adjust:none乳蓄，做到最大兼容考慮。
（4）使用12px以上字體：為了兼容策彤、為了代碼更簡(jiǎn)單從新考慮權(quán)重下兼容性栓袖。
31、讓頁(yè)面里的字體變清晰店诗，變細(xì)用CSS怎么做裹刮？
-webkit-font-smoothing: antialiased;
32、font-style屬性可以讓它賦值為“oblique”oblique是什么意思庞瘸？
傾斜的字體樣式
33捧弃、position:fixed;在android下無(wú)效怎么處理？
fixed的元素是相對(duì)整個(gè)頁(yè)面固定位置的擦囊，你在屏幕上滑動(dòng)只是在移動(dòng)這個(gè)所謂的viewport违霞，
原來(lái)的網(wǎng)頁(yè)還好好的在那，fixed的內(nèi)容也沒(méi)有變過(guò)位置瞬场，
所以說(shuō)并不是iOS不支持fixed买鸽，只是fixed的元素不是相對(duì)手機(jī)屏幕固定的。
34贯被、如果需要手動(dòng)寫(xiě)動(dòng)畫(huà)眼五，你認(rèn)為最小時(shí)間間隔是多久，為什么彤灶？（阿里）
多數(shù)顯示器默認(rèn)頻率是60Hz看幼，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms＝16.7ms
35幌陕、display:inline-block什么時(shí)候會(huì)顯示間隙诵姜？(攜程)
移除空格、使用margin負(fù)值搏熄、使用font-size:0棚唆、letter-spacing暇赤、word-spacing
36、什么是Cookie隔離瑟俭？（或者說(shuō)：請(qǐng)求資源的時(shí)候不要讓它帶cookie怎么做）
如果靜態(tài)文件都放在主域名下翎卓，那靜態(tài)文件請(qǐng)求的時(shí)候都帶有的cookie的數(shù)據(jù)提交給server的，非常浪費(fèi)流量摆寄，
所以不如隔離開(kāi)失暴。
因?yàn)閏ookie有域的限制，因此不能跨域提交請(qǐng)求微饥，故使用非主要域名的時(shí)候逗扒，請(qǐng)求頭中就不會(huì)帶有cookie數(shù)據(jù)，
這樣可以降低請(qǐng)求頭的大小欠橘，降低請(qǐng)求時(shí)間矩肩，從而達(dá)到降低整體請(qǐng)求延時(shí)的目的。
同時(shí)這種方式不會(huì)將cookie傳入Web Server肃续，也減少了Web Server對(duì)cookie的處理分析環(huán)節(jié)黍檩，
提高了webserver的http請(qǐng)求的解析速度。
37始锚、什么是CSS預(yù)處理器/后處理器刽酱？
-預(yù)處理器例如：LESS、Sass瞧捌、Stylus棵里，用來(lái)預(yù)編譯Sass或less，增強(qiáng)了css代碼的復(fù)用性姐呐，
還有層級(jí)殿怜、mixin、變量曙砂、循環(huán)头谜、函數(shù)等，具有很方便的UI組件模塊化開(kāi)發(fā)能力鸠澈，極大的提高工作效率乔夯。
-后處理器例如：PostCSS，通常被視為在完成的樣式表中根據(jù)CSS規(guī)范處理CSS款侵，讓其更有效；目前最常做的
是給CSS屬性添加瀏覽器私有前綴侧纯，實(shí)現(xiàn)跨瀏覽器兼容性的問(wèn)題新锈。
京程一燈，夢(mèng)起的地方眶熬，我們始終相信通過(guò)努力妹笆，可以改變自己的命運(yùn)块请。
我們始終相信，通過(guò)堅(jiān)持不懈拳缠，可以為大家解決更多的前端技術(shù)問(wèn)題墩新。
我們始終相信，時(shí)間可以證明窟坐，我們可以為廣大IT從業(yè)者解決前端學(xué)習(xí)路線海渊。
HTML5，CSS3哲鸳，Web前端臣疑，jquery，javascript徙菠，前端學(xué)習(xí)路線讯沈，各類問(wèn)題，我們都可以為你解決婿奔。
更多技術(shù)好文缺狠，前端問(wèn)題，面試技巧萍摊，請(qǐng)關(guān)注京程一燈（原一燈學(xué)堂）
