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

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

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

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

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

css 屬性 content 有什么作用？

content 屬性專(zhuān)門(mén)應(yīng)用在 before/after 偽元素上，用于插入額外內(nèi)容或樣式

CSS3有哪些新特性？

新增選擇器 p:nth-child(n){color: rgba(255, 0, 0, 0.75)}

彈性盒模型 display: flex;

多列布局 column-count: 5;

媒體查詢(xún) @media (max-width: 480px) {.box: {column-count: 1;}}

個(gè)性化字體 @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;

轉(zhuǎn)換

旋轉(zhuǎn) transform: rotate(20deg);

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

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

縮放 transform: scale(.5);

平滑過(guò)渡 transition: all .3s ease-in .1s;

動(dòng)畫(huà) @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

請(qǐng)解釋一下 CSS3 的 Flexbox（彈性盒布局模型）以及適用場(chǎng)景？

Flexbox 用于不同尺寸屏幕中創(chuàng)建可自動(dòng)擴(kuò)展和收縮布局

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

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

事件對(duì)象：e VS window.event

鼠標(biāo)坐標(biāo)：e.pageX, e.pageY VS window.event.x, window.event.y

按鍵碼：e.which VS event.keyCode

文本節(jié)點(diǎn)：el.textContent VS el.innerText

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

li排列受到中間空白(回車(chē)/空格)等的影響，因?yàn)榭瞻滓矊儆谧址瑫?huì)被應(yīng)用樣式占據(jù)空間，產(chǎn)生間隔

解決辦法：在ul設(shè)置設(shè)置font-size=0,在li上設(shè)置需要的文字大小

什么是外邊距重疊？ 重疊的結(jié)果是什么？

外邊距重疊就是 margin-collapse

相鄰的兩個(gè)盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個(gè)多帶帶的外邊距。

這種合并外邊距的方式被稱(chēng)為折疊，結(jié)合而成的外邊距稱(chēng)為折疊外邊距

折疊結(jié)果遵循下列計(jì)算規(guī)則：

兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是它們兩者之間較大的值

兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對(duì)值的較大值

兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的相加的和

請(qǐng)寫(xiě)出多種等高布局

在列的父元素上使用這個(gè)背景圖進(jìn)行Y軸的鋪放，從而實(shí)現(xiàn)一種等高列的假像

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

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

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

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

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

已知高度的塊級(jí)子元素，采用絕對(duì)定位和負(fù)邊距

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

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

缺點(diǎn)：IE67不兼容，父級(jí) overflow：hidden 失效

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

新增 inline-block 兄弟元素，設(shè)置 vertical-align

缺點(diǎn)：需要增加額外標(biāo)簽，IE67不兼容

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

絕對(duì)定位配合 CSS3 位移

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

CSS3彈性盒模型

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

圣杯布局的實(shí)現(xiàn)原理？

要求：三列布局；中間主體內(nèi)容前置，且寬度自適應(yīng)；兩邊內(nèi)容定寬

好處：重要的內(nèi)容放在文檔流前面可以?xún)?yōu)先渲染

原理：利用相對(duì)定位、浮動(dòng)、負(fù)邊距布局，而不添加額外標(biāo)簽

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

什么是雙飛翼布局？實(shí)現(xiàn)原理？

雙飛翼布局：對(duì)圣杯布局（使用相對(duì)定位，對(duì)以后布局有局限性）的改進(jìn)，消除相對(duì)定位布局

原理：主體元素上設(shè)置左右邊距，預(yù)留兩翼位置。左右兩欄使用浮動(dòng)和負(fù)邊距歸位，消除相對(duì)定位。

.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樣式？

不同瀏覽器對(duì)有些標(biāo)簽樣式的默認(rèn)值解析不同

不初始化CSS會(huì)造成各現(xiàn)瀏覽器之間的頁(yè)面顯示差異

可以使用 reset.css 或 Normalize.css 做 CSS 初始化

