一爵政，css常見問題：

一、margin問題

1. 上下margin重疊問題白华，即給相鄰的兩個div設(shè)置margin-bottom和margin-top時堤瘤，默認取他們兩個中的最大值作為最終的間距
   解決方案:
   <1>. 選取其中的一個值設(shè)置即可

2、margin穿透問題-子元素的margin-top會出現(xiàn)在父元素的上方
解決方案:
<1>. 給父容器添加 overflow: hidden; 屬性慎王，原理:觸發(fā)BFC機制
<2>. 給父容器添加 border-top: 1px solid transparent;
<3>. 使用父容器的 padding-top 屬性來代替子元素的 margin-top

二蚓土、display:inline-block 問題

1. li 元素設(shè)置 display:inline-block; 之后，相鄰的li元素之間會出現(xiàn)間隙赖淤。
   產(chǎn)生原因:代碼中的空格和換行符導致的
   解決方案:
   <1>. 父容器設(shè)置 font-size: 0; 然后在給其內(nèi)部的元素分別設(shè)置需要的字體大小即可
   <2>. 使用浮動來代替 display: inline-block;

2. display: inline-block 在IE低版本中不兼容
   解決方案:
   在使用 display: inline-block; 時蜀漆，加上 *display: inline; 和 *zoom: 1; 即可

三、圖片問題

1. 加鏈接的圖片咱旱，在IE低版本中出現(xiàn)藍色邊框
   解決方案: 給 img 標簽設(shè)置 border: 0 none; 即可

2. img屬于行級塊元素确丢，有時圖片之間會出現(xiàn)間距
   解決方案: 給 img 標簽設(shè)置浮動: float: left | right; 即可

3. 在IE6和FF中绷耍，有時圖片下方會出現(xiàn)一條間隙
   解決方案: 給 img 標簽設(shè)置 vertical-align: top | middle | bottom; 即可

4. IE中的背景圖片無法使用 background-size 來實現(xiàn)平鋪
   解決方案: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./imgs/bigImg.jpg',sizingMethod='scale');

四、透明度問題

opacity屬性不兼容IE8及以下版本的瀏覽器

解決方案: filter: alpha(opacity=50);
ps: 此處的透明度取值范圍: [0, 100], 而正常情況下的取值范圍為: [0, 1]

五鲜侥、chrome最小字體12px, 不能直接設(shè)置更小字體
解決方案: 事先計算出來文字的大小褂始，然后使用css3的縮放功能，transform:scale(0.8)

二描函，css全面問題：

display: none; 與 visibility: hidden; 的區(qū)別

相同： 它們都能讓元素不可見

區(qū)別：

• display:none;會讓元素完全從渲染樹中消失崎苗，渲染的時候不占據(jù)任何空間；visibility: hidden;不會讓元素從渲染樹消失舀寓，渲染師元素繼續(xù)占據(jù)空間胆数，只是內(nèi)容不可見
• display: none;是非繼承屬性，子孫節(jié)點消失由于元素從渲染樹消失造成互墓，通過修改子孫節(jié)點屬性無法顯示幅慌；visibility:hidden;是繼承屬性，子孫節(jié)點消失由于繼承了 hidden轰豆，通過設(shè)置 visibility: visible;可以讓子孫節(jié)點顯式
• 修改常規(guī)流中元素的 display 通常會造成文檔重排胰伍。修改 visibility 屬性只會造成本元素的重繪
• 讀屏器不會讀取 display: none;元素內(nèi)容；會讀取 visibility: hidden 元素內(nèi)容

css hack 原理及常用 hack

原理：利用不同瀏覽器對 CSS 的支持和解析結(jié)果不一樣編寫針對特定瀏覽器樣式酸休。常見的 hack 有 1）屬性 hack骂租。2）選擇器 hack。3）IE 條件注釋

IE 條件注釋：適用于[IE5, IE9]常見格式如下

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

選擇器 hack：不同瀏覽器對選擇器的支持不一樣

/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE7, FF, Saf, Opera  */
html>body #tres { color: red }

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Opera 9.27 and below, safari 2 */
html:first-child #cinco { color: red }

/* Safari 2-3 */
html[xmlns*=""] body:last-child #seis { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { color: red  }
}

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #veintiseis { color: red  }
}

/* Safari 2 - 3.1 */
html[xmlns*=""]:root #trece  { color: red  }

