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

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

區別：

• display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據任何空間；visibility: hidden;不會讓元素從渲染樹消失，渲染師元素繼續占據空間，只是內容不可見
• display: none;是非繼承屬性，子孫節點消失由于元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示；visibility:hidden;是繼承屬性，子孫節點消失由于繼承了 hidden，通過設置 visibility: visible;可以讓子孫節點顯式
• 修改常規流中元素的 display 通常會造成文檔重排。修改 visibility 屬性只會造成本元素的重繪
• 讀屏器不會讀取 display: none;元素內容；會讀取 visibility: hidden 元素內容

css hack 原理及常用 hack

原理：利用不同瀏覽器對 CSS 的支持和解析結果不一樣編寫針對特定瀏覽器樣式。常見的 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 的區別

• link 是 HTML 方式， @import 是 CSS 方式
• link 最大限度支持并行下載，@import 過多嵌套導致串行下載，出現 FOUC
• link 可以通過 rel=“alternate stylesheet” 指定候選樣式
• 瀏覽器對 link 支持早于@import ，可以使用 @import 對老瀏覽器隱藏樣式
• @import 必須在樣式規則之前，可以在 css 文件中引用其他文件
• 總體來說：link 優于@import

CSS 有哪些繼承屬性

• 關于文字排版的屬性如：
  • 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 的關系

• 如果 display 為 none，那么 position 和 float 都不起作用，這種情況下元素不產生框

• 否則，如果 position 值為 absolute 或者 fixed，框就是絕對定位的，float 的計算值為 none，display 根據下面的表格進行調整

• 否則，如果 float 不是 none，框是浮動的，display 根據下表進行調整

• 否則，如果元素是根元素，display 根據下表進行調整

• 其他情況下 display 的值為指定值 總結起來：絕對定位、浮動、根元素都需要調整 display

  [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-6XsDHwww-1653446399654)(…/imgs/display關系.png)]

外邊距折疊(collapsing margins)

外邊距重疊就是 margin-collapse

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

折疊結果遵循下列計算規則：

• 兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值
• 兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值
• 兩個外邊距一正一負時，折疊結果是兩者的相加的和

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

• 有兩種， IE 盒子模型、W3C 盒子模型；
• 盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
• 標準(W3C)盒模型：元素寬度 = width + padding + border + margin
• 怪異(IE)盒模型：元素寬度 = width + margin
• 區 別： IE 的 content 部分把 border 和 padding 計算了進去;
• 標準瀏覽器通過設置 css3 的 box-sizing: border-box 屬性，觸發“怪異模式”解析計算寬高

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:last-of-type 選擇屬于其父元素的最后

  元素的每個

  元素。

• p:only-of-type 選擇屬于其父元素唯一的

  元素的每個

  元素。

• p:only-child 選擇屬于其父元素的唯一子元素的每個

  元素。

• p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個

  元素。

• :after 在元素之前添加內容,也可以用來做清除浮動。

• :before 在元素之后添加內容

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

• :disabled 控制表單控件的禁用狀態。

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

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

如果需要居中的元素為常規流中 inline 元素，為父元素設置 text-align: center;即可實現

如果需要居中的元素為常規流中 block 元素，1）為元素設置寬度，2）設置左右 margin 為 auto。3）IE6 下需在父元素上設置 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）為元素設置寬度，2）position: relative;，3）浮動方向偏移量（left 或者 right）設置為 50%，4）浮動方向上的 margin 設置為元素寬度一半乘以-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）為元素設置寬度，2）偏移量設置為 50%，3）偏移方向外邊距設置為元素寬度一半乘以-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）為元素設置寬度，2）設置左右偏移量都為 0,3）設置左右外邊距都為 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>

如何豎直居中一個元素

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

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

• block 象塊類型元素一樣顯示。
• none 缺省值。象行內元素類型一樣顯示。
• inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。
• list-item 象塊類型元素一樣顯示，并添加樣式列表標記。
• table 此元素會作為塊級表格來顯示
• inherit 規定應該從父元素繼承 display 屬性的值

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

• absolute 生成絕對定位的元素，相對于值不為 static 的第一個父元素進行定位。
• fixed （老 IE 不支持） 生成絕對定位的元素，相對于瀏覽器窗口進行定位。
• relative 生成相對定位的元素，相對于其正常位置進行定位。
• static 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right - z-index 聲明）。
• inherit 規定從父元素繼承 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;
• 轉換
  • 旋轉 transform: rotate(20deg);
  • 傾斜 transform: skew(150deg, -10deg);
  • 位移 transform: translate(20px, 20px);
  • 縮放 transform: scale(.5);

用純 CSS 創建一個三角形的原理是什么？

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

一個滿屏品字布局如何設計?

簡單的方式：

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

經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用 hack 的技巧 ？

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

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