解釋下什么是浮動(dòng)和它的工作原理？

非IE瀏覽器下，容器不設(shè)高度且子元素浮動(dòng)時(shí)，容器高度不能被內(nèi)容撐開(kāi)。

此時(shí)，內(nèi)容會(huì)溢出到容器外面而影響布局。這種現(xiàn)象被稱(chēng)為浮動(dòng)（溢出）。

工作原理：

浮動(dòng)元素脫離文檔流，不占據(jù)空間（引起“高度塌陷”現(xiàn)象）

浮動(dòng)元素碰到包含它的邊框或者其他浮動(dòng)元素的邊框停留

浮動(dòng)元素引起的問(wèn)題？

父元素的高度無(wú)法被撐開(kāi)，影響與父元素同級(jí)的元素

與浮動(dòng)元素同級(jí)的非浮動(dòng)元素會(huì)跟隨其后

列舉幾種清除浮動(dòng)的方式？

添加額外標(biāo)簽，例如

使用 br 標(biāo)簽和其自身的 clear 屬性，例如

父元素設(shè)置 overflow：hidden; 在IE6中還需要觸發(fā) hasLayout，例如zoom：1;

父元素也設(shè)置浮動(dòng)

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

清除浮動(dòng)最佳實(shí)踐（after偽元素閉合浮動(dòng)）：

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

什么是 FOUC(Flash of Unstyled Content)？ 如何來(lái)避免 FOUC？

當(dāng)使用 @import 導(dǎo)入 CSS 時(shí)，會(huì)導(dǎo)致某些頁(yè)面在 IE 出現(xiàn)奇怪的現(xiàn)象：

沒(méi)有樣式的頁(yè)面內(nèi)容顯示瞬間閃爍，這種現(xiàn)象稱(chēng)為“文檔樣式短暫失效”，簡(jiǎn)稱(chēng)為FOUC

產(chǎn)生原因：當(dāng)樣式表晚于結(jié)構(gòu)性html加載時(shí)，加載到此樣式表時(shí)，頁(yè)面將停止之前的渲染。

等待此樣式表被下載和解析后，再重新渲染頁(yè)面，期間導(dǎo)致短暫的花屏現(xiàn)象。

解決方法：使用 link 標(biāo)簽將樣式表放在文檔 head

介紹使用過(guò)的 CSS 預(yù)處理器？

CSS 預(yù)處理器基本思想：為 CSS 增加了一些編程的特性（變量、邏輯判斷、函數(shù)等）

開(kāi)發(fā)者使用這種語(yǔ)言進(jìn)行進(jìn)行 Web 頁(yè)面樣式設(shè)計(jì)，再編譯成正常的 CSS 文件使用

使用 CSS 預(yù)處理器，可以使 CSS 更加簡(jiǎn)潔、適應(yīng)性更強(qiáng)、可讀性更佳，無(wú)需考慮兼容性

最常用的 CSS 預(yù)處理器語(yǔ)言包括：Sass（SCSS）和 LESS

CSS優(yōu)化、提高性能的方法有哪些？

多個(gè)css合并，盡量減少HTTP請(qǐng)求

將css文件放在頁(yè)面最上面

移除空的css規(guī)則

避免使用CSS表達(dá)式

選擇器優(yōu)化嵌套，盡量避免層級(jí)過(guò)深

充分利用css繼承屬性，減少代碼量

抽象提取公共樣式，減少代碼量

屬性值為0時(shí)，不加單位

屬性值為小于1的小數(shù)時(shí)，省略小數(shù)點(diǎn)前面的0

css雪碧圖

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

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

在網(wǎng)頁(yè)中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？

在網(wǎng)頁(yè)中的應(yīng)該使用“偶數(shù)”字體：

偶數(shù)字號(hào)相對(duì)更容易和 web 設(shè)計(jì)的其他部分構(gòu)成比例關(guān)系

使用奇數(shù)號(hào)字體時(shí)文本段落無(wú)法對(duì)齊