/* Safari 2 - 3.1, Opera 9.25 */
*|html[xmlns*=""] #catorce { color: red  }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* Firefox only. 1+ */
#veinticuatro,  x:-moz-any-link  { color: red }

/* Firefox 3.0+ */
#veinticinco,  x:-moz-any-link, x:default  { color: red  }

屬性 hack：不同瀏覽器解析 bug 或方法

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8 */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

link 與 @import 的區(qū)別

• link 是 HTML 方式斑司， @import 是 CSS 方式
• link 最大限度支持并行下載渗饮，@import 過多嵌套導致串行下載，出現(xiàn) FOUC
• link 可以通過 rel="alternate stylesheet" 指定候選樣式
• 瀏覽器對 link 支持早于@import 宿刮，可以使用 @import 對老瀏覽器隱藏樣式
• @import 必須在樣式規(guī)則之前互站，可以在 css 文件中引用其他文件
• 總體來說：link 優(yōu)于@import

CSS 有哪些繼承屬性

• 關(guān)于文字排版的屬性如：
  • font
  • word-break
  • letter-spacing
  • text-align
  • text-rendering
  • word-spacing
  • white-space
  • text-indent
  • text-transform
  • text-shadow
• line-height
• color
• visibility
• cursor

display,float,position 的關(guān)系

• 如果 display 為 none，那么 position 和 float 都不起作用僵缺，這種情況下元素不產(chǎn)生框

• 否則胡桃，如果 position 值為 absolute 或者 fixed，框就是絕對定位的磕潮，float 的計算值為 none翠胰，display 根據(jù)下面的表格進行調(diào)整

• 否則，如果 float 不是 none自脯，框是浮動的之景，display 根據(jù)下表進行調(diào)整

• 否則，如果元素是根元素膏潮，display 根據(jù)下表進行調(diào)整

• 其他情況下 display 的值為指定值 總結(jié)起來：絕對定位锻狗、浮動、根元素都需要調(diào)整 display

  [圖片上傳失敗...(image-d8d279-1555409286338)]

外邊距折疊(collapsing margins)

外邊距重疊就是 margin-collapse

相鄰的兩個盒子（可能是兄弟關(guān)系也可能是祖先關(guān)系）的外邊距可以結(jié)合成一個單獨的外邊距。 這種合并外邊距的方式被稱為折疊轻纪，結(jié)合而成的外邊距稱為折疊外邊距

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

• 兩個相鄰的外邊距都是正數(shù)時脚囊，折疊結(jié)果是它們兩者之間較大的值
• 兩個相鄰的外邊距都是負數(shù)時，折疊結(jié)果是兩者絕對值的較大值
• 兩個外邊距一正一負時桐磁，折疊結(jié)果是兩者的相加的和

介紹一下標準的 CSS 的盒子模型悔耘？低版本 IE 的盒子模型有什么不同的？

• 有兩種我擂， IE 盒子模型衬以、W3C 盒子模型；
• 盒模型： 內(nèi)容(content)校摩、填充(padding)看峻、邊界(margin)、 邊框(border)衙吩；
• 標準(W3C)盒模型：元素寬度 = width + padding + border + margin
• 怪異(IE)盒模型：元素寬度 = width + margin
• 區(qū) 別： IE 的 content 部分把 border 和 padding 計算了進去;
• 標準瀏覽器通過設(shè)置 css3 的 box-sizing: border-box 屬性互妓，觸發(fā)“怪異模式”解析計算寬高

CSS 選擇符有哪些？

• id 選擇器（ # myid）
• 類選擇器（.myclassname）
• 標簽選擇器（div, h1, p）
• 相鄰選擇器（h1 + p）
• 子選擇器（ul > li）
• 后代選擇器（li a）
• 通配符選擇器（ * ）
• 屬性選擇器（a[rel = "external"]）
• 偽類選擇器（a:hover, li:nth-child）

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 在元素之前添加內(nèi)容,也可以用來做清除浮動浮禾。

• :before 在元素之后添加內(nèi)容

• :enabled 選擇器匹配每個已啟用的元素（大多用在表單元素上）交胚。

• :disabled 控制表單控件的禁用狀態(tài)。

• :checked 單選框或復選框被選中

如何居中 div盈电？如何居中一個浮動元素蝴簇？如何讓絕對定位的 div 居中？

