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 屬性專門應(yīng)用在 before/after 偽元素上，用于插入額外內(nèi)容或樣式

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

個(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);

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

動(dòng)畫 @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

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

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

模仿表格布局等高列效果：兼容性不好，在ie6-7無法正常運(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)容放在文檔流前面可以優(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樣式中常使用 px、em 在表現(xiàn)上有什么區(qū)別？

px 相對(duì)于顯示器屏幕分辨率，無法用瀏覽器字體放大功能

em 值并不是固定的，會(huì)繼承父級(jí)的字體大?。?em = 像素值 / 父級(jí)font-size

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

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

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

工作原理：

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

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

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

父元素的高度無法被撐開，影響與父元素同級(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)？ 如何來避免 FOUC？

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

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

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

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

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

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

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

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

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

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

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

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

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

移除空的css規(guī)則

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

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

充分利用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í)文本段落無法對(duì)齊

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

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

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

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

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

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的那些屬性？

原理類似圖片輪播原理，超出隱藏部分，滾動(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媒體查詢，為不同尺寸的設(shè)備適配不同樣式

對(duì)于低版本的IE，可采用JS獲取屏幕寬度，然后通過resize方法來實(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)畫？

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

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

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

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

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

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

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

link > visited > hover > active

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

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

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

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

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

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

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

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

在 CSS 中偽類一直用 : 表示，如 :hover, :active 等

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

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

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

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

如何修改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)簽沒有定義 height 屬性，那么其最終表現(xiàn)的高度是由 line-height 決定的

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

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

line-height 和 height 都能撐開一個(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; 使沒有 italic 屬性的文字實(shí)現(xiàn)傾斜

如果需要手動(dòng)寫動(dòng)畫，你認(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)簽寫到同一行可以消除垂直間隙，但代碼可讀性差

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

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

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

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