摘要：解決方案為加上使其形成，根據規則第六條，計算高度時就會計算的元素的高度，達到清除浮動影響的效果。并為這個外層元素設置，使其形成。生成相對定位的元素，相對于其正常位置進行定位。它的所有子元素自動成為容器成員，稱為項目，簡稱項目。

原文鏈接在這里

CSS 介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

（1）有兩種， IE 盒子模型（相當于box-sizing: border-box;）、W3C 盒子模型（box-sizing: content-box;）；
（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
（3）區  別： IE的content部分把 border 和 padding計算了進去;

對BFC規范(塊級格式化上下文：block formatting context)的理解？ 1. FC（Formatting Context）

想要理解BFC與IFC，首先要理解FC，即 formatting context，它是W3C CSS2.1規范中的一個概念，定義的是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。

常見的Formatting Context 有：Block Formatting Context（BFC | 塊級格式化上下文） 和 Inline Formatting Context（IFC |行內格式化上下文）。

一個頁面是由很多個 Box 組成的，元素的類型和 display 屬性決定了這個 Box 的類型。不同類型的 Box，會參與不同的 Formatting Context。

Block level的box會參與形成BFC，比如display值為block，list-item，table的元素。

Inline level的box會參與形成IFC，比如display值為inline，inline-table，inline-block的元素。

參考：

W3C文檔block-level

W3C文檔inline-formatting

2. IFC布局規則：

在行內格式化上下文中，框(boxes)一個接一個地水平排列，起點是包含塊的頂部。水平方向上的 margin，border 和 padding在框之間得到保留。框在垂直方向上可以以不同的方式對齊：它們的頂部或底部對齊，或根據其中文字的基線對齊。包含那些框的長方形區域，會形成一行，叫做行框。

3. BFC布局規則：

內部的Box會在垂直方向，一個接一個地放置。

Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊

每個元素的左外邊緣（margin-left)， 與包含塊的左邊（border-left）相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。除非這個元素自己形成了一個新的BFC。

BFC的區域不會與float box重疊。

BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。

計算BFC的高度時，浮動元素也參與計算

4. 怎樣形成一個BFC？

塊級格式化上下文由以下之一創建：

根元素或其它包含它的元素

浮動 (元素的 float 不是 none)

絕對定位的元素 (元素具有 position 為 absolute 或 fixed)

元素具有 display: inline-block，table-cell, table-caption, flex, inline-flex

塊元素具有overflow ，且值不是 visible

整理到這兒，對于上面第4條產生了一個small small的疑問：為什么display: inline-block;的元素是inline level 的元素，參與形成IFC，卻能創建BFC？

自己認為答案是這樣的：inline-block的元素的內部是一個BFC，但是它本身可以和其它inline元素一起形成IFC。

5. BFC用處 1. 清除浮動

1
2

.wrap {
  border: 2px solid yellow;
  width: 250px;
}
section {
  background-color: pink;
  float: left;
  width: 100px;
  height: 100px;
}

可以看到，由于子元素都是浮動的，受浮動影響，邊框為黃色的父元素的高度塌陷了。

解決方案：為 .wrap 加上 overflow: hidden;使其形成BFC，根據BFC規則第六條，計算高度時就會計算float的元素的高度，達到清除浮動影響的效果。

2. 布局：自適應兩欄布局

我是好多好多文字會換行的那種蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤蛤

div {width: 200px;}
aside {
  background-color: yellow;
  float: left;
  width: 100px;
  height: 50px;
}
main {
  background-color: pink;
}

可以看到右側元素的一部分跑到了左側元素下方。

解決方案：為main設置 overflow: hidden; 觸發main元素的BFC，根據規則第4、5條，BFC的區域是獨立的，不會與頁面其他元素相互影響，且不會與float元素重疊，因此就可以形成兩列自適應布局

3. 防止垂直margin合并

1
2

section {
  background-color: pink;
  margin-bottom: 100px;
  width: 100px;
  height: 100px;
}
.bottom {
  margin-top: 100px;
}

可以看到，明明.top和.bottom中間加起來有200px的margin值，但是我們只能看到100px。這是因為他們的外邊距相遇發生了合并。

怎樣解決：為其中一個元素的外面包裹一層元素。并為這個外層元素設置 overflow: hidden;，使其形成BFC。因為BFC內部是一個獨立的容器，所以不會與外部相互影響，可以防止margin合并。

