height: 0; 將元素高度設為 0 ，并消除邊框

filter: blur(0); CSS3屬性，將一個元素的模糊度設置為0，從而使這個元素“消失”在頁面中

rgba() 和 opacity 的透明效果有什么不同？

opacity 作用于元素以及元素內的所有內容（包括文字）的透明度

rgba() 只作用于元素自身的顏色或其背景色，子元素不會繼承透明效果

css 屬性 content 有什么作用？

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

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;

轉換

旋轉 transform: rotate(20deg);

傾斜 transform: skew(150deg, -10deg);

位移 transform: translate(20px, 20px);

縮放 transform: scale(.5);

平滑過渡 transition: all .3s ease-in .1s;

動畫 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

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

Flexbox 用于不同尺寸屏幕中創建可自動擴展和收縮布局

經常遇到的瀏覽器的JS兼容性有哪些？解決方法是什么？

當前樣式：getComputedStyle(el, null) VS el.currentStyle

事件對象：e VS window.event

鼠標坐標：e.pageX, e.pageY VS window.event.x, window.event.y

按鍵碼：e.which VS event.keyCode

文本節點：el.textContent VS el.innerText

請寫出多種等高布局

在列的父元素上使用這個背景圖進行Y軸的鋪放，從而實現一種等高列的假像

模仿表格布局等高列效果：兼容性不好，在ie6-7無法正常運行

css3 flexbox 布局： .container{display: flex; align-items: stretch;}

css垂直居中的方法有哪些？

如果是單行文本, line-height 設置成和 height 值

.vertical {
      height: 100px;
      line-height: 100px;
    }

已知高度的塊級子元素，采用絕對定位和負邊距

.container {
  position: relative;
}
.vertical {
  height: 300px;  /*子元素高度*/
  position: absolute;
  top:50%;  /*父元素高度50%*/
  margin-top: -150px; /*自身高度一半*/
}

未知高度的塊級父子元素居中，模擬表格布局

缺點：IE67不兼容，父級 overflow：hidden 失效

.container {
      display: table;
    }
    .content {
      display: table-cell;
      vertical-align: middle;
    }

新增 inline-block 兄弟元素，設置 vertical-align

缺點：需要增加額外標簽，IE67不兼容

.container {
  height: 100%;/*定義父級高度，作為參考*/
}
.extra .vertical{
  display: inline-block;  /*行內塊顯示*/
  vertical-align: middle; /*垂直居中*/
}
.extra {
  height: 100%; /*設置新增元素高度為100%*/
}

絕對定位配合 CSS3 位移

.vertical {
  position: absolute;
  top:50%;  /*父元素高度50%*/
  transform:translateY(-50%, -50%);
}

CSS3彈性盒模型

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

圣杯布局的實現原理？

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

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

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

  .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

解釋下什么是浮動和它的工作原理？

非IE瀏覽器下，容器不設高度且子元素浮動時，容器高度不能被內容撐開。

此時，內容會溢出到容器外面而影響布局。這種現象被稱為浮動（溢出）。

工作原理：

浮動元素脫離文檔流，不占據空間（引起“高度塌陷”現象）

浮動元素碰到包含它的邊框或者其他浮動元素的邊框停留

浮動元素引起的問題？

父元素的高度無法被撐開，影響與父元素同級的元素

與浮動元素同級的非浮動元素會跟隨其后

列舉幾種清除浮動的方式？

添加額外標簽，例如

使用 br 標簽和其自身的 clear 屬性，例如

父元素設置 overflow：hidden; 在IE6中還需要觸發 hasLayout，例如zoom：1;

父元素也設置浮動

使用 :after 偽元素。由于IE6-7不支持 :after，使用 zoom:1 觸發 hasLayout

清除浮動最佳實踐（after偽元素閉合浮動）：

.clearfix:after{
    content: "200B";
    display: table; 
    height: 0;
    clear: both;
  }
  .clearfix{
    *zoom: 1;
  }

什么是 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，需要有統一的命名，使用公用的前綴?？梢詤⒖济嫦驅ο蟮腃SS

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

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

全屏滾動的原理是什么？ 用到了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

L-V-H-A love hate 用喜歡和討厭兩個詞來方便記憶

偽元素和偽類的區別和作用？

偽元素 -- 在內容元素的前后插入額外的元素或樣式，但是這些元素實際上并不在文檔中生成。

它們只在外部顯示可見，但不會在文檔的源代碼中找到它們，因此，稱為“偽”元素。例如：

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

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

下載
下載

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

display:inline-block 什么時候會顯示間隙？

相鄰的 inline-block 元素之間有換行或空格分隔的情況下會產生間距

非 inline-block 水平元素設置為 inline-block 也會有水平間距

可以借助 vertical-align:top; 消除垂直間隙

可以在父級加 font-size：0; 在子元素里設置需要的字體大小，消除垂直間隙

把 li 標簽寫到同一行可以消除垂直間隙，但代碼可讀性差

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