面試BAT，你憑什麼說你掌握了CSS

介紹

項目已經開源：https://github.com/nanhupatar... 歡迎PR

推薦

關注咱們的公衆號

display: none; 與 visibility: hidden; 的區別

相同： 它們都能讓元素不可見

區別：

• display:none;會讓元素徹底從渲染樹中消失，渲染的時候不佔據任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續佔據空間，只是內容不可見
• display: none;是非繼承屬性，子孫節點消失因爲元素從渲染樹消失形成，經過修改子孫節點屬性沒法顯示；visibility:hidden;是繼承屬性，子孫節點消失因爲繼承了 hidden，經過設置 visibility: visible;可讓子孫節點顯式
• 修改常規流中元素的 display 一般會形成文檔重排。修改 visibility 屬性只會形成本元素的重繪
• 讀屏器不會讀取 display: none;元素內容；會讀取 visibility: hidden 元素內容

css hack 原理及經常使用 hack

原理：利用不一樣瀏覽器對 CSS 的支持和解析結果不同編寫針對特定瀏覽器樣式。常見的 hack 有 1）屬性 hack。2）選擇器 hack。3）IE 條件註釋

IE 條件註釋：適用於[IE5, IE9]常見格式以下

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

選擇器 hack：不一樣瀏覽器對選擇器的支持不同

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

屬性 hack：不一樣瀏覽器解析 bug 或方法

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

link 與 @import 的區別

• link 是 HTML 方式， @import 是 CSS 方式
• link 最大限度支持並行下載，@import 過多嵌套致使串行下載，出現 FOUC
• link 能夠經過 rel="alternate stylesheet" 指定候選樣式
• 瀏覽器對 link 支持早於@import ，可使用 @import 對老瀏覽器隱藏樣式
• @import 必須在樣式規則以前，能夠在 css 文件中引用其餘文件
• 整體來講：link 優於@import

CSS 有哪些繼承屬性

• 關於文字排版的屬性如：

  • font
  • word-break
  • letter-spacing
  • text-align
  • text-rendering
  • word-spacing
  • white-space
  • text-indent
  • text-transform
  • text-shadow
• line-height
• color
• visibility
• cursor

display,float,position 的關係

• 若是 display 爲 none，那麼 position 和 float 都不起做用，這種狀況下元素不產生框
• 不然，若是 position 值爲 absolute 或者 fixed，框就是絕對定位的，float 的計算值爲 none，display 根據下面的表格進行調整
• 不然，若是 float 不是 none，框是浮動的，display 根據下表進行調整
• 不然，若是元素是根元素，display 根據下表進行調整
• 其餘狀況下 display 的值爲指定值 總結起來：絕對定位、浮動、根元素都須要調整 display

外邊距摺疊(collapsing margins)

外邊距重疊就是 margin-collapse

相鄰的兩個盒子（多是兄弟關係也多是祖先關係）的外邊距能夠結合成一個單獨的外邊距。 這種合併外邊距的方式被稱爲摺疊，結合而成的外邊距稱爲摺疊外邊距

摺疊結果遵循下列計算規則：

• 兩個相鄰的外邊距都是正數時，摺疊結果是它們二者之間較大的值
• 兩個相鄰的外邊距都是負數時，摺疊結果是二者絕對值的較大值
• 兩個外邊距一正一負時，摺疊結果是二者的相加的和

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

• 有兩種， IE 盒子模型、W3C 盒子模型；
• 盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
• 標準(W3C)盒模型：元素寬度 = width + padding + border + margin
• 怪異(IE)盒模型：元素寬度 = width + margin
• 區 別： IE 的 content 部分把 border 和 padding 計算了進去;
• 標準瀏覽器經過設置 css3 的 box-sizing: border-box 屬性，觸發「怪異模式」解析計算寬高

CSS 選擇符有哪些？