宋體的中文網(wǎng)頁(yè)排布中使用最多的就是 12 和 14

margin和padding分別適合什么場(chǎng)景使用？

需要在border外側(cè)添加空白，且空白處不需要背景（色）時(shí)，使用 margin

需要在border內(nèi)測(cè)添加空白，且空白處需要背景（色）時(shí)，使用 padding

抽離樣式模塊怎么寫(xiě)，說(shuō)出思路？

CSS可以拆分成2部分：公共CSS 和 業(yè)務(wù)CSS：

網(wǎng)站的配色，字體，交互提取出為公共CSS。這部分CSS命名不應(yīng)涉及具體的業(yè)務(wù)

對(duì)于業(yè)務(wù)CSS，需要有統(tǒng)一的命名，使用公用的前綴。可以參考面向?qū)ο蟮腃SS

元素豎向的百分比設(shè)定是相對(duì)于容器的高度嗎？

元素豎向的百分比設(shè)定是相對(duì)于容器的寬度，而不是高度

全屏滾動(dòng)的原理是什么？ 用到了CSS的那些屬性？

原理類(lèi)似圖片輪播原理，超出隱藏部分，滾動(dòng)時(shí)顯示

可能用到的CSS屬性：overflow:hidden; transform:translate(100%, 100%); display:none;

什么是響應(yīng)式設(shè)計(jì)？響應(yīng)式設(shè)計(jì)的基本原理是什么？如何兼容低版本的IE？

響應(yīng)式設(shè)計(jì)就是網(wǎng)站能夠兼容多個(gè)終端，而不是為每個(gè)終端做一個(gè)特定的版本

基本原理是利用CSS3媒體查詢(xún)，為不同尺寸的設(shè)備適配不同樣式

對(duì)于低版本的IE，可采用JS獲取屏幕寬度，然后通過(guò)resize方法來(lái)實(shí)現(xiàn)兼容：

$(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", "");
  }
}

什么是視差滾動(dòng)效果，如何給每頁(yè)做不同的動(dòng)畫(huà)？

視差滾動(dòng)是指多層背景以不同的速度移動(dòng)，形成立體的運(yùn)動(dòng)效果，具有非常出色的視覺(jué)體驗(yàn)

一般把網(wǎng)頁(yè)解剖為：背景層、內(nèi)容層和懸浮層。當(dāng)滾動(dòng)鼠標(biāo)滾輪時(shí)，各圖層以不同速度移動(dòng)，形成視差的

實(shí)現(xiàn)原理

以 “頁(yè)面滾動(dòng)條” 作為 “視差動(dòng)畫(huà)進(jìn)度條”

以 “滾輪刻度” 當(dāng)作 “動(dòng)畫(huà)幀度” 去播放動(dòng)畫(huà)的

監(jiān)聽(tīng) mousewheel 事件，事件被觸發(fā)即播放動(dòng)畫(huà)，實(shí)現(xiàn)“翻頁(yè)”效果

a標(biāo)簽上四個(gè)偽類(lèi)的執(zhí)行順序是怎么樣的

link > visited > hover > active

L-V-H-A love hate 用喜歡和討厭兩個(gè)詞來(lái)方便記憶

偽元素和偽類(lèi)的區(qū)別和作用？

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

它們只在外部顯示可見(jiàn)，但不會(huì)在文檔的源代碼中找到它們，因此，稱(chēng)為“偽”元素。例如：

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

偽類(lèi) -- 將特殊的效果添加到特定選擇器上。它是已有元素上添加類(lèi)別的，不會(huì)產(chǎn)生新的元素。例如：

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

::before 和 :after 中雙冒號(hào)和單冒號(hào)有什么區(qū)別？

在 CSS 中偽類(lèi)一直用 : 表示，如 :hover, :active 等

偽元素在CSS1中已存在，當(dāng)時(shí)語(yǔ)法是用 : 表示，如 :before 和 :after