如果需要居中的元素為常規(guī)流中 inline 元素匆帚，為父元素設(shè)置 text-align: center;即可實現(xiàn)

如果需要居中的元素為常規(guī)流中 block 元素熬词，1）為元素設(shè)置寬度，2）設(shè)置左右 margin 為 auto卷扮。3）IE6 下需在父元素上設(shè)置 text-align: center;,再給子元素恢復需要的值

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        text-align: center; /* 3 */
    }
    .content {
        width: 500px;      /* 1 */
        text-align: left;  /* 3 */
        margin: 0 auto;    /* 2 */

        background: purple;
    }
</style>

如果需要居中的元素為浮動元素荡澎，1）為元素設(shè)置寬度均践，2）position: relative;晤锹，3）浮動方向偏移量（left 或者 right）設(shè)置為 50%，4）浮動方向上的 margin 設(shè)置為元素寬度一半乘以-1

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
    }
    .content {
        width: 500px;         /* 1 */
        float: left;

        position: relative;   /* 2 */
        left: 50%;            /* 3 */
        margin-left: -250px;  /* 4 */

        background-color: purple;
    }
</style>

如果需要居中的元素為絕對定位元素彤委，1）為元素設(shè)置寬度鞭铆，2）偏移量設(shè)置為 50%，3）偏移方向外邊距設(shè)置為元素寬度一半乘以-1

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        position: relative;
    }
    .content {
        width: 800px;

        position: absolute;
        left: 50%;
        margin-left: -400px;

        background-color: purple;
    }
</style>

如果需要居中的元素為絕對定位元素，1）為元素設(shè)置寬度车遂，2）設(shè)置左右偏移量都為 0,3）設(shè)置左右外邊距都為 auto

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        position: relative;
    }
    .content {
        width: 800px;

        position: absolute;
        margin: 0 auto;
        left: 0;
        right: 0;

        background-color: purple;
    }
</style>

如何豎直居中一個元素

• 絕對定位居中
• 如果居中的是行內(nèi)元素封断，可以設(shè)置父級 height 與 line-height 相等
• 設(shè)置 margin/padding 居中
• 相對位置偏移居中
• flex 居中 設(shè)置 align-items:center 即可

display 有哪些值？說明他們的作用

• block 象塊類型元素一樣顯示舶担。
• none 缺省值坡疼。象行內(nèi)元素類型一樣顯示。
• inline-block 象行內(nèi)元素一樣顯示衣陶，但其內(nèi)容象塊類型元素一樣顯示柄瑰。
• list-item 象塊類型元素一樣顯示，并添加樣式列表標記剪况。
• table 此元素會作為塊級表格來顯示
• inherit 規(guī)定應(yīng)該從父元素繼承 display 屬性的值

position 有哪些值 relative 和 absolute 定位原點是教沾？

• absolute 生成絕對定位的元素，相對于值不為 static 的第一個父元素進行定位译断。
• fixed （老 IE 不支持） 生成絕對定位的元素授翻，相對于瀏覽器窗口進行定位。
• relative 生成相對定位的元素孙咪，相對于其正常位置進行定位堪唐。
• static 默認值。沒有定位翎蹈，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right - z-index 聲明）羔杨。
• inherit 規(guī)定從父元素繼承 position 屬性的值

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;
• 平滑過渡 transition: all .3s ease-in .1s;
• 動畫 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;
• 轉(zhuǎn)換
  • 旋轉(zhuǎn) transform: rotate(20deg);
  • 傾斜 transform: skew(150deg, -10deg);
  • 位移 transform: translate(20px, 20px);
  • 縮放 transform: scale(.5);

用純 CSS 創(chuàng)建一個三角形的原理是什么杨蛋？

/* 把上兜材、左、右三條邊隱藏掉（顏色設(shè)為 transparent）*/
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

一個滿屏品字布局如何設(shè)計?

簡單的方式：

• 上面的 div 寬 100%逞力，
• 下面的兩個 div 分別寬 50%曙寡，
• 然后用 float 或者 inline 使其不換行即可

經(jīng)常遇到的瀏覽器的兼容性有哪些？原因寇荧，解決方法是什么举庶，常用 hack 的技巧 ？