1

2

.wrap {
  overflow: hidden;
}

CSS里有哪幾個常用的單位？說出他們之間的關系。

px， em， rem

1em = 當前元素父元素的font-size
1rem = html元素的font-size

CSS選擇符有哪些？哪些屬性可以繼承？

    *   1.id選擇器（ # myid）
        2.類選擇器（.myclassname）
        3.標簽選擇器（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優先級算法如何計算？

*   優先級就近原則，同權重情況下樣式定義最近者為準;
*   載入樣式以最后載入的定位為準;

優先級為:
    同權重: 內聯樣式表（標簽內部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）。
    !important >  id > class > tag
    important 比 內聯優先級高

CSS定義的權重

    以下是權重的規則：標簽的權重為1，class的權重為10，id的權重為100，以下例子是演示各種定義的權重值：

    /*權重為1*/
    div{
    }
    /*權重為10*/
    .class1{
    }
    /*權重為100*/
    #id1{
    }
    /*權重為100+1=101*/
    #id1 div{
    }
    /*權重為10+1=11*/
    .class1 div{
    }
    /*權重為10+10+1=21*/
    .class1 .class2 div{
    }

    如果權重相同，則最后定義的樣式會起作用，但是應該避免這種情況出現

CSS3新增偽類有那些？

舉例：
p:first-of-type    選擇屬于其父元素的首個 
 元素的每個 
 元素。
p:last-of-type    選擇屬于其父元素的最后 
 元素的每個 
 元素。
p:only-of-type    選擇屬于其父元素唯一的 
 元素的每個 
 元素。
p:only-child        選擇屬于其父元素的唯一子元素的每個 
 元素。
p:nth-child(2)    選擇屬于其父元素的第二個子元素的每個 
 元素。

:after            在元素之后添加內容,也可以用來做清除浮動。
:before            在元素之前添加內容
:enabled          
:disabled         控制表單控件的禁用狀態。
:checked        單選框或復選框被選中。

如何居中div？

*  水平居中：給div設置一個寬度，然后添加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 的層
        設置層的外邊距

        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 布局
        實際使用時應考慮兼容性

        .container {
            display: flex;
            align-items: center;         /* 垂直居中 */
            justify-content: center;    /* 水平居中 */

        }
        .container div {
            width: 100px;
            height: 100px;
            background-color: pink;        /* 方便看效果 */
        }  

display有哪些值？說明他們的作用。

block           塊類型。默認寬度為父元素寬度，可設置寬高，換行顯示。
none            缺省值。象行內元素類型一樣顯示。
inline          行內元素類型。默認寬度為內容寬度，不可設置寬高，同行顯示。
inline-block    默認寬度為內容寬度，可以設置寬高，同行顯示。
list-item       象塊類型元素一樣顯示，并添加樣式列表標記。
table           此元素會作為塊級表格來顯示。
inherit         規定應該從父元素繼承 display 屬性的值。

position的值relative和absolute定位原點是？

absolute
    生成絕對定位的元素，相對于值不為 static的第一個父元素進行定位。
fixed （老IE不支持）
    生成絕對定位的元素，相對于瀏覽器窗口進行定位。
relative
    生成相對定位的元素，相對于其正常位置進行定位。
static
    默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 聲明）。
inherit
    規定從父元素繼承 position 屬性的值。

CSS3有哪些新特性？

新增各種CSS選擇器    （: not(.input)：所有 class 不是“input”的節點）
圓角            （border-radius:8px）
多列布局        （multi-column layout）
陰影和反射    （ShadowReflect）
文字特效        （text-shadow）
文字渲染        （Text-decoration）
線性漸變        （gradient）
旋轉        （transform）
縮放,定位,傾斜,動畫,多背景
例如:transform:scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg)Animation:

請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？

一個用于頁面布局的全新CSS3功能，Flexbox可以把列表放在同一個方向（從上到下排列，從左到右），并讓列表能延伸到占用可用的空間。
較為復雜的布局還可以通過嵌套一個伸縮容器（flex container）來實現。
采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。
它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱"項目"。
常規布局是基于塊和內聯流方向，而Flex布局是基于flex-flow流可以很方便的用來做局中，能對不同屏幕大小自適應。
在布局上有了比以前更加靈活的空間。

具體：http://www.w3cplus.com/css3/flexbox-basics.html

