資訊專欄INFORMATION COLUMN
摘要：解決方案為加上使其形成，根據(jù)規(guī)則第六條，計(jì)算高度時(shí)就會(huì)計(jì)算的元素的高度，達(dá)到清除浮動(dòng)影響的效果。并為這個(gè)外層元素設(shè)置，使其形成。生成相對定位的元素，相對于其正常位置進(jìn)行定位。它的所有子元素自動(dòng)成為容器成員，稱為項(xiàng)目，簡稱項(xiàng)目。
原文鏈接在這里
CSS 介紹一下標(biāo)準(zhǔn)的CSS的盒子模型？低版本IE的盒子模型有什么不同的？對BFC規(guī)范(塊級(jí)格式化上下文：block formatting context)的理解？ 1. FC（Formatting Context）（1）有兩種， IE 盒子模型（相當(dāng)于box-sizing: border-box;）、W3C 盒子模型（box-sizing: content-box;）；
（2）盒模型： 內(nèi)容(content)、填充(padding)、邊界(margin)、 邊框(border)；
（3）區(qū) 別： IE的content部分把 border 和 padding計(jì)算了進(jìn)去;
想要理解BFC與IFC，首先要理解FC，即 formatting context，它是W3C CSS2.1規(guī)范中的一個(gè)概念，定義的是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。
常見的Formatting Context 有：Block Formatting Context（BFC | 塊級(jí)格式化上下文） 和 Inline Formatting Context（IFC |行內(nèi)格式化上下文）。
一個(gè)頁面是由很多個(gè) Box 組成的，元素的類型和 display 屬性決定了這個(gè) Box 的類型。不同類型的 Box，會(huì)參與不同的 Formatting Context。
Block level的box會(huì)參與形成BFC，比如display值為block，list-item，table的元素。
Inline level的box會(huì)參與形成IFC，比如display值為inline，inline-table，inline-block的元素。
參考：
W3C文檔block-level
W3C文檔inline-formatting
2. IFC布局規(guī)則：3. BFC布局規(guī)則：在行內(nèi)格式化上下文中，框(boxes)一個(gè)接一個(gè)地水平排列，起點(diǎn)是包含塊的頂部。水平方向上的 margin，border 和 padding在框之間得到保留?？蛟诖怪狈较蛏峡梢砸圆煌姆绞綄R：它們的頂部或底部對齊，或根據(jù)其中文字的基線對齊。包含那些框的長方形區(qū)域，會(huì)形成一行，叫做行框。
4. 怎樣形成一個(gè)BFC？內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。
Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊
每個(gè)元素的左外邊緣（margin-left)， 與包含塊的左邊（border-left）相接觸(對于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。除非這個(gè)元素自己形成了一個(gè)新的BFC。
BFC的區(qū)域不會(huì)與float box重疊。
BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。
計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算
塊級(jí)格式化上下文由以下之一創(chuàng)建：
根元素或其它包含它的元素
浮動(dòng) (元素的 float 不是 none)
絕對定位的元素 (元素具有 position 為 absolute 或 fixed)
元素具有 display: inline-block，table-cell, table-caption, flex, inline-flex
塊元素具有overflow ，且值不是 visible
整理到這兒，對于上面第4條產(chǎn)生了一個(gè)small small的疑問：為什么display: inline-block;的元素是inline level 的元素，參與形成IFC，卻能創(chuàng)建BFC？
自己認(rèn)為答案是這樣的：inline-block的元素的內(nèi)部是一個(gè)BFC，但是它本身可以和其它inline元素一起形成IFC。
5. BFC用處 1. 清除浮動(dòng)1 2
.wrap {
border: 2px solid yellow;
width: 250px;
}
section {
background-color: pink;
float: left;
width: 100px;
height: 100px;
}
可以看到，由于子元素都是浮動(dòng)的，受浮動(dòng)影響，邊框?yàn)辄S色的父元素的高度塌陷了。
解決方案：為 .wrap 加上 overflow: hidden;使其形成BFC，根據(jù)BFC規(guī)則第六條，計(jì)算高度時(shí)就會(huì)計(jì)算float的元素的高度，達(dá)到清除浮動(dòng)影響的效果。
2. 布局：自適應(yīng)兩欄布局我是好多好多文字會(huì)換行的那種蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤
div {width: 200px;}
aside {
background-color: yellow;
float: left;
width: 100px;
height: 50px;
}
main {
background-color: pink;
}
可以看到右側(cè)元素的一部分跑到了左側(cè)元素下方。
解決方案：為main設(shè)置 overflow: hidden; 觸發(fā)main元素的BFC，根據(jù)規(guī)則第4、5條，BFC的區(qū)域是獨(dú)立的，不會(huì)與頁面其他元素相互影響，且不會(huì)與float元素重疊，因此就可以形成兩列自適應(yīng)布局
3. 防止垂直margin合并1 2
section {
background-color: pink;
margin-bottom: 100px;
width: 100px;
height: 100px;
}
.bottom {
margin-top: 100px;
}
可以看到，明明.top和.bottom中間加起來有200px的margin值，但是我們只能看到100px。這是因?yàn)樗麄兊耐膺吘嘞嘤霭l(fā)生了合并。
怎樣解決：為其中一個(gè)元素的外面包裹一層元素。并為這個(gè)外層元素設(shè)置 overflow: hidden;，使其形成BFC。因?yàn)锽FC內(nèi)部是一個(gè)獨(dú)立的容器，所以不會(huì)與外部相互影響，可以防止margin合并。
1 2
.wrap {
overflow: hidden;
}
CSS里有哪幾個(gè)常用的單位？說出他們之間的關(guān)系。
px， em， rem
1em = 當(dāng)前元素父元素的font-size
1rem = html元素的font-size
* 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)先級(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í)高
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)
CSS3新增偽類有那些？
舉例： p:first-of-type 選擇屬于其父元素的首個(gè)如何居中div？元素的每個(gè)
元素。 p:last-of-type 選擇屬于其父元素的最后
元素的每個(gè)
元素。 p:only-of-type 選擇屬于其父元素唯一的
元素的每個(gè)
元素。 p:only-child 選擇屬于其父元素的唯一子元素的每個(gè)
元素。 p:nth-child(2) 選擇屬于其父元素的第二個(gè)子元素的每個(gè)
元素。 :after 在元素之后添加內(nèi)容,也可以用來做清除浮動(dòng)。 :before 在元素之前添加內(nèi)容 :enabled :disabled 控制表單控件的禁用狀態(tài)。 :checked 單選框或復(fù)選框被選中。
* 水平居中：給div設(shè)置一個(gè)寬度，然后添加margin:0 auto屬性
div{
width:200px;
margin:0 auto;
}
* 讓絕對定位的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; /* 相對定位或絕對定位均可 */
width:500px;
height:300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px; /* 外邊距為自身寬高的一半 */
background-color: pink; /* 方便看效果 */
}
* 水平垂直居中二
未知容器的寬高，利用 `transform` 屬性
div {
position: absolute; /* 相對定位或絕對定位均可 */
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; /* 方便看效果 */
}
display有哪些值？說明他們的作用。
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í)表格來顯示。 inherit 規(guī)定應(yīng)該從父元素繼承 display 屬性的值。position的值relative和absolute定位原點(diǎn)是？
absolute
生成絕對定位的元素，相對于值不為 static的第一個(gè)父元素進(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é)點(diǎn)） 圓角 （border-radius:8px） 多列布局 （multi-column layout） 陰影和反射 （ShadowReflect） 文字特效 （text-shadow） 文字渲染 （Text-decoration） 線性漸變 （gradient） 旋轉(zhuǎn) （transform） 縮放,定位,傾斜,動(dòng)畫,多背景 例如:transform:scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)Animation:請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？
一個(gè)用于頁面布局的全新CSS3功能，F(xiàn)lexbox可以把列表放在同一個(gè)方向（從上到下排列，從左到右），并讓列表能延伸到占用可用的空間。 較為復(fù)雜的布局還可以通過嵌套一個(gè)伸縮容器（flex container）來實(shí)現(xiàn)。 采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。 它的所有子元素自動(dòng)成為容器成員，稱為Flex項(xiàng)目（flex item），簡稱"項(xiàng)目"。 常規(guī)布局是基于塊和內(nèi)聯(lián)流方向，而Flex布局是基于flex-flow流可以很方便的用來做局中，能對不同屏幕大小自適應(yīng)。 在布局上有了比以前更加靈活的空間。 具體：http://www.w3cplus.com/css3/flexbox-basics.html用純CSS創(chuàng)建一個(gè)三角形的原理是什么？
**把上、左、右三條邊隱藏掉（顏色設(shè)為 transparent）**
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
一個(gè)滿屏 品 字布局 如何設(shè)計(jì)?
簡單的方式：
上面的div寬100%，
下面的兩個(gè)div分別寬50%，
然后用float或者inline-block使其不換行即可
css多列等高如何實(shí)現(xiàn)？
利用padding-bottom|margin-bottom正負(fù)值相抵； 設(shè)置父容器設(shè)置超出隱藏（overflow:hidden），這樣子父容器的高度就還是它里面的列沒有設(shè)定padding-bottom時(shí)的高度， 當(dāng)它里面的任一列高度增加了，則父容器的高度被撐到里面最高那列的高度， 其他比這列矮的列會(huì)用它們的padding-bottom補(bǔ)償這部分高度差。經(jīng)常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧 ？
* png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.
* 瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來統(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游覽器從所有情況中分離出來。
接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨(dú)立識(shí)別。
css
.bb{
background-color:red;/*所有識(shí)別*/
background-color:#00deff9; /*IE6、7、8識(shí)別*/
+background-color:#a200ff;/*IE6、7識(shí)別*/
_background-color:#1e0bd1;/*IE6識(shí)別*/
}
* IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,
也可以使用getAttribute()獲取自定義屬性;
Firefox下,只能使用getAttribute()獲取自定義屬性。
解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性。
* IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;
Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性。
* 解決方法：（條件注釋）缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請求數(shù)。
* Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示,
可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。
超鏈接訪問過后hover樣式就不出現(xiàn)了 被點(diǎn)擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？
行框的排列會(huì)受到中間空白（回車空格）等的影響，因?yàn)榭崭褚矊儆谧址?這些空白也會(huì)被應(yīng)用樣式，占據(jù)空間，所以會(huì)有間隔，把字符大小設(shè)為0，就沒有空格了。為什么要初始化CSS樣式。
- 因?yàn)闉g覽器的兼容問題，不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的，如果沒對CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁面顯示差異。
- 當(dāng)然，初始化樣式會(huì)對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, 5b8b4f53; }
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(包含塊)計(jì)算方式跟正常流有什么不同？
無論屬于哪種，都要先找到其祖先元素中最近的 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：簡單說就是它的父元素的內(nèi)容框（即去掉padding的部分） 2. absolute: 向上找最近的定位為absolute/relative的元素 3. fixed: 它的containing block一律為根元素(html/body)，根元素也是initial containing blockCSS里的visibility屬性有個(gè)collapse屬性值是干嘛用的？在不同瀏覽器下以后什么區(qū)別？
對于普通元素visibility:collapse;會(huì)將元素完全隱藏,不占據(jù)頁面布局空間,與display:none;表現(xiàn)相同. 如果目標(biāo)元素為table,visibility:collapse;將table隱藏,但是會(huì)占據(jù)頁面布局空間. 僅在Firefox下起作用,IE會(huì)顯示元素,Chrome會(huì)將元素隱藏,但是占據(jù)空間.position跟display、margin collapse、overflow、float這些特性相互疊加后會(huì)怎么樣？
如果元素的display為none,那么元素不被渲染,position,float不起作用,如果元素?fù)碛衟osition:absolute;或者position:fixed;屬性那么元素將為絕對定位,float不起作用.如果元素float屬性不是none,元素會(huì)脫離文檔流,根據(jù)float屬性值來顯示.有浮動(dòng),絕對定位,inline-block屬性的元素,margin不會(huì)和垂直方向上的其他元素margin折疊.請解釋一下為什么需要清除浮動(dòng)？清除浮動(dòng)的方式
清除浮動(dòng)是為了清除使用浮動(dòng)元素產(chǎn)生的影響。浮動(dòng)的元素，高度會(huì)塌陷，而高度的塌陷使我們頁面后面的布局不能正常顯示。
1、父級(jí)div定義height；
2、父級(jí)div 也一起浮動(dòng)；
3、常規(guī)的使用一個(gè)class；
.clearfix:before, .clearfix:after {
content: " ";
display: block;
}
.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)容不可見，并允許可能被生成內(nèi)容蓋住的內(nèi)容可以進(jìn)行點(diǎn)擊和交互;
4）通過 content:"."生成內(nèi)容作為最后一個(gè)元素，至于content里面是點(diǎn)還是其他都是可以的，例如oocss里面就有經(jīng)典的 content:".",有些版本可能content 里面內(nèi)容為空,一絲冰涼是不推薦這樣做的,firefox直到7.0 content:"" 仍然會(huì)產(chǎn)生額外的空隙；
5）zoom：1 觸發(fā)IE hasLayout。
通過分析發(fā)現(xiàn)，除了clear：both用來閉合浮動(dòng)的，其他代碼無非都是為了隱藏掉content生成的內(nèi)容，這也就是其他版本的閉合浮動(dòng)為什么會(huì)有font-size：0，line-height：0。
什么是外邊距合并？
外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。 合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。 w3school介紹網(wǎng)址： http://www.w3school.com.cn/css/css_margin_collapsing.aspzoom:1的清除浮動(dòng)原理?
清除浮動(dòng)，觸發(fā)hasLayout； Zoom屬性是IE瀏覽器的專有屬性，它可以設(shè)置或檢索對象的縮放比例。解決ie下比較奇葩的bug。 譬如外邊距（margin）的重疊，浮動(dòng)清除，觸發(fā)ie的haslayout屬性等。 來龍去脈大概如下： 當(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ò)大的問題。 Zoom屬是IE瀏覽器的專有屬性，火狐和老版本的webkit核心的瀏覽器都不支持這個(gè)屬性。然而，zoom現(xiàn)在已經(jīng)被逐步標(biāo)準(zhǔn)化，出現(xiàn)在 CSS 3.0 規(guī)范草案中。 目前非ie由于不支持這個(gè)屬性，它們又是通過什么屬性來實(shí)現(xiàn)元素的縮放呢？ 可以通過css3里面的動(dòng)畫屬性scale進(jìn)行縮放。移動(dòng)端的布局用過媒體查詢嗎？
假設(shè)你現(xiàn)在正用一臺(tái)顯示設(shè)備來閱讀這篇文章，同時(shí)你也想把它投影到屏幕上，或者打印出來， 而顯示設(shè)備、屏幕投影和打印等這些媒介都有自己的特點(diǎn)，CSS就是為文檔提供在不同媒介上展示的適配方法 當(dāng)媒體查詢?yōu)檎鏁r(shí)，相關(guān)的樣式表或樣式規(guī)則會(huì)按照正常的級(jí)聯(lián)規(guī)被應(yīng)用。 當(dāng)媒體查詢返回假， 標(biāo)簽上帶有媒體查詢的樣式表 仍將被下載 （只不過不會(huì)被應(yīng)用）。 包含了一個(gè)媒體類型和至少一個(gè)使用 寬度、高度和顏色等媒體屬性來限制樣式表范圍的表達(dá)式。 CSS3加入的媒體查詢使得無需修改內(nèi)容便可以使樣式應(yīng)用于某些特定的設(shè)備范圍。使用 CSS 預(yù)處理器嗎？喜歡那個(gè)？
SASS (SASS、LESS沒有本質(zhì)區(qū)別，只因?yàn)閳F(tuán)隊(duì)前端都是用的SASS)什么是CSS 預(yù)處理器 / 后處理器？
- 預(yù)處理器例如：LESS、Sass、Stylus，用來預(yù)編譯Sass或less，增強(qiáng)了css代碼的復(fù)用性， 還有層級(jí)、mixin、變量、循環(huán)、函數(shù)等，具有很方便的UI組件模塊化開發(fā)能力，極大的提高工作效率。 - 后處理器例如：PostCSS，通常被視為在完成的樣式表中根據(jù)CSS規(guī)范處理CSS，讓其更有效；目前最常做的是給CSS屬性添加瀏覽器私有前綴，實(shí)現(xiàn)跨瀏覽器兼容性的問題。CSS優(yōu)化、提高性能的方法有哪些？
關(guān)鍵選擇器（key selector）。選擇器的最后面的部分為關(guān)鍵選擇器（即用來匹配目標(biāo)元素的部分）； 如果規(guī)則擁有 ID 選擇器作為其關(guān)鍵選擇器，則不要為規(guī)則增加標(biāo)簽。過濾掉無關(guān)的規(guī)則（這樣樣式系統(tǒng)就不會(huì)浪費(fèi)時(shí)間去匹配它們了）； 提取項(xiàng)目的通用公有樣式，增強(qiáng)可復(fù)用性，按模塊編寫組件；增強(qiáng)項(xiàng)目的協(xié)同開發(fā)性、可維護(hù)性和可擴(kuò)展性; 使用預(yù)處理工具或構(gòu)建工具（gulp對css進(jìn)行語法檢查、自動(dòng)補(bǔ)前綴、打包壓縮、自動(dòng)優(yōu)雅降級(jí)）；瀏覽器是怎樣解析CSS選擇器的？
樣式系統(tǒng)從關(guān)鍵選擇器開始匹配， 然后左移查找它的祖先元素。 只要選擇器的子樹一直在工作， 樣式系統(tǒng)就會(huì)持續(xù)左移， 直到和規(guī)則匹配， 或者是因?yàn)椴黄ヅ涠艞壴撘?guī)則。在網(wǎng)頁中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢？
偶數(shù)字號(hào)相對更容易和 web 設(shè)計(jì)的其他部分構(gòu)成比例關(guān)系。比如：當(dāng)我用了 14 px 的正文字號(hào)，我可能會(huì)在一些地方用 14 × 0.5 = 7 px 的 margin，在另一些地方用 14 × 1.5 = 21 px 的標(biāo)題字號(hào)。
Windows 自帶的點(diǎn)陣宋體（中易宋體）從 Vista 開始只提供 12、14、16 px 這三個(gè)大小的點(diǎn)陣，而 13、15、17 px 時(shí)用的是小一號(hào)的點(diǎn)陣（即每個(gè)字占的空間大了 1 px，但點(diǎn)陣沒變），于是略顯稀疏。
margin和padding分別適合什么場景使用？margin是用來隔開元素與元素的間距；padding是用來隔開元素與內(nèi)容的間隔。 margin用于布局分開元素使元素與元素互不相干； padding用于元素與內(nèi)容之間的間隔，讓內(nèi)容（文字）與（包裹）元素之間有一段距離元素豎向的百分比設(shè)定是相對于容器的高度嗎？
不是，是容器寬度。
抽離樣式模塊怎么寫，說出思路，有無實(shí)踐經(jīng)驗(yàn)？[阿里航旅]先看視覺稿，把可復(fù)用的組件找出來。然后把命名和結(jié)構(gòu)確定下來。
https://github.com/jayli/jayl...
::before 和 :after中雙冒號(hào)和單冒號(hào) 有什么區(qū)別？解釋一下這2個(gè)偽元素的作用。單冒號(hào)(:)用于CSS3偽類，雙冒號(hào)(::)用于CSS3偽元素。（偽元素由雙冒號(hào)和偽元素名稱組成） 雙冒號(hào)是在當(dāng)前規(guī)范中引入的，用于區(qū)分偽類和偽元素。不過瀏覽器需要同時(shí)支持舊的已經(jīng)存在的偽元素寫法， 比如:first-line、:first-letter、:before、:after等， 而新的在CSS3中引入的偽元素則不允許再支持舊的單冒號(hào)的寫法。 想讓插入的內(nèi)容出現(xiàn)在其它內(nèi)容前，使用::before，否者，使用::after； 在代碼順序上，::after生成的內(nèi)容也比::before生成的內(nèi)容靠后。 如果按堆棧視角，::after生成的內(nèi)容會(huì)在::before生成的內(nèi)容之上如何修改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);
}
你對line-height是如何理解的？
line-height定義行高，設(shè)置行間的距離。應(yīng)用方式是：用line-height減去font-size，得到的差（稱為行間距）除2，分別添加到文本的頂部和底部?？梢园@些內(nèi)容的最小框就是行框。
設(shè)置元素浮動(dòng)后，該元素的display值是多少？自動(dòng)變成了 display:block 用 window.getComputedStyle(element).display 看了一下確實(shí)是 block怎么讓Chrome支持小于12px 的文字？
1、用圖片：如果是內(nèi)容固定不變情況下，使用將小于12px文字內(nèi)容切出做圖片，這樣不影響兼容也不影響美觀。 2、使用12px及12px以上字體大?。簽榱思嫒莞鞔笾髁鳛g覽器，建議設(shè)計(jì)美工圖時(shí)候設(shè)置大于或等于12px的字體大小，如果是接單的這個(gè)時(shí)候就需要給客戶講解小于12px瀏覽器不兼容等事宜。 3、繼續(xù)使用小于12px字體大小樣式設(shè)置：如果不考慮chrome可以不用考慮兼容，同時(shí)在設(shè)置小于12px對象設(shè)置-webkit-text-size-adjust:none，做到最大兼容考慮。 4、使用css3里的一個(gè)屬性：transform：scale（）
p{font-size:10px;-webkit-transform:scale(0.8);}//0.8是縮放比例
讓頁面里的字體變清晰，變細(xì)用CSS怎么做？-webkit-font-smoothing: antialiased;font-style屬性可以讓它賦值為“oblique” oblique是什么意思？
傾斜的字體樣式 與italic的區(qū)別：italic和oblique都是向右傾斜的文字, 但區(qū)別在于Italic是指斜體字，而Oblique是傾斜的文字，對于沒有斜體的字體應(yīng)該使用Oblique屬性值來實(shí)現(xiàn)傾斜的文字效果。也就是說：Italic是使用文字的斜體，Oblique是讓沒有斜體屬性的文字傾斜。如果需要手動(dòng)寫動(dòng)畫，你認(rèn)為最小時(shí)間間隔是多久，為什么？（阿里）
多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60*1000ms ＝ 16.7ms什么是Cookie 隔離？（或者說：請求資源的時(shí)候不要讓它帶cookie怎么做）
如果靜態(tài)文件都放在主域名下，那靜態(tài)文件請求的時(shí)候都是帶著cookie數(shù)據(jù)提交給server的，非常浪費(fèi)流量，所以不如隔離開。 因?yàn)閏ookie有域的限制，因此不能跨域提交請求，故使用非主要域名的時(shí)候，請求頭中就不會(huì)帶有cookie數(shù)據(jù)， 這樣可以降低請求頭的大小，降低請求時(shí)間，從而達(dá)到降低整體請求延時(shí)的目的。 同時(shí)這種方式不會(huì)將cookie傳入Web Server，也減少了Web Server對cookie的處理分析環(huán)節(jié)，提高了webserver的http請求的解析速度。有一個(gè)高度自適應(yīng)的div，里面有兩個(gè)div，一個(gè)高度100px，希望另一個(gè)填滿剩下的高度。
（1）height：calc（100%-100px）
（2）absolute positioning：外層position：relative；
百分百自適應(yīng)元素 position: absolute; top: 100px; bottom: 0; left: 0
（3）flex 父元素display:flex; flex-direction: column; 下面的子元素的設(shè)置flex: 1;
（1）響應(yīng)式網(wǎng)站設(shè)計(jì)(Responsive Web design)的理念是：集中創(chuàng)建頁面的圖片排版大小，可以智
能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境（系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等）進(jìn)行相對應(yīng)的布局。
（2）基本原理: 媒體查詢 @media
（3）兼容IE可以使用JS輔助一下來解決
未打開的鎖#
軟鍵盤喚起后，頁面的 fixed 元素將失效（即無法浮動(dòng)，也可以理解為變成了 absolute 定位），所以當(dāng)頁面超過一屏且滾動(dòng)時(shí)，失效的 fixed 元素就會(huì)跟隨滾動(dòng)了。 既然在 iOS 下由于軟鍵盤喚出后，頁面 fixed 元素會(huì)失效，導(dǎo)致跟隨頁面一起滾動(dòng)，那么假如——頁面不會(huì)過長出現(xiàn)滾動(dòng)，那么即便 fixed 元素失效，也無法跟隨頁面滾動(dòng)，也就不會(huì)出現(xiàn)上面的問題了。按照這個(gè)思路，如果使 fixed 元素的父級(jí)不出現(xiàn)滾動(dòng)，而將原 body 滾動(dòng)的區(qū)域域移到 main 內(nèi)部，而 header 和 footer 的樣式不變。
main {
/* main絕對定位，進(jìn)行內(nèi)部滾動(dòng) */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之可以滾動(dòng) */
overflow-y: scroll;
}
在原始輸入法下， fixed 元素可以定位在頁面的正確位置。滾動(dòng)頁面時(shí)，由于滾動(dòng)的是 main 內(nèi)部的 div，因此 footer 沒有跟隨頁面滾動(dòng)。
上面貌似解決了問題，但是如果在手機(jī)上實(shí)際測試一下，會(huì)發(fā)現(xiàn) main 元素內(nèi)的滾動(dòng)非常不流暢，滑動(dòng)的手指松開后，滾動(dòng)立刻停止，失去了原本的流暢滾動(dòng)特性。百度一下彈性滾動(dòng)的問題，發(fā)現(xiàn)在 webkit 中，下面的屬性可以恢復(fù)彈性滾動(dòng)。
-webkit-overflow-scrolling: touch;
在 main 元素上加上該屬性，嗯，絲般順滑的感覺又回來了！
參考： http://efe.baidu.com/blog/mob...
overflow: scroll時(shí)不能平滑滾動(dòng)的問題怎么處理？答案一：-webkit-overflow-scrolling: touch;
答案二：
（1）高度尺寸不確定的時(shí)候，使用：overflow-y：scroll;
（2）高度尺寸確定的，要么沒有滾動(dòng)條，要么直接出現(xiàn)，不會(huì)出現(xiàn)跳動(dòng)。
（3）css3計(jì)算calc和vw單位巧妙實(shí)現(xiàn)滾動(dòng)條出現(xiàn)頁面不跳動(dòng)：
.wrap-outer {
margin-left: calc(100vw - 100%);
}
或.wrap-outer {
padding-left: calc(100vw - 100%);
}
首先，.wrap-outer指的是居中定寬主體的父級(jí)，如果沒有，創(chuàng)建一個(gè)
然后，calc是css3的計(jì)算
100vw是瀏覽器的內(nèi)部寬度，而100%是可用寬度，不含滾動(dòng)條
calc（100vw-100%）是瀏覽器的滾動(dòng)條的寬度
寫在head標(biāo)簽中利于瀏覽器逐步渲染（resources downloading->CSSOM+DOM->RenderTree(composite)->Layout->paint）。具體渲染過程請參考
http://blog.csdn.net/wozaixia...
寫在body標(biāo)簽后由于瀏覽器以逐行方式對html文檔進(jìn)行解析，當(dāng)解析到寫在尾部的樣式表（外聯(lián)或?qū)懺趕tyle標(biāo)簽）會(huì)導(dǎo)致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之后重新渲染，在windows的IE下可能會(huì)出現(xiàn)FOUC現(xiàn)象（即樣式失效導(dǎo)致的頁面閃爍問題）
基礎(chǔ)知識(shí)——瀏覽器的渲染過程：
Create/Update DOM And request css/image/js：瀏覽器請求到HTML代碼后，在生成DOM的最開始階段（應(yīng)該是 Bytes → characters 后），并行發(fā)起css、圖片、js的請求，無論他們是否在HEAD里。
注意：發(fā)起 js 文件的下載 request 并不需要 DOM 處理到那個(gè) script 節(jié)點(diǎn)，比如：簡單的正則匹配就能做到這一點(diǎn)，雖然實(shí)際上并不一定是通過正則：）。這是很多人在理解渲染機(jī)制的時(shí)候存在的誤區(qū)。
Create/Update Render CSSOM：CSS文件下載完成，開始構(gòu)建CSSOM
Create/Update Render Tree：所有CSS文件下載完成，CSSOM構(gòu)建結(jié)束后，和 DOM 一起生成 Render Tree。
Layout：有了Render Tree，瀏覽器已經(jīng)能知道網(wǎng)頁中有哪些節(jié)點(diǎn)、各個(gè)節(jié)點(diǎn)的CSS定義以及他們的從屬關(guān)系。下一步操作稱之為Layout，顧名思義就是計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置。
Painting：Layout后，瀏覽器已經(jīng)知道了哪些節(jié)點(diǎn)要顯示（which nodes are visible）、每個(gè)節(jié)點(diǎn)的CSS屬性是什么（their computed styles）、每個(gè)節(jié)點(diǎn)在屏幕中的位置是哪里（geometry）。就進(jìn)入了最后一步：Painting，按照算出來的規(guī)則，通過顯卡，把內(nèi)容畫到屏幕上。
補(bǔ)充：
Repaint（重繪）：屏幕的一部分要重畫。
Reflow（回流）：元件的幾何尺寸變化了。要重新驗(yàn)證并計(jì)算Render Tree
聯(lián)想——