• png24 位的圖片在 iE6 瀏覽器上出現(xiàn)背景揩抡，解決方案是做成 PNG8.
• 瀏覽器默認的 margin 和 padding 不同户侥。解決方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一
• IE 下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,也可以使用 getAttribute()獲取自定義屬性;
• Firefox 下,只能使用 getAttribute()獲取自定義屬性。解決方法:統(tǒng)一通過 getAttribute()獲取自定義屬性
• IE 下,even 對象有 x,y 屬性,但是沒有 pageX,pageY 屬性
• Firefox 下,event 對象有 pageX,pageY 屬性,但是沒有 x,y 屬性

li 與 li 之間有看不見的空白間隔是什么原因引起的峦嗤？有什么解決辦法蕊唐？(也稱幽靈字符)

行框的排列會受到中間空白（回車\空格）等的影響，因為空格也屬于字符,這些空白也會被應(yīng)用樣式烁设，占據(jù)空間替梨，所以會有間隔，把字符大小設(shè)為 0，就沒有空格了

display:inline-block 間隙問題怎么解決副瀑？(攜程)

移除空格弓熏、使用 margin 負值、使用 font-size:0糠睡、letter-spacing挽鞠、word-spacing

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

• 相鄰的 inline-block 元素之間有換行或空格分隔的情況下會產(chǎn)生間距
• 非 inline-block 水平元素設(shè)置為 inline-block 也會有水平間距
• 可以借助 vertical-align:top; 消除垂直間隙
• 可以在父級加 font-size：0; 在子元素里設(shè)置需要的字體大小狈孔，消除垂直間隙
• 把 li 標簽寫到同一行可以消除垂直間隙滞谢，但代碼可讀性差

css 定義的權(quán)重

網(wǎng)上有聲稱諸如id權(quán)重100，class權(quán)重10等計算方法除抛，這是不正確的狮杨。
實際上應(yīng)該如下：

1. 如果一個聲明來自style屬性而不是選擇器，計作1或者a=1（在一個html文檔中到忽，元素“style”的值是樣式表規(guī)則橄教，這個規(guī)則中沒有選擇器，所以a=1, b=0, c=0, and d=0）
2. 選擇器中id屬性的個數(shù),計作b
3. 選擇器中其他屬性以及偽類的個數(shù)喘漏，計作c
4. 選擇器中元素及偽元素的個數(shù)护蝶，計作d

一些例子：

* {}     /* a=0 b=0 c=0 d=0 -> 優(yōu)先級= 0,0,0,0 */
li {}     /* a=0 b=0 c=0 d=1 -> 優(yōu)先級 = 0,0,0,1 */
li:first-line {}     /* a=0 b=0 c=0 d=2 -> 優(yōu)先級 = 0,0,0,2 */
ul li {}     /* a=0 b=0 c=0 d=2 -> 優(yōu)先級 = 0,0,0,2 */
ul ol+li {}     /* a=0 b=0 c=0 d=3 -> 優(yōu)先級 = 0,0,0,3 */
h1 + *[rel=up]{}     /* a=0 b=0 c=1 d=1 -> 優(yōu)先級 = 0,0,1,1 */
ul ol li.red {}     /* a=0 b=0 c=1 d=3 -> 優(yōu)先級 = 0,0,1,3 */
li.red.level {}     /* a=0 b=0 c=2 d=1 -> 優(yōu)先級 = 0,0,2,1 */
#x34y {}     /* a=0 b=1 c=0 d=0 -> 優(yōu)先級 = 0,1,0,0 */
style=""     /* a=1 b=0 c=0 d=0 -> 優(yōu)先級 = 1,0,0,0 */

[備注]
　　:first-line 偽元素
　　[rel=up] 其他屬性

優(yōu)先級只基與選擇器的形式，特殊的翩迈，一個“[id=p33]“形式的選擇器是按照屬性選擇器來計算的（a=0, b=0, c=1, d=0）持灰，即使用定義中包含ID。

了解了這些 你應(yīng)該不會再對”11個class與一個id”誰的優(yōu)先級高“這類的問題有疑問了吧负饲，因為a,b,c,d只是在各自位置數(shù)字的累加堤魁，而不會越級。

當然權(quán)重最高的是!important返十，會覆蓋以上所有妥泉。行內(nèi)樣式也高不過它。

有一幅生動的圖可以展示這個規(guī)則：

大魚吃小魚

CSS 優(yōu)先級算法如何計算洞坑？