用純CSS創建一個三角形的原理是什么？

**把上、左、右三條邊隱藏掉（顏色設為 transparent）**
#demo {
    width: 0;
    height: 0;
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent red transparent;
}

一個滿屏 品 字布局 如何設計?

簡單的方式：
    上面的div寬100%，
    下面的兩個div分別寬50%，
    然后用float或者inline-block使其不換行即可

css多列等高如何實現？

利用padding-bottom|margin-bottom正負值相抵；
設置父容器設置超出隱藏（overflow:hidden），這樣子父容器的高度就還是它里面的列沒有設定padding-bottom時的高度，
當它里面的任一列高度增加了，則父容器的高度被撐到里面最高那列的高度，
其他比這列矮的列會用它們的padding-bottom補償這部分高度差。

經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧 ？

* png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.

* 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

* IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。

浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}

這種情況之下IE會產生20px的距離，解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)

漸進識別的方式，從總體中逐漸排除局部。

首先，巧妙的使用“9”這一標記，將IE游覽器從所有情況中分離出來。
接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

css
.bb{
    background-color:red;/*所有識別*/
    background-color:#00deff9; /*IE6、7、8識別*/
    +background-color:#a200ff;/*IE6、7識別*/
    _background-color:#1e0bd1;/*IE6識別*/
}

*  IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,
   也可以使用getAttribute()獲取自定義屬性;
   Firefox下,只能使用getAttribute()獲取自定義屬性。
   解決方法:統一通過getAttribute()獲取自定義屬性。

*  IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;
   Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性。

*  解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。

*  Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示,
   可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。

    超鏈接訪問過后hover樣式就不出現了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
    L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？

行框的排列會受到中間空白（回車空格）等的影響，因為空格也屬于字符,這些空白也會被應用樣式，占據空間，所以會有間隔，把字符大小設為0，就沒有空格了。

為什么要初始化CSS樣式。

- 因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。

- 當然，初始化樣式會對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, 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(包含塊)計算方式跟正常流有什么不同？

無論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然后再判斷：
1、若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
2、否則,則由這個祖先元素的 padding box 構成。
如果都找不到，則為 initial containing block。

補充：
1. static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）
2. absolute: 向上找最近的定位為absolute/relative的元素
3. fixed: 它的containing block一律為根元素(html/body)，根元素也是initial containing block

CSS里的visibility屬性有個collapse屬性值是干嘛用的？在不同瀏覽器下以后什么區別？

對于普通元素visibility:collapse;會將元素完全隱藏,不占據頁面布局空間,與display:none;表現相同.
如果目標元素為table,visibility:collapse;將table隱藏,但是會占據頁面布局空間.
僅在Firefox下起作用,IE會顯示元素,Chrome會將元素隱藏,但是占據空間.

position跟display、margin collapse、overflow、float這些特性相互疊加后會怎么樣？

如果元素的display為none,那么元素不被渲染,position,float不起作用,如果元素擁有position:absolute;或者position:fixed;屬性那么元素將為絕對定位,float不起作用.如果元素float屬性不是none,元素會脫離文檔流,根據float屬性值來顯示.有浮動,絕對定位,inline-block屬性的元素,margin不會和垂直方向上的其他元素margin折疊.

請解釋一下為什么需要清除浮動？清除浮動的方式

清除浮動是為了清除使用浮動元素產生的影響。浮動的元素，高度會塌陷，而高度的塌陷使我們頁面后面的布局不能正常顯示。

    1、父級div定義height；
    2、父級div 也一起浮動；
    3、常規的使用一個class；
        .clearfix:before, .clearfix:after {
            content: " ";
            display: block;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }

    4、SASS編譯的時候，浮動元素的父級div定義偽類:after
        &:after,&:before{
            content: " ";
            visibility: hidden;
            display: block;
            height: 0;
            clear: both;
        }

    解析原理：
    1) display:block 使生成的元素以塊級元素顯示,占滿剩余空間;
    2) height:0 避免生成內容破壞原有布局的高度。
    3) visibility:hidden 使生成的內容不可見，并允許可能被生成內容蓋住的內容可以進行點擊和交互;
    4）通過 content:"."生成內容作為最后一個元素，至于content里面是點還是其他都是可以的，例如oocss里面就有經典的 content:".",有些版本可能content 里面內容為空,一絲冰涼是不推薦這樣做的,firefox直到7.0 content:"" 仍然會產生額外的空隙；
    5）zoom：1 觸發IE hasLayout。

    通過分析發現，除了clear：both用來閉合浮動的，其他代碼無非都是為了隱藏掉content生成的內容，這也就是其他版本的閉合浮動為什么會有font-size：0，line-height：0。