• id 選擇器（ # myid）
• 類選擇器（.myclassname）
• 標籤選擇器（div, h1, p）
• 相鄰選擇器（h1 + p）
• 子選擇器（ul > li）
• 後代選擇器（li a）
• 通配符選擇器（ * ）
• 屬性選擇器（a[rel = "external"]）
• 僞類選擇器（a:hover, li:nth-child）

CSS3 新增僞類有那些？

• p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。
• p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。
• p:only-of-type 選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。
• p:only-child 選擇屬於其父元素的惟一子元素的每一個 <p> 元素。
• p:nth-child(2) 選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
• :after 在元素以前添加內容,也能夠用來作清除浮動。
• :before 在元素以後添加內容
• :enabled 選擇器匹配每一個已啓用的元素（大多用在表單元素上）。
• :disabled 控制表單控件的禁用狀態。
• :checked 單選框或複選框被選中

如何居中 div？如何居中一個浮動元素？如何讓絕對定位的 div 居中？

若是須要居中的元素爲常規流中 inline 元素，爲父元素設置 text-align: center;便可實現

若是須要居中的元素爲常規流中 block 元素，1）爲元素設置寬度，2）設置左右 margin 爲 auto。3）IE6 下需在父元素上設置 text-align: center;,再給子元素恢復須要的值

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        text-align: center; /* 3 */
    }
    .content {
        width: 500px;      /* 1 */
        text-align: left;  /* 3 */
        margin: 0 auto;    /* 2 */

        background: purple;
    }
</style>

若是須要居中的元素爲浮動元素，1）爲元素設置寬度，2）position: relative;，3）浮動方向偏移量（left 或者 right）設置爲 50%，4）浮動方向上的 margin 設置爲元素寬度一半乘以-1

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
    }
    .content {
        width: 500px;         /* 1 */
        float: left;

        position: relative;   /* 2 */
        left: 50%;            /* 3 */
        margin-left: -250px;  /* 4 */

        background-color: purple;
    }
</style>

若是須要居中的元素爲絕對定位元素，1）爲元素設置寬度，2）偏移量設置爲 50%，3）偏移方向外邊距設置爲元素寬度一半乘以-1

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        position: relative;
    }
    .content {
        width: 800px;

        position: absolute;
        left: 50%;
        margin-left: -400px;

        background-color: purple;
    }
</style>

若是須要居中的元素爲絕對定位元素，1）爲元素設置寬度，2）設置左右偏移量都爲 0,3）設置左右外邊距都爲 auto

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        position: relative;
    }
    .content {
        width: 800px;

        position: absolute;
        margin: 0 auto;
        left: 0;
        right: 0;

        background-color: purple;
    }
</style>

如何豎直居中一個元素

• 絕對定位居中
• 若是居中的是行內元素，能夠設置父級 height 與 line-height 相等
• 設置 margin/padding 居中
• 相對位置偏移居中
• flex 居中 設置 align-items:center 便可

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

• block 象塊類型元素同樣顯示。
• none 缺省值。象行內元素類型同樣顯示。
• 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 有哪些新特性？

• 新增選擇器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}
• 彈性盒模型 display: flex;
• 多列布局 column-count: 5;
• 媒體查詢 @media (max-width: 480px) {.box: {column-count: 1;}}
• 個性化字體 @font-face{font-family: BorderWeb; src:url(BORDERW0.eot);}
• 顏色透明度 color: rgba(255, 0, 0, 0.75);
• 圓角 border-radius: 5px;
• 漸變 background:linear-gradient(red, green, blue);
• 陰影 box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3);
• 倒影 box-reflect: below 2px;
• 文字裝飾 text-stroke-color: red;
• 文字溢出 text-overflow:ellipsis;
• 背景效果 background-size: 100px 100px;
• 邊框效果 border-image:url(bt_blue.png) 0 10;
• 平滑過渡 transition: all .3s ease-in .1s;
• 動畫 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

• 轉換

  • 旋轉 transform: rotate(20deg);
  • 傾斜 transform: skew(150deg, -10deg);
  • 位移 transform: translate(20px, 20px);
  • 縮放 transform: scale(.5);

