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

filter: blur(0); CSS3 屬性，將一個元素的模糊度設(shè)置為 0，從而使這個

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

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

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

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

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

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

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

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

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

原理：利用相對定位、浮動、負邊距布局，而不添加額外標(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è)置左右邊距，預(yù)留兩翼位置。左右兩欄使用浮動和負邊距歸位，消除相對定位。

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

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

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

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

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

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

reset.css 意為重置默認(rèn)樣式。HTML 中絕大部分標(biāo)簽元素在網(wǎng)頁顯示中都有一個默認(rèn)屬性值，通常為了避免重復(fù)定義元素樣式，需要進行重置默認(rèn)樣式

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 文件,但它在默認(rèn)的 HTML 元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統(tǒng)的 css reset，Normalize.css 是一種現(xiàn)代的，為 HTML5 準(zhǔn)備的優(yōu)質(zhì)替代方案。

Normalize.css 是一種 CSS reset 的替代方案。經(jīng)過@necolas 和@jon neal 花了幾百個小時來努力研究不同瀏覽器的默認(rèn)樣式的差異，這個項目終于變成了現(xiàn)在這樣。

我們創(chuàng)造 normalize.css 有下幾個目的：

保護有用的瀏覽器默認(rèn)樣式而不是完全去掉它們

一般化的樣式：為大部分 HTML 元素提供

修復(fù)瀏覽器自身的 bug 并保證各瀏覽器的一致性

優(yōu)化 CSS 可用性：用一些小技巧

解釋代碼：用注釋和詳細的文檔來

當(dāng)使用 @import 導(dǎo)入 CSS 時，會導(dǎo)致某些頁面在 IE 出現(xiàn)奇怪的現(xiàn)象： 沒有樣式的頁面內(nèi)容顯示瞬間閃爍，這種現(xiàn)象稱為“文檔樣式短暫失效”，簡稱為 FOUC

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

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

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

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

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

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

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

多個 css 合并，盡量減少 HTTP 請求

將 css 文件放在頁面最上面

移除空的 css 規(guī)則

避免使用 CSS 表達式

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

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

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

屬性值為 0 時，不加單位

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

css 雪碧圖

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

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

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

使用奇數(shù)號字體時文本段落無法對齊

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

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

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

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

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

對于業(yè)務(wù) CSS，需要有統(tǒng)一的命名，使用公用的前綴?？梢詤⒖济嫦?qū)ο蟮?CSS

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

原理類似圖片輪播原理，超出隱藏部分，滾動時顯示

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

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

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

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

視差滾動是指多層背景以不同的速度移動，形成立體的運動效果，具有非常出色的視覺體驗

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

實現(xiàn)原理

以 “頁面滾動條” 作為 “視差動畫進度條”

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

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

link > visited > hover > active

偽元素:在內(nèi)容元素的前后插入額外的元素或樣式，但是這些元素實際上并不在文檔中生成。它們只在外部顯示可見，但不會在文檔的源代碼中找到它們，因此，稱為“偽”元素。例如：

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

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

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

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

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

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

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

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

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

解決方案 1：在 form 標(biāo)簽上直接關(guān)閉了表單的自動填充：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;
}

下載 下載

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

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

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

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

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

line-height 和 height 都能撐開一個高度，height 會觸發(fā) haslayout，而 line-height 不會

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

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

百分比：將計算后的值傳遞給后代

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

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

  -webkit-font-smoothing: antialiased;

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

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

監(jiān)聽滾輪事件，然后滾動到一定距離時用 jquery 的 animate 實現(xià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; }

對于 CSS 而言，id 和 class 都是選擇器，唯一不同的地方在于權(quán)重不同。如果只說 CSS，上面那一句話就講完了。拓展出來，對于 html 而言，id 和 class 都是 dom 元素的屬性值。不同的地方在于 id 屬性的值是唯一的，而 class 屬性值可以重復(fù)。id 還一個老特性是錨點功能，當(dāng)瀏覽器地址欄有一個#xxx，頁面會自動滾動到 id=xxx 的元素上面。

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

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

但打印樣式表也應(yīng)有些注意事項：

打印樣式表中最好不要用背景圖片，因為打印機不能打印 CSS 中的背景。如要顯示圖片，請使用 html 插入到頁面中。

最好不要使用像素作為單位，因為打印樣式表要打印出來的會是實物，所以建議使用 pt 和 cm。

隱藏掉不必要的內(nèi)容。（@print div{display:none;}）

打印樣式表中最好少用浮動屬性，因為它們會消失。

使用 transform 或 position 實現(xiàn)動畫效果時是有很大差別。

使用 transform 時，可以讓 GPU 參與運算，動畫的 FPS 更高。

使用 position 時，最小的動畫變化的單位是 1px，而使用 transform 參與時，可以做到更?。▌赢嬓Ч悠交?/p>

功能都一樣。但是 translate 不會引起瀏覽器的重繪和重排，這就相當(dāng) nice 了。

反之

tranform 改變 fixed 子元素的定位對象

transform 改變元素層疊順序
transform 的副作用

CSS Sprites 其實就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用 CSS 的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position 可以用數(shù)字能精確的定位出背景圖片的位置。

CSS Sprites 為一些大型的網(wǎng)站節(jié)約了帶寬，讓提高了用戶的加載速度和用戶體驗，不需要加載更多的圖片。

下面的屬性在 SVG 和 CSS 中是一樣的，只是在 SVG 的 transformations 和 dimensions 中稍有區(qū)別：

font-family, font-size, font-style, font-variant 和 font-weight

width 和 height

scale, rotate, skew

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

用圖片代替

web fonts 在線字庫

@font-face

參考鏈接：如果設(shè)計中使用了非標(biāo)準(zhǔn)的字體，你該如何去實現(xiàn)？