2、$CSS部分

一、css sprite是什麼,有什麼優缺點

• 概念：將多個小圖片拼接到一個圖片中。經過background-position和元素尺寸調節須要顯示的背景圖案。

• 優勢：

  • 減小HTTP請求數，極大地提升頁面加載速度
  • 增長圖片信息重複度，提升壓縮比，減小圖片大小
  • 更換風格方便，只需在一張或幾張圖片上修改顏色或樣式便可實現

• 缺點：

  • 圖片合併麻煩
  • 維護麻煩，修改一個圖片可能須要重新佈局整個圖片，樣式

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

• 聯繫：它們都能讓元素不可見

• 區別：

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

三、link與@import的區別

1. link是HTML方式， @import是CSS方式

2. link最大限度支持並行下載，@import過多嵌套致使串行下載，出現FOUC

3. link能夠經過rel="alternate stylesheet"指定候選樣式

4. 瀏覽器對link支持早於@import，可使用@import對老瀏覽器隱藏樣式

5. @import必須在樣式規則以前，能夠在css文件中引用其餘文件

6. 整體來講：link優於@import

四、什麼是FOUC?如何避免

• Flash Of Unstyled Content：用戶定義樣式表加載以前瀏覽器使用默認樣式顯示文檔，用戶樣式加載渲染以後再重新顯示文檔，形成頁面閃爍。

• 解決方法：把樣式表放到文檔的head

五、如何建立塊級格式化上下文(block formatting context),BFC有什麼用

• 建立規則：

  • 根元素
  • 浮動元素（float不是none）
  • 絕對定位元素（position取值爲absolute或fixed）
  • display取值爲inline-block,table-cell, table-caption,flex, inline-flex之一的元素
  • overflow不是visible的元素

• 做用：

  • 能夠包含浮動元素
  • 不被浮動元素覆蓋
  • 阻止父子元素的margin摺疊

六、display,float,position的關係

• 若是display爲none，那麼position和float都不起做用，這種狀況下元素不產生框

• 不然，若是position值爲absolute或者fixed，框就是絕對定位的，float的計算值爲none，display根據下面的表格進行調整。

• 不然，若是float不是none，框是浮動的，display根據下表進行調整

• 不然，若是元素是根元素，display根據下表進行調整

• 其餘狀況下display的值爲指定值

• 總結起來：絕對定位、浮動、根元素都須要調整display

七、清除浮動的幾種方式，各自的優缺點

• 父級div定義height

• 結尾處加空div標籤clear:both

• 父級div定義僞類:after和zoom

• 父級div定義overflow:hidden

• 父級div也浮動，須要定義寬度

• 結尾處加br標籤clear:both

• 比較好的是第3種方式，好多網站都這麼用

八、爲何要初始化CSS樣式?

• 由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。

• 固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化

九、css3有哪些新特性

• 新增各類css選擇器

• 圓角 border-radius

• 多列布局

• 陰影和反射

• 文字特效text-shadow

• 線性漸變

• 旋轉transform

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 單選框或複選框被選中

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

• block 象塊類型元素同樣顯示。

• none 缺省值。象行內元素類型同樣顯示。

• inline-block 象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。

• list-item 象塊類型元素同樣顯示，並添加樣式列表標記。

• table 此元素會做爲塊級表格來顯示

• inherit 規定應該從父元素繼承 display 屬性的值

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

• 有兩種， IE盒子模型、W3C盒子模型；

• 盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；

• 區 別： IE的content部分把 border 和 padding計算了進去;

十二、CSS優先級算法如何計算？

• 優先級就近原則，同權重狀況下樣式定義最近者爲準

• 載入樣式以最後載入的定位爲準

• 優先級爲: !important > id > class > tag important 比 內聯優先級高

1三、對BFC規範的理解？

• 它決定了元素如何對其內容進行定位,以及與其餘元素的關係和相互做用

1四、談談浮動和清除浮動

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

1五、position的值， relative和absolute定位原點是

• absolute：生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位

• fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位

• relative：生成相對定位的元素，相對於其正常位置進行定位

• static 默認值。沒有定位，元素出如今正常的流中

• inherit 規定從父元素繼承 position 屬性的值

1六、display:inline-block 何時不會顯示間隙？(攜程)

• 移除空格

• 使用margin負值

• 使用font-size:0

• letter-spacing

• word-spacing

1七、PNG,GIF,JPG的區別及如何選

• GIF

  • 8位像素，256色
  • 無損壓縮
  • 支持簡單動畫
  • 支持boolean透明
  • 適合簡單動畫

• JPEG

  • 顏色限於256
  • 有損壓縮
  • 可控制壓縮質量
  • 不支持透明
  • 適合照片

• PNG

  • 有PNG8和truecolor PNG
  • PNG8相似GIF顏色上限爲256，文件小，支持alpha透明度，無動畫
  • 適合圖標、背景、按鈕