• 優(yōu)先級就近原則盲链，同權(quán)重情況下樣式定義最近者為準
• 載入樣式以最后載入的為準
• 優(yōu)先級為: !important > id > class > tag important 比 內(nèi)聯(lián)優(yōu)先級高

談?wù)劯雍颓宄?/h3>

浮動的框可以向左或向右移動，直到他的外邊緣碰到包含框或另一個浮動框的邊框為止迟杂。由于浮動框不在文檔的普通流中刽沾，所以文檔的普通流的塊框表現(xiàn)得就像浮動框不存在一樣。浮動的塊框會漂浮在文檔普通流的塊框上

解決方法

1. 父級 div 定義偽類：after 和 zoom (推薦使用排拷，建議定義公共類侧漓，以減少 CSS 代碼)

   .clearfloat:after{
       display:block;
       clear:both;
       content:"";
       visibility:hidden;
       height:0}

   .clearfloat{zoom:1}

2. 在結(jié)尾處添加空 div 標簽 clear:both

<div class="parent">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clearfloat"></div>
</div>

<style>
    .left {float:left}
    .clearfloat{clear:both}
</style>

3. 父級 div 定義 height
4. 父級 div 定義 overflow:auto
5. 父級 div 定義 overflow:hidden
6. 父級 div 也一起浮動
7. 父級 div 定義 display:table
8. 結(jié)尾處加 br 標簽 clear:both

參考鏈接幾種常用的清除浮動方法

box-sizing 常用的屬性有哪些？分別有什么作用攻泼？

• box-sizing: content-box; // 默認的標準(W3C)盒模型元素效果
• box-sizing: border-box; // 觸發(fā)怪異(IE)盒模型元素的效果
• box-sizing: inherit; // 繼承父元素 box-sizing 屬性的值

請列舉幾種隱藏元素的方法

• visibility: hidden; 這個屬性只是簡單的隱藏某個元素火架，但是元素占用的空間任然存在
• opacity: 0; CSS3 屬性鉴象，設(shè)置 0 可以使一個元素完全透明
• position: absolute; 設(shè)置一個很大的 left 負值定位忙菠，使元素定位在可見區(qū)域之外
• display: none; 元素會變得不可見何鸡，并且不會再占用文檔的空間。
• transform: scale(0); 將一個元素設(shè)置為縮放無限小牛欢，元素將不可見骡男，元素原來所在的位置將被保留
• <div hidden="hidden"> HTML5 屬性,效果和 display:none;相同，但這個屬性用于記錄一個元素的狀態(tài)
• height: 0; 將元素高度設(shè)為 0 傍睹，并消除邊框
• filter: blur(0); CSS3 屬性隔盛，將一個元素的模糊度設(shè)置為 0，從而使這個

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

• opacity 作用于元素以及元素內(nèi)的所有內(nèi)容（包括文字）的透明度
• rgba() 只作用于元素自身的顏色或其背景色吮炕，子元素不會繼承透明效果

css 屬性 content 有什么作用？

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

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

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

請寫出多種等高布局

• 在列的父元素上使用這個背景圖進行 Y 軸的鋪放，從而實現(xiàn)一種等高列的假像
• 模仿表格布局等高列效果：兼容性不好悍抑，在 ie6-7 無法正常運行
• css3 flexbox 布局： .container{display: flex; align-items: stretch;}

圣杯布局的實現(xiàn)原理鳄炉？

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

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

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

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

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

雙飛翼布局：對圣杯布局（使用相對定位榕订，對以后布局有局限性）的改進，消除相對定位布局

原理：主體元素上設(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;*/
}

在 CSS 樣式中常使用 px两嘴、em 在表現(xiàn)上有什么區(qū)別？

• px 相對于顯示器屏幕分辨率族壳，無法用瀏覽器字體放大功能
• em 值并不是固定的憔辫，會繼承父級的字體大小： em = 像素值 / 父級 font-size

為什么要初始化 CSS 樣式仿荆？

• 不同瀏覽器對有些標簽樣式的默認值解析不同
• 不初始化 CSS 會造成各現(xiàn)瀏覽器之間的頁面顯示差異
• 可以使用 reset.css 或 Normalize.css 做 CSS 初始化

reset.css 和 Normalize.css 理解

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

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

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

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