什么是外邊距合并？

外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。
合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。
w3school介紹網址： http://www.w3school.com.cn/css/css_margin_collapsing.asp

zoom:1的清除浮動原理?

清除浮動，觸發hasLayout；
Zoom屬性是IE瀏覽器的專有屬性，它可以設置或檢索對象的縮放比例。解決ie下比較奇葩的bug。
譬如外邊距（margin）的重疊，浮動清除，觸發ie的haslayout屬性等。

來龍去脈大概如下：
當設置了zoom的值之后，所設置的元素就會就會擴大或者縮小，高度寬度就會重新計算了，這里一旦改變zoom值時其實也會發生重新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨著自動擴大的問題。

Zoom屬是IE瀏覽器的專有屬性，火狐和老版本的webkit核心的瀏覽器都不支持這個屬性。然而，zoom現在已經被逐步標準化，出現在 CSS 3.0 規范草案中。

目前非ie由于不支持這個屬性，它們又是通過什么屬性來實現元素的縮放呢？
可以通過css3里面的動畫屬性scale進行縮放。

移動端的布局用過媒體查詢嗎？

假設你現在正用一臺顯示設備來閱讀這篇文章，同時你也想把它投影到屏幕上，或者打印出來，
而顯示設備、屏幕投影和打印等這些媒介都有自己的特點，CSS就是為文檔提供在不同媒介上展示的適配方法


當媒體查詢為真時，相關的樣式表或樣式規則會按照正常的級聯規被應用。
當媒體查詢返回假，  標簽上帶有媒體查詢的樣式表 仍將被下載 （只不過不會被應用）。




包含了一個媒體類型和至少一個使用 寬度、高度和顏色等媒體屬性來限制樣式表范圍的表達式。
CSS3加入的媒體查詢使得無需修改內容便可以使樣式應用于某些特定的設備范圍。

使用 CSS 預處理器嗎？喜歡那個？

SASS (SASS、LESS沒有本質區別，只因為團隊前端都是用的SASS)

什么是CSS 預處理器 / 后處理器？

- 預處理器例如：LESS、Sass、Stylus，用來預編譯Sass或less，增強了css代碼的復用性，
還有層級、mixin、變量、循環、函數等，具有很方便的UI組件模塊化開發能力，極大的提高工作效率。

- 后處理器例如：PostCSS，通常被視為在完成的樣式表中根據CSS規范處理CSS，讓其更有效；目前最常做的是給CSS屬性添加瀏覽器私有前綴，實現跨瀏覽器兼容性的問題。

CSS優化、提高性能的方法有哪些？

關鍵選擇器（key selector）。選擇器的最后面的部分為關鍵選擇器（即用來匹配目標元素的部分）；
如果規則擁有 ID 選擇器作為其關鍵選擇器，則不要為規則增加標簽。過濾掉無關的規則（這樣樣式系統就不會浪費時間去匹配它們了）；
提取項目的通用公有樣式，增強可復用性，按模塊編寫組件；增強項目的協同開發性、可維護性和可擴展性;
使用預處理工具或構建工具（gulp對css進行語法檢查、自動補前綴、打包壓縮、自動優雅降級）；

瀏覽器是怎樣解析CSS選擇器的？

樣式系統從關鍵選擇器開始匹配，
然后左移查找它的祖先元素。
只要選擇器的子樹一直在工作，
樣式系統就會持續左移，
直到和規則匹配，
或者是因為不匹配而放棄該規則。

在網頁中的應該使用奇數還是偶數的字體？為什么呢？

偶數字號相對更容易和 web 設計的其他部分構成比例關系。比如：當我用了 14 px 的正文字號，我可能會在一些地方用 14 × 0.5 = 7 px 的 margin，在另一些地方用 14 × 1.5 = 21 px 的標題字號。

Windows 自帶的點陣宋體（中易宋體）從 Vista 開始只提供 12、14、16 px 這三個大小的點陣，而 13、15、17 px 時用的是小一號的點陣（即每個字占的空間大了 1 px，但點陣沒變），于是略顯稀疏。