1八、行內元素float:left後是否變爲塊級元素？

• 浮動後，行內元素不會成爲塊狀元素，可是能夠設置寬高。行內元素要想變成塊狀元素，佔一行，直接設置display:block;。但若是元素設置了浮動後再設置display:block;那就不會佔一行。

1九、在網頁中的應該使用奇數仍是偶數的字體？爲何呢？

• 偶數字號相對更容易和 web 設計的其餘部分構成比例關係

20、::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個僞元素的做用

• 單冒號(:)用於CSS3僞類，雙冒號(::)用於CSS3僞元素

• 用於區分僞類和僞元素

2一、若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？（阿里）

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

2二、CSS合併方法

• 避免使用@import引入多個css文件，可使用CSS工具將CSS合併爲一個CSS文件，例如使用Sass\Compass等

2三、CSS不一樣選擇器的權重(CSS層疊的規則)

• ！important規則最重要，大於其它規則

• 行內樣式規則，加1000

• 對於選擇器中給定的各個ID屬性值，加100

• 對於選擇器中給定的各個類屬性、屬性選擇器或者僞類選擇器，加10

• 對於選擇其中給定的各個元素標籤選擇器，加1

• 若是權值同樣，則按照樣式規則的前後順序來應用，順序靠後的覆蓋靠前的規則

2四、列出你所知道能夠改變頁面佈局的屬性

• position、display、float、width、height、margin、padding、top、left、right、`

2五、CSS在性能優化方面的實踐

• css壓縮與合併、Gzip壓縮

• css文件放在head裏、不要用@import

• 儘可能用縮寫、避免用濾鏡、合理使用選擇器

2六、CSS3動畫（簡單動畫的實現，如旋轉等）

• 依靠CSS3中提出的三個屬性：transition、transform、animation

• transition：定義了元素在變化過程當中是怎麼樣的，包含transition-property、transition-duration、transition-timing-function、transition-delay。

• transform：定義元素的變化結果，包含rotate、scale、skew、translate。

• animation：動畫定義了動做的每一幀（@keyframes）有什麼效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction

2七、base64的原理及優缺點

• 優勢能夠加密，減小了http請求

• 缺點是須要消耗CPU進行編解碼

2八、幾種常見的CSS佈局

流體佈局

.left {
        float: left;
        width: 100px;
        height: 200px;
        background: red;
    }
    .right {
        float: right;
        width: 200px;
        height: 200px;
        background: blue;
    }
    .main {
        margin-left: 120px;
        margin-right: 220px;
        height: 200px;
        background: green;
    }

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
</div>

聖盃佈局

.container {
            margin-left: 120px;
            margin-right: 220px;
        }
        .main {
            float: left;
            width: 100%;
            height:300px;
            background: green;
        }
        .left {
            position: relative;
            left: -120px;
            float: left;
            height: 300px;
            width: 100px;
            margin-left: -100%;
            background: red;
        }
        .right {
            position: relative;
            right: -220px;
            float: right;
            height: 300px;
            width: 200px;
            margin-left: -200px;
            background: blue;
        }

<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

雙飛翼佈局

 .content {
            float: left;
            width: 100%;
        }
        .main {
            height: 200px;
            margin-left: 110px;
            margin-right: 220px;
            background: green;
        }
        .main::after {
            content: '';
            display: block;
            font-size:0;
            height: 0;
            zoom: 1;
            clear: both;
        }
        .left {
            float:left;
            height: 200px;
            width: 100px;
            margin-left: -100%;
            background: red;
        }
        .right {
            float: right;
            height: 200px;
            width: 200px;
            margin-left: -200px;
            background: blue;
        }

<div class="content">
    <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>

2九、stylus/sass/less區別

• 均具備「變量」、「混合」、「嵌套」、「繼承」、「顏色混合」五大基本特性

• Scss和LESS語法較爲嚴謹，LESS要求必定要使用大括號「{}」，Scss和Stylus能夠經過縮進表示層次與嵌套關係

• Scss無全局變量的概念，LESS和Stylus有相似於其它語言的做用域概念

• Sass是基於Ruby語言的，而LESS和Stylus能夠基於NodeJS NPM下載相應庫後進行編譯；

30、postcss的做用

• 能夠直觀的理解爲：它就是一個平臺。爲何說它是一個平臺呢？由於咱們直接用它，感受不能幹什麼事情，可是若是讓一些插件在它上面跑，那麼將會很強大
• PostCSS 提供了一個解析器，它可以將 CSS 解析成抽象語法樹
• 經過在 PostCSS 這個平臺上，咱們可以開發一些插件，來處理咱們的CSS，好比熱門的：autoprefixer
• postcss能夠對sass處理事後的css再處理 最多見的就是autoprefixer