后來(lái)在CSS3中修訂，偽元素用 :: 表示，如 ::before 和 ::after，以此區(qū)分偽元素和偽類(lèi)

由于低版本IE對(duì)雙冒號(hào)不兼容，開(kāi)發(fā)者為了兼容性各瀏覽器，繼續(xù)使使用 :after 這種老語(yǔ)法表示偽元素

綜上所述：::before 是 CSS3 中寫(xiě)偽元素的新語(yǔ)法； :after 是 CSS1 中存在的、兼容IE的老語(yǔ)法

如何修改Chrome記住密碼后自動(dòng)填充表單的黃色背景？

產(chǎn)生原因：由于Chrome默認(rèn)會(huì)給自動(dòng)填充的input表單加上 input:-webkit-autofill 私有屬性造成的

解決方案1：在form標(biāo)簽上直接關(guān)閉了表單的自動(dòng)填充：autocomplete="off"

解決方案2：input:-webkit-autofill { background-color: transparent; }

input [type=search] 搜索框右側(cè)小圖標(biāo)如何美化？

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

網(wǎng)站圖片文件，如何點(diǎn)擊下載？而非點(diǎn)擊預(yù)覽？

下載
下載

iOS safari 如何阻止“橡皮筋效果”？

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

你對(duì) line-height 是如何理解的？

line-height 指一行字的高度，包含了字間距，實(shí)際上是下一行基線到上一行基線距離

如果一個(gè)標(biāo)簽沒(méi)有定義 height 屬性，那么其最終表現(xiàn)的高度是由 line-height 決定的

一個(gè)容器沒(méi)有設(shè)置高度，那么撐開(kāi)容器高度的是 line-height 而不是容器內(nèi)的文字內(nèi)容

把 line-height 值設(shè)置為 height 一樣大小的值可以實(shí)現(xiàn)單行文字的垂直居中

line-height 和 height 都能撐開(kāi)一個(gè)高度，height 會(huì)觸發(fā) haslayout，而 line-height 不會(huì)

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

帶單位：px 是固定值，而 em 會(huì)參考父元素 font-size 值計(jì)算自身的行高

純數(shù)字：會(huì)把比例傳遞給后代。例如，父級(jí)行高為 1.5，子元素字體為 18px，則子元素行高為 1.5 * 18 = 27px

百分比：將計(jì)算后的值傳遞給后代

設(shè)置元素浮動(dòng)后，該元素的 display 值會(huì)如何變化？

設(shè)置元素浮動(dòng)后，該元素的 display 值自動(dòng)變成 block

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

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

讓頁(yè)面里的字體變清晰，變細(xì)用CSS怎么做？（IOS手機(jī)瀏覽器字體齒輪設(shè)置）

  -webkit-font-smoothing: antialiased;

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

font-style: oblique; 使沒(méi)有 italic 屬性的文字實(shí)現(xiàn)傾斜

如果需要手動(dòng)寫(xiě)動(dòng)畫(huà)，你認(rèn)為最小時(shí)間間隔是多久？

16.7ms 多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次，所以理論上最小間隔: 1s / 60 * 1000 ＝ 16.7ms

display:inline-block 什么時(shí)候會(huì)顯示間隙？

相鄰的 inline-block 元素之間有換行或空格分隔的情況下會(huì)產(chǎn)生間距

非 inline-block 水平元素設(shè)置為 inline-block 也會(huì)有水平間距

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

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

把 li 標(biāo)簽寫(xiě)到同一行可以消除垂直間隙，但代碼可讀性差

overflow: scroll 時(shí)不能平滑滾動(dòng)的問(wèn)題怎么處理？

監(jiān)聽(tīng)滾輪事件，然后滾動(dòng)到一定距離時(shí)用 jquery 的 animate 實(shí)現(xiàn)平滑效果。

一個(gè)高度自適應(yīng)的div，里面有兩個(gè)div，一個(gè)高度100px，希望另一個(gè)填滿(mǎn)剩下的高度

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