margin和padding分別適合什么場景使用？

margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。
margin用于布局分開元素使元素與元素互不相干；
padding用于元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段距離

元素豎向的百分比設定是相對于容器的高度嗎？

不是，是容器寬度。

抽離樣式模塊怎么寫，說出思路，有無實踐經驗？[阿里航旅]

先看視覺稿，把可復用的組件找出來。然后把命名和結構確定下來。

https://github.com/jayli/jayl...

::before 和 :after中雙冒號和單冒號 有什么區別？解釋一下這2個偽元素的作用。

單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素。（偽元素由雙冒號和偽元素名稱組成）
雙冒號是在當前規范中引入的，用于區分偽類和偽元素。不過瀏覽器需要同時支持舊的已經存在的偽元素寫法，
比如:first-line、:first-letter、:before、:after等，
而新的在CSS3中引入的偽元素則不允許再支持舊的單冒號的寫法。

想讓插入的內容出現在其它內容前，使用::before，否者，使用::after；
在代碼順序上，::after生成的內容也比::before生成的內容靠后。
如果按堆棧視角，::after生成的內容會在::before生成的內容之上

如何修改chrome記住密碼后自動填充表單的黃色背景 ？

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定義行高，設置行間的距離。應用方式是：用line-height減去font-size，得到的差（稱為行間距）除2，分別添加到文本的頂部和底部。可以包含這些內容的最小框就是行框。

設置元素浮動后，該元素的display值是多少？

自動變成了 display:block
用 window.getComputedStyle(element).display 看了一下確實是 block

怎么讓Chrome支持小于12px 的文字？

1、用圖片：如果是內容固定不變情況下，使用將小于12px文字內容切出做圖片，這樣不影響兼容也不影響美觀。
2、使用12px及12px以上字體大小：為了兼容各大主流瀏覽器，建議設計美工圖時候設置大于或等于12px的字體大小，如果是接單的這個時候就需要給客戶講解小于12px瀏覽器不兼容等事宜。
3、繼續使用小于12px字體大小樣式設置：如果不考慮chrome可以不用考慮兼容，同時在設置小于12px對象設置-webkit-text-size-adjust:none，做到最大兼容考慮。
4、使用css3里的一個屬性：transform：scale（）

p{font-size:10px;-webkit-transform:scale(0.8);}//0.8是縮放比例

讓頁面里的字體變清晰，變細用CSS怎么做？

-webkit-font-smoothing: antialiased;

font-style屬性可以讓它賦值為“oblique” oblique是什么意思？

傾斜的字體樣式
與italic的區別：italic和oblique都是向右傾斜的文字, 但區別在于Italic是指斜體字，而Oblique是傾斜的文字，對于沒有斜體的字體應該使用Oblique屬性值來實現傾斜的文字效果。也就是說：Italic是使用文字的斜體，Oblique是讓沒有斜體屬性的文字傾斜。

如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？（阿里）

多數顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60*1000ms ＝ 16.7ms

什么是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎么做）

如果靜態文件都放在主域名下，那靜態文件請求的時候都是帶著cookie數據提交給server的，非常浪費流量，所以不如隔離開。

因為cookie有域的限制，因此不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie數據，
這樣可以降低請求頭的大小，降低請求時間，從而達到降低整體請求延時的目的。

同時這種方式不會將cookie傳入Web Server，也減少了Web Server對cookie的處理分析環節，提高了webserver的http請求的解析速度。

有一個高度自適應的div，里面有兩個div，一個高度100px，希望另一個填滿剩下的高度。

（1）height：calc（100%-100px）
（2）absolute positioning：外層position：relative；
百分百自適應元素 position: absolute; top: 100px; bottom: 0; left: 0
（3）flex 父元素display:flex; flex-direction: column; 下面的子元素的設置flex: 1;

什么是響應式設計？響應式設計的基本原理是什么？如何兼容低版本的IE？

（1）響應式網站設計(Responsive Web design)的理念是：集中創建頁面的圖片排版大小，可以智
能地根據用戶行為以及使用的設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相對應的布局。
（2）基本原理: 媒體查詢 @media
（3）兼容IE可以使用JS輔助一下來解決

position:fixed;在iOS下無效怎么處理？

未打開的鎖#