行框的排列會受到中間空白（回車\空格）等的影響，因為空格也屬于字符,這些空白也會被應用樣式，占據空間，所以會有間隔，把字符大小設為 0，就沒有空格了

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

移除空格、使用 margin 負值、使用 font-size:0、letter-spacing、word-spacing

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

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

css 定義的權重

網上有聲稱諸如id權重100，class權重10等計算方法，這是不正確的。
實際上應該如下：

如果一個聲明來自style屬性而不是選擇器，計作1或者a=1（在一個html文檔中，元素“style”的值是樣式表規則，這個規則中沒有選擇器，所以a=1, b=0, c=0, and d=0）

選擇器中id屬性的個數,計作b

選擇器中其他屬性以及偽類的個數，計作c

選擇器中元素及偽元素的個數，計作d

一些例子：

* {} /* a=0 b=0 c=0 d=0 -> 優先級= 0,0,0,0 */ li {} /* a=0 b=0 c=0 d=1 -> 優先級 = 0,0,0,1 */ li:first-line {} /* a=0 b=0 c=0 d=2 -> 優先級 = 0,0,0,2 */ ul li {} /* a=0 b=0 c=0 d=2 -> 優先級 = 0,0,0,2 */ ul ol+li {} /* a=0 b=0 c=0 d=3 -> 優先級 = 0,0,0,3 */ h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> 優先級 = 0,0,1,1 */ ul ol li.red {} /* a=0 b=0 c=1 d=3 -> 優先級 = 0,0,1,3 */ li.red.level {} /* a=0 b=0 c=2 d=1 -> 優先級 = 0,0,2,1 */ #x34y {} /* a=0 b=1 c=0 d=0 -> 優先級 = 0,1,0,0 */ style="" /* a=1 b=0 c=0 d=0 -> 優先級 = 1,0,0,0 */[備注]:first-line 偽元素[rel=up] 其他屬性

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

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

當然權重最高的是!important，會覆蓋以上所有。行內樣式也高不過它。

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

CSS 優先級算法如何計算？

• 優先級就近原則，同權重情況下樣式定義最近者為準
• 載入樣式以最后載入的為準
• 優先級為: !important > id > class > tag important 比 內聯優先級高

談談浮動和清除浮動

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

解決方法

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

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

在結尾處添加空 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>

父級 div 定義 height

父級 div 定義 overflow:auto

父級 div 定義 overflow:hidden

父級 div 也一起浮動

父級 div 定義 display:table

結尾處加 br 標簽 clear:both

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

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

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

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

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

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

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

css 屬性 content 有什么作用？

content 屬性專門應用在 before/after 偽元素上，用于插入額外內容或樣式

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

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

請寫出多種等高布局

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

圣杯布局的實現原理？

要求：三列布局；中間主體內容前置，且寬度自適應；兩邊內容定寬

好處：重要的內容放在文檔流前面可以優先渲染

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

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

什么是雙飛翼布局？實現原理？

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

原理：主體元素上設置左右邊距，預留兩翼位置。左右兩欄使用浮動和負邊距歸位，消除相對定位。

.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 在表現上有什么區別？

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

為什么要初始化 CSS 樣式？

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

reset.css 和 Normalize.css 理解

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

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 元素樣式上提供了跨瀏覽器的高度一致性。相比于傳統的 css reset，Normalize.css 是一種現代的，為 HTML5 準備的優質替代方案。

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

我們創造 normalize.css 有下幾個目的：

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

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

• 當使用 @import 導入 CSS 時，會導致某些頁面在 IE 出現奇怪的現象： 沒有樣式的頁面內容顯示瞬間閃爍，這種現象稱為“文檔樣式短暫失效”，簡稱為 FOUC
• 產生原因：當樣式表晚于結構性 html 加載時，加載到此樣式表時，頁面將停止之前的渲染。
• 等待此樣式表被下載和解析后，再重新渲染頁面，期間導致短暫的花屏現象。
• 解決方法：使用 link 標簽將樣式表放在文檔 head

介紹使用過的 CSS 預處理器？

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

CSS 優化、提高性能的方法有哪些？

• 多個 css 合并，盡量減少 HTTP 請求
• 將 css 文件放在頁面最上面
• 移除空的 css 規則
• 避免使用 CSS 表達式
• 選擇器優化嵌套，盡量避免層級過深
• 充分利用 css 繼承屬性，減少代碼量
• 抽象提取公共樣式，減少代碼量
• 屬性值為 0 時，不加單位（可以減少字節數）
• 屬性值為小于 1 的小數時，省略小數點前面的 0
• css 雪碧圖

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

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

在網頁中的應該使用奇數還是偶數的字體？

在網頁中的應該使用“偶數”字體：