用純 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 使其不換行便可

常常遇到的瀏覽器的兼容性有哪些？緣由，解決方法是什麼，經常使用 hack 的技巧 ？

• png24 位的圖片在 iE6 瀏覽器上出現背景，解決方案是作成 PNG8.
• 瀏覽器默認的 margin 和 padding 不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一
• IE 下,可使用獲取常規屬性的方法來獲取自定義屬性,也可使用 getAttribute()獲取自定義屬性;
• Firefox 下,只能使用 getAttribute()獲取自定義屬性。解決方法:統一經過 getAttribute()獲取自定義屬性
• IE 下,even 對象有 x,y 屬性,可是沒有 pageX,pageY 屬性
• Firefox 下,event 對象有 pageX,pageY 屬性,可是沒有 x,y 屬性

li 與 li 之間有看不見的空白間隔是什麼緣由引發的？有什麼解決辦法？(也稱幽靈字符)

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

display:inline-block 間隙問題怎麼解決？(攜程)

移除空格、使用 margin 負值、使用 font-size:0、letter-spacing、word-spacing

display:inline-block 何時會顯示間隙？

• 相鄰的 inline-block 元素之間有換行或空格分隔的狀況下會產生間距
• 非 inline-block 水平元素設置爲 inline-block 也會有水平間距
• 能夠藉助 vertical-align:top; 消除垂直間隙
• 能夠在父級加 font-size：0; 在子元素裏設置須要的字體大小，消除垂直間隙
• 把 li 標籤寫到同一行能夠消除垂直間隙，但代碼可讀性差

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{}

// 若是權重相同，則最後定義的樣式會起做用，可是應該避免這種狀況出現

CSS 優先級算法如何計算？

• 優先級就近原則，同權重狀況下樣式定義最近者爲準
• 載入樣式以最後載入的爲準
• 優先級爲: !important > id > class > tag important 比 內聯優先級高

談談浮動和清除浮動

浮動的框能夠向左或向右移動，直到他的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因爲浮動框不在文檔的普通流中，因此文檔的普通流的塊框表現得就像浮動框不存在同樣。浮動的塊框會漂浮在文檔普通流的塊框上

解決方法

1. 父級 div 定義僞類：after 和 zoom (推薦使用，建議定義公共類，以減小 CSS 代碼)

.clearfloat:after{
       display:block;
       clear:both;
       content:"";
       visibility:hidden;
       height:0}

   .clearfloat{zoom:1}

1. 在結尾處添加空 div 標籤 clear:both

<div class="parent">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clearfloat"></div>
</div>

.left {float:left}
.clearfloat{clear:both}

1. 父級 div 定義 height
2. 父級 div 定義 overflow:auto
3. 父級 div 定義 overflow:hidden
4. 父級 div 也一塊兒浮動
5. 父級 div 定義 display:table
6. 結尾處加 br 標籤 clear:both

參考連接幾種經常使用的清除浮動方法

box-sizing 經常使用的屬性有哪些？分別有什麼做用？

• box-sizing: content-box; // 默認的標準(W3C)盒模型元素效果
• box-sizing: border-box; // 觸發怪異(IE)盒模型元素的效果
• box-sizing: inherit; // 繼承父元素 box-sizing 屬性的值

請列舉幾種隱藏元素的方法

• visibility: hidden; 這個屬性只是簡單的隱藏某個元素，可是元素佔用的空間任然存在
• opacity: 0; CSS3 屬性，設置 0 可使一個元素徹底透明
• position: absolute; 設置一個很大的 left 負值定位，使元素定位在可見區域以外
• display: none; 元素會變得不可見，而且不會再佔用文檔的空間。
• transform: scale(0); 將一個元素設置爲縮放無限小，元素將不可見，元素原來所在的位置將被保留
• <div hidden="hidden"> HTML5 屬性,效果和 display:none;相同，但這個屬性用於記錄一個元素的狀態
• height: 0; 將元素高度設爲 0 ，並消除邊框
• filter: blur(0); CSS3 屬性，將一個元素的模糊度設置爲 0，從而使這個