• 保護有用的瀏覽器默認樣式而不是完全去掉它們
• 一般化的樣式：為大部分 HTML 元素提供
• 修復瀏覽器自身的 bug 并保證各瀏覽器的一致性
• 優(yōu)化 CSS 可用性：用一些小技巧
• 解釋代碼：用注釋和詳細的文檔來

什么是 FOUC(Flash of Unstyled Content)陈醒？ 如何來避免 FOUC？

• 當使用 @import 導入 CSS 時瞧甩，會導致某些頁面在 IE 出現(xiàn)奇怪的現(xiàn)象： 沒有樣式的頁面內(nèi)容顯示瞬間閃爍钉跷，這種現(xiàn)象稱為“文檔樣式短暫失效”，簡稱為 FOUC
• 產(chǎn)生原因：當樣式表晚于結(jié)構(gòu)性 html 加載時肚逸，加載到此樣式表時爷辙，頁面將停止之前的渲染。
• 等待此樣式表被下載和解析后吼虎，再重新渲染頁面犬钢，期間導致短暫的花屏現(xiàn)象。
• 解決方法：使用 link 標簽將樣式表放在文檔 head

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

• CSS 預(yù)處理器基本思想：為 CSS 增加了一些編程的特性（變量玷犹、邏輯判斷、函數(shù)等）
• 開發(fā)者使用這種語言進行進行 Web 頁面樣式設(shè)計洒疚，再編譯成正常的 CSS 文件使用
• 使用 CSS 預(yù)處理器歹颓，可以使 CSS 更加簡潔、適應(yīng)性更強油湖、可讀性更佳巍扛，無需考慮兼容性
• 最常用的 CSS 預(yù)處理器語言包括：Sass（SCSS）和 LESS

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

• 多個 css 合并撤奸，盡量減少 HTTP 請求
• 將 css 文件放在頁面最上面
• 移除空的 css 規(guī)則
• 避免使用 CSS 表達式
• 選擇器優(yōu)化嵌套，盡量避免層級過深
• 充分利用 css 繼承屬性喊括，減少代碼量
• 抽象提取公共樣式胧瓜，減少代碼量
• 屬性值為 0 時，不加單位
• 屬性值為小于 1 的小數(shù)時郑什，省略小數(shù)點前面的 0
• css 雪碧圖

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

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

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

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

• 偶數(shù)字號相對更容易和 web 設(shè)計的其他部分構(gòu)成比例關(guān)系
• 使用奇數(shù)號字體時文本段落無法對齊
• 宋體的中文網(wǎng)頁排布中使用最多的就是 12 和 14

margin 和 padding 分別適合什么場景使用蘑拯？

• 需要在 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è)定是相對于容器的高度嗎？

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

全屏滾動的原理是什么黎休？ 用到了 CSS 的那些屬性？

• 原理類似圖片輪播原理玉凯，超出隱藏部分势腮，滾動時顯示
• 可能用到的 CSS 屬性：overflow:hidden; transform:translate(100%, 100%); display:none;

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

• 響應(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)容層和懸浮層。當滾動鼠標滾輪時阀湿，各圖層以不同速度移動赶熟，形成視差的

實現(xiàn)原理

• 以 “頁面滾動條” 作為 “視差動畫進度條”
• 以 “滾輪刻度” 當作 “動畫幀度” 去播放動畫的
• 監(jiān)聽 mousewheel 事件，事件被觸發(fā)即播放動畫炕倘，實現(xiàn)“翻頁”效果

a 標簽上四個偽類的執(zhí)行順序是怎么樣的钧大？

link > visited > hover > active

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

偽元素:在內(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}

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

• 在 CSS 中偽類一直用 : 表示趣苏，如 :hover, :active 等
• 偽元素在 CSS1 中已存在狡相，當時語法是用 : 表示，如 :before 和 :after
• 后來在 CSS3 中修訂食磕，偽元素用 :: 表示尽棕，如 ::before 和 ::after，以此區(qū)分偽元素和偽類
• 由于低版本 IE 對雙冒號不兼容彬伦，開發(fā)者為了兼容性各瀏覽器滔悉，繼續(xù)使使用 :after 這種老語法表示偽元素
• 綜上所述：::before 是 CSS3 中寫偽元素的新語法； :after 是 CSS1 中存在的单绑、兼容 IE 的老語法

如何修改 Chrome 記住密碼后自動填充表單的黃色背景回官？