軟鍵盤喚起后，頁面的 fixed 元素將失效（即無法浮動，也可以理解為變成了 absolute 定位），所以當頁面超過一屏且滾動時，失效的 fixed 元素就會跟隨滾動了。
既然在 iOS 下由于軟鍵盤喚出后，頁面 fixed 元素會失效，導致跟隨頁面一起滾動，那么假如——頁面不會過長出現滾動，那么即便 fixed 元素失效，也無法跟隨頁面滾動，也就不會出現上面的問題了。按照這個思路，如果使 fixed 元素的父級不出現滾動，而將原 body 滾動的區域域移到 main 內部，而 header 和 footer 的樣式不變。

    main {
    /* main絕對定位，進行內部滾動 */
    position: absolute;
    top: 50px;
    bottom: 34px;
    /* 使之可以滾動 */
    overflow-y: scroll;
}

在原始輸入法下， fixed 元素可以定位在頁面的正確位置。滾動頁面時，由于滾動的是 main 內部的 div，因此 footer 沒有跟隨頁面滾動。

上面貌似解決了問題，但是如果在手機上實際測試一下，會發現 main 元素內的滾動非常不流暢，滑動的手指松開后，滾動立刻停止，失去了原本的流暢滾動特性。百度一下彈性滾動的問題，發現在 webkit 中，下面的屬性可以恢復彈性滾動。

-webkit-overflow-scrolling: touch;

在 main 元素上加上該屬性，嗯，絲般順滑的感覺又回來了！

參考： http://efe.baidu.com/blog/mob...

overflow: scroll時不能平滑滾動的問題怎么處理？

答案一：-webkit-overflow-scrolling: touch;

答案二：
（1）高度尺寸不確定的時候，使用：overflow-y：scroll;
（2）高度尺寸確定的，要么沒有滾動條，要么直接出現，不會出現跳動。
（3）css3計算calc和vw單位巧妙實現滾動條出現頁面不跳動：
.wrap-outer {
margin-left: calc(100vw - 100%);
}
或.wrap-outer {
padding-left: calc(100vw - 100%);
}
首先，.wrap-outer指的是居中定寬主體的父級，如果沒有，創建一個
然后，calc是css3的計算
100vw是瀏覽器的內部寬度，而100%是可用寬度，不含滾動條
calc（100vw-100%）是瀏覽器的滾動條的寬度

style標簽寫在body后與body前有什么區別？

寫在head標簽中利于瀏覽器逐步渲染（resources downloading->CSSOM+DOM->RenderTree(composite)->Layout->paint）。具體渲染過程請參考
http://blog.csdn.net/wozaixia...

寫在body標簽后由于瀏覽器以逐行方式對html文檔進行解析，當解析到寫在尾部的樣式表（外聯或寫在style標簽）會導致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之后重新渲染，在windows的IE下可能會出現FOUC現象（即樣式失效導致的頁面閃爍問題）

基礎知識——瀏覽器的渲染過程：

Create/Update DOM And request css/image/js：瀏覽器請求到HTML代碼后，在生成DOM的最開始階段（應該是 Bytes → characters 后），并行發起css、圖片、js的請求，無論他們是否在HEAD里。
注意：發起 js 文件的下載 request 并不需要 DOM 處理到那個 script 節點，比如：簡單的正則匹配就能做到這一點，雖然實際上并不一定是通過正則：）。這是很多人在理解渲染機制的時候存在的誤區。

Create/Update Render CSSOM：CSS文件下載完成，開始構建CSSOM

Create/Update Render Tree：所有CSS文件下載完成，CSSOM構建結束后，和 DOM 一起生成 Render Tree。

Layout：有了Render Tree，瀏覽器已經能知道網頁中有哪些節點、各個節點的CSS定義以及他們的從屬關系。下一步操作稱之為Layout，顧名思義就是計算出每個節點在屏幕中的位置。

Painting：Layout后，瀏覽器已經知道了哪些節點要顯示（which nodes are visible）、每個節點的CSS屬性是什么（their computed styles）、每個節點在屏幕中的位置是哪里（geometry）。就進入了最后一步：Painting，按照算出來的規則，通過顯卡，把內容畫到屏幕上。

補充：

Repaint（重繪）：屏幕的一部分要重畫。

Reflow（回流）：元件的幾何尺寸變化了。要重新驗證并計算Render Tree

聯想——