rgba() 和 opacity 的透明效果有什麼不一樣？

• opacity 做用於元素以及元素內的全部內容（包括文字）的透明度
• rgba() 只做用於元素自身的顏色或其背景色，子元素不會繼承透明效果

css 屬性 content 有什麼做用？

content 屬性專門應用在 before/after 僞元素上，用於插入額外內容或樣式

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

Flexbox 用於不一樣尺寸屏幕中建立可自動擴展和收縮佈局

請寫出多種等高佈局

• 在列的父元素上使用這個背景圖進行 Y 軸的鋪放，從而實現一種等高列的假像
• 模仿表格佈局等高列效果：兼容性很差，在 ie6-7 沒法正常運行
• css3 flexbox 佈局： .container{display: flex; align-items: stretch;}

聖盃佈局的實現原理？

要求：三列布局；中間主體內容前置，且寬度自適應；兩邊內容定寬

好處：重要的內容放在文檔流前面能夠優先渲染

原理：利用相對定位、浮動、負邊距佈局，而不添加額外標籤

.container {
      padding-left: 150px;
      padding-right: 190px;
  }
  .main {
      float: left;
      width: 100%;
  }
  .left {
      float: left;
      width: 190px;
      margin-left: -100%;
      position: relative;
      left: -150px;
  }
  .right {
      float: left;
      width: 190px;
      margin-left: -190px;
      position: relative;
      right: -190px;
  }

什麼是雙飛翼佈局？實現原理？

雙飛翼佈局：對聖盃佈局（使用相對定位，對之後佈局有侷限性）的改進，消除相對定位佈局

原理：主體元素上設置左右邊距，預留兩翼位置。左右兩欄使用浮動和負邊距歸位，消除相對定位。

.container {
    /*padding-left:150px;*/
    /*padding-right:190px;*/
}
.main-wrap {
    width: 100%;
    float: left;
}
.main {
    margin-left: 150px;
    margin-right: 190px;
}
.left {
    float: left;
    width: 150px;
    margin-left: -100%;
    /*position: relative;*/
    /*left:-150px;*/
}
.right {
    float: left;
    width: 190px;
    margin-left: -190px;
    /*position:relative;*/
    /*right:-190px;*/
}

在 CSS 樣式中常使用 px、em 在表現上有什麼區別？

• px 相對於顯示器屏幕分辨率，沒法用瀏覽器字體放大功能
• em 值並非固定的，會繼承父級的字體大小： em = 像素值 / 父級 font-size

爲何要初始化 CSS 樣式？

• 不一樣瀏覽器對有些標籤樣式的默認值解析不一樣
• 不初始化 CSS 會形成各現瀏覽器之間的頁面顯示差別
• 可使用 reset.css 或 Normalize.css 作 CSS 初始化

reset.css 和 Normalize.css 理解

reset.css 意爲重置默認樣式。HTML 中絕大部分標籤元素在網頁顯示中都有一個默認屬性值，一般爲了不重複定義元素樣式，須要進行重置默認樣式