• 產(chǎn)生原因：由于 Chrome 默認會給自動填充的 input 表單加上 input:-webkit-autofill 私有屬性造成的
• 解決方案 1：在 form 標簽上直接關(guān)閉了表單的自動填充：autocomplete="off"
• 解決方案 2：input:-webkit-autofill { background-color: transparent; }

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

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)站圖片文件搂橙，如何點擊下載歉提？而非點擊預(yù)覽？

<a href="logo.jpg" download>下載</a> <a href="logo.jpg" download="網(wǎng)站LOGO" >下載</a>

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 屬性恋拷，那么其最終表現(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 不會

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

• 帶單位：px 是固定值，而 em 會參考父元素 font-size 值計算自身的行高
• 純數(shù)字：會把比例傳遞給后代窥妇。例如舷胜，父級行高為 1.5，子元素字體為 18px活翩，則子元素行高為 1.5 * 18 = 27px
• 百分比：將計算后的值傳遞給后代

設(shè)置元素浮動后烹骨，該元素的 display 值會如何變化翻伺？

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

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

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

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

  -webkit-font-smoothing: antialiased;

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

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

如果需要手動寫動畫辣辫，你認為最小時間間隔是多久？

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

overflow: scroll 時不能平滑滾動的問題怎么處理？

監(jiān)聽滾輪事件歪赢，然后滾動到一定距離時用 jquery 的 animate 實現(xiàn)平滑效果化戳。

一個高度自適應(yīng)的 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; }

CSS 中類 class 和 id 的區(qū)別

對于 CSS 而言扫尖，id 和 class 都是選擇器白对，唯一不同的地方在于權(quán)重不同。如果只說 CSS换怖，上面那一句話就講完了甩恼。拓展出來，對于 html 而言沉颂，id 和 class 都是 dom 元素的屬性值条摸。不同的地方在于 id 屬性的值是唯一的，而 class 屬性值可以重復铸屉。id 還一個老特性是錨點功能钉蒲，當瀏覽器地址欄有一個#xxx，頁面會自動滾動到 id=xxx 的元素上面彻坛。

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

如何優(yōu)化網(wǎng)頁的打印樣式

<link rel="stylesheet" type="text/css" media="screen" href="xxx.css" />

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

 <link rel="stylesheet" type="text/css" media="print" href="yyy.css" />

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

• 打印樣式表中最好不要用背景圖片躬厌，因為打印機不能打印 CSS 中的背景。如要顯示圖片竞帽，請使用 html 插入到頁面中扛施。
• 最好不要使用像素作為單位偏陪，因為打印樣式表要打印出來的會是實物，所以建議使用 pt 和 cm煮嫌。
• 隱藏掉不必要的內(nèi)容笛谦。（@print div{display:none;}）
• 打印樣式表中最好少用浮動屬性，因為它們會消失昌阿。

請問為何要使用 transform 而非 absolute positioning饥脑，或反之的理由？為什么懦冰？

• 使用 transform 或 position 實現(xiàn)動畫效果時是有很大差別灶轰。
• 使用 transform 時，可以讓 GPU 參與運算刷钢，動畫的 FPS 更高笋颤。
• 使用 position 時，最小的動畫變化的單位是 1px内地，而使用 transform 參與時，可以做到更汹寤骸（動畫效果更加平滑）
• 功能都一樣非凌。但是 translate 不會引起瀏覽器的重繪和重排，這就相當 nice 了荆针。

反之

• tranform 改變 fixed 子元素的定位對象
• transform 改變元素層疊順序
  transform 的副作用

請解釋 CSS sprites敞嗡，以及你要如何在頁面或網(wǎng)站中實現(xiàn)它

• CSS Sprites 其實就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用 CSS 的“background-image”航背，“background- repeat”喉悴，“background-position”的組合進行背景定位，background-position 可以用數(shù)字能精確的定位出背景圖片的位置玖媚。
• CSS Sprites 為一些大型的網(wǎng)站節(jié)約了帶寬箕肃，讓提高了用戶的加載速度和用戶體驗，不需要加載更多的圖片最盅。

你熟悉 SVG 樣式的書寫嗎突雪？

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

• font-family, font-size, font-style, font-variant 和 font-weight
• width 和 height
• scale, rotate, skew

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

如果設(shè)計中使用了非標準的字體，你該如何去實現(xiàn)？

• 用圖片代替
• web fonts 在線字庫
• @font-face

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