• 偶數字號相對更容易和 web 設計的其他部分構成比例關系
• 使用奇數號字體時文本段落無法對齊
• 宋體的中文網頁排布中使用最多的就是 12 和 14

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

• 需要在 border 外側添加空白，且空白處不需要背景（色）時，使用 margin
• 需要在 border 內測添加空白，且空白處需要背景（色）時，使用 padding

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

CSS 可以拆分成 2 部分：公共 CSS 和 業務 CSS：

• 網站的配色，字體，交互提取出為公共 CSS。這部分 CSS 命名不應涉及具體的業務
• 對于業務 CSS，需要有統一的命名，使用公用的前綴。可以參考面向對象的 CSS

元素豎向的百分比設定是相對于容器的高度嗎？

元素豎向的百分比設定是相對于容器的寬度，而不是高度（這句話說的有問題）
正確說法：如果是height的話，是相對于容器高度，如果是padding-height,margin-height則是相對于容器的寬度。

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

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

什么是響應式設計？響應式設計的基本原理是什么？如何兼容低版本的 IE？

• 響應式設計就是網站能夠兼容多個終端，而不是為每個終端做一個特定的版本
• 基本原理是利用 CSS3 媒體查詢，為不同尺寸的設備適配不同樣式
• 對于低版本的 IE，可采用 JS 獲取屏幕寬度，然后通過 resize 方法來實現兼容：

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

什么是視差滾動效果，如何給每頁做不同的動畫？

• 視差滾動是指多層背景以不同的速度移動，形成立體的運動效果，具有非常出色的視覺體驗
• 一般把網頁解剖為：背景層、內容層和懸浮層。當滾動鼠標滾輪時，各圖層以不同速度移動，形成視差的

實現原理

• 以 “頁面滾動條” 作為 “視差動畫進度條”
• 以 “滾輪刻度” 當作 “動畫幀度” 去播放動畫的
• 監聽 mousewheel 事件，事件被觸發即播放動畫，實現“翻頁”效果

a 標簽上四個偽類的執行順序是怎么樣的？

link > visited > hover > active

偽元素和偽類的區別和作用？

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

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

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

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

::before 和 :after 中雙冒號和單冒號有什么區別？

• 在 CSS 中偽類一直用 : 表示，如 :hover, :active 等
• 偽元素在 CSS1 中已存在，當時語法是用 : 表示，如 :before 和 :after
• 后來在 CSS3 中修訂，偽元素用 :: 表示，如 ::before 和 ::after，以此區分偽元素和偽類
• 由于低版本 IE 對雙冒號不兼容，開發者為了兼容性各瀏覽器，繼續使使用 :after 這種老語法表示偽元素
• 綜上所述：::before 是 CSS3 中寫偽元素的新語法； :after 是 CSS1 中存在的、兼容 IE 的老語法

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

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

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

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

網站圖片文件，如何點擊下載？而非點擊預覽？

<a href="logo.jpg" download>下載</a> <a href="logo.jpg" download="網站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 屬性，那么其最終表現的高度是由 line-height 決定的
• 一個容器沒有設置高度，那么撐開容器高度的是 line-height 而不是容器內的文字內容
• 把 line-height 值設置為 height 一樣大小的值可以實現單行文字的垂直居中
• line-height 和 height 都能撐開一個高度，height 會觸發 haslayout，而 line-height 不會

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

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

設置元素浮動后，該元素的 display 值會如何變化？

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

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

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

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

-webkit-font-smoothing: antialiased;

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

font-style: oblique; 使沒有 italic 屬性的文字實現傾斜

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

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

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

監聽滾輪事件，然后滾動到一定距離時用 jquery 的 animate 實現平滑效果。

一個高度自適應的 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 的區別

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

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

如何優化網頁的打印樣式

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

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

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

但打印樣式表也應有些注意事項：

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

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

• 使用 transform 或 position 實現動畫效果時是有很大差別。
• 使用 transform 時，可以讓 GPU 參與運算，動畫的 FPS 更高。
• 使用 position 時，最小的動畫變化的單位是 1px，而使用 transform 參與時，可以做到更小（動畫效果更加平滑）
• 功能都一樣。但是 translate 不會引起瀏覽器的重繪和重排，這就相當 nice 了。

反之

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

請解釋 CSS sprites，以及你要如何在頁面或網站中實現它

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

你熟悉 SVG 樣式的書寫嗎？

SVG等效的 CSS

fill	background-color 或 color
fill-opacity	background-color 或 color 設置 rgba/hsla
opacity	opacity
stroke	border-color
stroke-width	border-thickness
stroke-opacity	border-color 設置 rgba
rx, ry	border-radius

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

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

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

如果設計中使用了非標準的字體，你該如何去實現？

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

參考鏈接：如果設計中使用了非標準的字體，你該如何去實現？

總結

以上是生活随笔為你收集整理的前端开发工程师css样式进阶指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。