Eric Meyer（CSS Reset）推薦

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
/* tables still need ‘cellspacing=」0″‘ in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Normalize.css 只是一個很小的 css 文件,但它在默認的 HTML 元素樣式上提供了跨瀏覽器的高度一致性。相比於傳統的 css reset，Normalize.css 是一種現代的，爲 HTML5 準備的優質替代方案。

Normalize.css 是一種 CSS reset 的替代方案。通過@necolas 和@jon neal 花了幾百個小時來努力研究不一樣瀏覽器的默認樣式的差別，這個項目終於變成了如今這樣。

咱們創造 normalize.css 有下幾個目的：

• 保護有用的瀏覽器默認樣式而不是徹底去掉它們
• 通常化的樣式：爲大部分 HTML 元素提供
• 修復瀏覽器自身的 bug 並保證各瀏覽器的一致性
• 優化 CSS 可用性：用一些小技巧
• 解釋代碼：用註釋和詳細的文檔來

什麼是 FOUC(Flash of Unstyled Content)？ 如何來避免 FOUC？

• 當使用 @import 導入 CSS 時，會致使某些頁面在 IE 出現奇怪的現象： 沒有樣式的頁面內容顯示瞬間閃爍，這種現象稱爲「文檔樣式短暫失效」，簡稱爲 FOUC
• 產生緣由：當樣式表晚於結構性 html 加載時，加載到此樣式表時，頁面將中止以前的渲染。
• 等待此樣式表被下載和解析後，再從新渲染頁面，期間致使短暫的花屏現象。
• 解決方法：使用 link 標籤將樣式表放在文檔 head

介紹使用過的 CSS 預處理器？

• CSS 預處理器基本思想：爲 CSS 增長了一些編程的特性（變量、邏輯判斷、函數等）
• 開發者使用這種語言進行進行 Web 頁面樣式設計，再編譯成正常的 CSS 文件使用
• 使用 CSS 預處理器，可使 CSS 更加簡潔、適應性更強、可讀性更佳，無需考慮兼容性
• 最經常使用的 CSS 預處理器語言包括：Sass（SCSS）和 LESS

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

• 多個 css 合併，儘可能減小 HTTP 請求
• 將 css 文件放在頁面最上面
• 移除空的 css 規則
• 避免使用 CSS 表達式
• 選擇器優化嵌套，儘可能避免層級過深
• 充分利用 css 繼承屬性，減小代碼量
• 抽象提取公共樣式，減小代碼量
• 屬性值爲 0 時，不加單位
• 屬性值爲小於 1 的小數時，省略小數點前面的 0
• css 雪碧圖

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

瀏覽器解析 CSS 選擇器的方式是從右到左

在網頁中的應該使用奇數仍是偶數的字體？

在網頁中的應該使用「偶數」字體：

• 偶數字號相對更容易和 web 設計的其餘部分構成比例關係
• 使用奇數號字體時文本段落沒法對齊
• 宋體的中文網頁排布中使用最多的就是 12 和 14

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

• 須要在 border 外側添加空白，且空白處不須要背景（色）時，使用 margin
• 須要在 border 內測添加空白，且空白處須要背景（色）時，使用 padding

抽離樣式模塊怎麼寫，說出思路？

CSS 能夠拆分紅 2 部分：公共 CSS 和 業務 CSS：

• 網站的配色，字體，交互提取出爲公共 CSS。這部分 CSS 命名不該涉及具體的業務
• 對於業務 CSS，須要有統一的命名，使用公用的前綴。能夠參考面向對象的 CSS

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

元素豎向的百分比設定是相對於容器的寬度，而不是高度

全屏滾動的原理是什麼？ 用到了 CSS 的那些屬性？

• 原理相似圖片輪播原理，超出隱藏部分，滾動時顯示
• 可能用到的 CSS 屬性：overflow:hidden; transform:translate(100%, 100%); display:none;

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

• 響應式設計就是網站可以兼容多個終端，而不是爲每一個終端作一個特定的版本
• 基本原理是利用 CSS3 媒體查詢，爲不一樣尺寸的設備適配不一樣樣式
• 對於低版本的 IE，可採用 JS 獲取屏幕寬度，而後經過 resize 方法來實現兼容：

$(window).resize(function () {
    screenRespond();
});

screenRespond();

function screenRespond(){

    var screenWidth = $(window).width();

    if(screenWidth <= 1800){
        $("body").attr("class", "w1800");
    }

    if(screenWidth <= 1400){
        $("body").attr("class", "w1400");
    }

    if(screenWidth > 1800){
        $("body").attr("class", "");
    }
}

什麼是視差滾動效果，如何給每頁作不一樣的動畫？

• 視差滾動是指多層背景以不一樣的速度移動，造成立體的運動效果，具備很是出色的視覺體驗
• 通常把網頁解剖爲：背景層、內容層和懸浮層。當滾動鼠標滾輪時，各圖層以不一樣速度移動，造成視差的

實現原理

• 以 「頁面滾動條」 做爲 「視差動畫進度條」
• 以 「滾輪刻度」 看成 「動畫幀度」 去播放動畫的
• 監聽 mousewheel 事件，事件被觸發即播放動畫，實現「翻頁」效果

a 標籤上四個僞類的執行順序是怎麼樣的？

link > visited > hover > active

僞元素和僞類的區別和做用？

僞元素:在內容元素的先後插入額外的元素或樣式，可是這些元素實際上並不在文檔中生成。它們只在外部顯示可見，但不會在文檔的源代碼中找到它們，所以，稱爲「僞」元素。例如：

p::before {content:"第一章：";}
p::after {content:"Hot!";}
p::first-line {background:red;}
p::first-letter {font-size:30px;}

僞類: 將特殊的效果添加到特定選擇器上。它是已有元素上添加類別的，不會產生新的元素。例如：

a:hover {color: #FF00FF}
p:first-child {color: red}

::before 和 :after 中雙冒號和單冒號有什麼區別？

• 在 CSS 中僞類一直用 : 表示，如 :hover, :active 等
• 僞元素在 CSS1 中已存在，當時語法是用 : 表示，如 :before 和 :after
• 後來在 CSS3 中修訂，僞元素用 :: 表示，如 ::before 和 ::after，以此區分僞元素和僞類
• 因爲低版本 IE 對雙冒號不兼容，開發者爲了兼容性各瀏覽器，繼續使使用 :after 這種老語法表示僞元素
• 綜上所述：::before 是 CSS3 中寫僞元素的新語法； :after 是 CSS1 中存在的、兼容 IE 的老語法

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

• 產生緣由：因爲 Chrome 默認會給自動填充的 input 表單加上 input:-webkit-autofill 私有屬性形成的
• 解決方案 1：在 form 標籤上直接關閉了表單的自動填充：autocomplete="off"
• 解決方案 2：input:-webkit-autofill { background-color: transparent; }

input [type=search] 搜索框右側小圖標如何美化？

input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  border-radius: 8px;
  background:url("images/searchicon.png") no-repeat 0 0;
  background-size: 15px 15px;
}

網站圖片文件，如何點擊下載？而非點擊預覽？

<a href="logo.jpg" download>下載</a> <a href="logo.jpg" download="網站LOGO" >下載</a>

iOS safari 如何阻止「橡皮筋效果」？

$(document).ready(function(){
      var stopScrolling = function(event) {
          event.preventDefault();
      }
      document.addEventListener('touchstart', stopScrolling, false);
      document.addEventListener('touchmove', stopScrolling, false);
  });

你對 line-height 是如何理解的？

• line-height 指一行字的高度，包含了字間距，其實是下一行基線到上一行基線距離
• 若是一個標籤沒有定義 height 屬性，那麼其最終表現的高度是由 line-height 決定的
• 一個容器沒有設置高度，那麼撐開容器高度的是 line-height 而不是容器內的文字內容
• 把 line-height 值設置爲 height 同樣大小的值能夠實現單行文字的垂直居中
• line-height 和 height 都能撐開一個高度，height 會觸發 haslayout，而 line-height 不會

line-height 三種賦值方式有何區別？（帶單位、純數字、百分比）

• 帶單位：px 是固定值，而 em 會參考父元素 font-size 值計算自身的行高
• 純數字：會把比例傳遞給後代。例如，父級行高爲 1.5，子元素字體爲 18px，則子元素行高爲 1.5 * 18 = 27px
• 百分比：將計算後的值傳遞給後代

設置元素浮動後，該元素的 display 值會如何變化？

設置元素浮動後，該元素的 display 值自動變成 block

怎麼讓 Chrome 支持小於 12px 的文字？

.shrink{
    -webkit-transform:scale(0.8);
    -o-transform:scale(1);
    display:inline-block;
  }

讓頁面裏的字體變清晰，變細用 CSS 怎麼作？（IOS 手機瀏覽器字體齒輪設置）

-webkit-font-smoothing: antialiased;

font-style 屬性 oblique 是什麼意思？

font-style: oblique; 使沒有 italic 屬性的文字實現傾斜

若是須要手動寫動畫，你認爲最小時間間隔是多久？

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

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

監聽滾輪事件，而後滾動到必定距離時用 jquery 的 animate 實現平滑效果。

一個高度自適應的 div，裏面有兩個 div，一個高度 100px，但願另外一個填滿剩下的高度

• 方案 1： .sub { height: calc(100%-100px); }
• 方案 2： .container { position:relative; } .sub { position: absolute; top: 100px; bottom: 0; }
• 方案 3： .container { display:flex; flex-direction:column; } .sub { flex:1; }

CSS 中類 class 和 id 的區別

對於 CSS 而言，id 和 class 都是選擇器，惟一不一樣的地方在於權重不一樣。若是隻說 CSS，上面那一句話就講完了。拓展出來，對於 html 而言，id 和 class 都是 dom 元素的屬性值。不一樣的地方在於 id 屬性的值是惟一的，而 class 屬性值能夠重複。id 還一個老特性是錨點功能，當瀏覽器地址欄有一個#xxx，頁面會自動滾動到 id=xxx 的元素上面。

更直接的：id 給 js 用，class 給 css 用（趨勢）

如何優化網頁的打印樣式

<link rel="stylesheet" type="text/css" media="screen" href="xxx.css" />

其中 media 指定的屬性就是設備，顯示器上就是 screen，打印機則是 print，電視是 tv，投影儀是 projection。

<link rel="stylesheet" type="text/css" media="print" href="yyy.css" />

但打印樣式表也應有些注意事項：

• 打印樣式表中最好不要用背景圖片，由於打印機不能打印 CSS 中的背景。如要顯示圖片，請使用 html 插入到頁面中。
• 最好不要使用像素做爲單位，由於打印樣式表要打印出來的會是實物，因此建議使用 pt 和 cm。
• 隱藏掉沒必要要的內容。（@print div{display:none;}）
• 打印樣式表中最好少用浮動屬性，由於它們會消失。

請問爲什麼要使用 transform 而非 absolute positioning，或反之的理由？爲何？

• 使用 transform 或 position 實現動畫效果時是有很大差異。
• 使用 transform 時，可讓 GPU 參與運算，動畫的 FPS 更高。
• 使用 position 時，最小的動畫變化的單位是 1px，而使用 transform 參與時，能夠作到更小（動畫效果更加平滑）
• 功能都同樣。可是 translate 不會引發瀏覽器的重繪和重排，這就至關 nice 了。

反之

• tranform 改變 fixed 子元素的定位對象
• transform 改變元素層疊順序
  transform 的反作用

請解釋 CSS sprites，以及你要如何在頁面或網站中實現它

• CSS Sprites 其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用 CSS 的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position 能夠用數字能精確的定位出背景圖片的位置。
• CSS Sprites 爲一些大型的網站節約了帶寬，讓提升了用戶的加載速度和用戶體驗，不須要加載更多的圖片。

你熟悉 SVG 樣式的書寫嗎？

SVG	等效的 CSS
fill	background-color 或 color
fill-opacity	background-color 或 color 設置 rgba/hsla
opacity	opacity
stroke	border-color
stroke-width	border-thickness
stroke-opacity	border-color 設置 rgba
rx, ry	border-radius

下面的屬性在 SVG 和 CSS 中是同樣的，只是在 SVG 的 transformations 和 dimensions 中稍有區別：

• font-family, font-size, font-style, font-variant 和 font-weight
• width 和 height
• scale, rotate, skew

參考連接： 基本的 SVG 樣式屬性

若是設計中使用了非標準的字體，你該如何去實現？

• 用圖片代替
• web fonts 在線字庫
• @font-face

參考連接：若是設計中使用了非標準的字體，你該如何去實現？