CSS

---

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有

  • 屬性hack

  • 選擇器hack

  • IE條件註釋

link 與 @import 的區別

• link 是HTML

  方式， @import 是CSS方式

• link最大限度支援並行下載，@import 過多巢狀導致序列下載，出現FOUC

• link 可以通過 rel="alternate stylesheet" 指定候選樣式

• 瀏覽器對 link 支援早於@import ，可以使用 @import 對老瀏覽器隱藏樣式

• @import 必須在樣式規則之前，可以在css檔案中引用其他檔案

• 總體來說：link優於@import

CSS有哪些繼承屬性

• 關於文字排版的屬性如：

  • word-break

  • letter-spacing

  • text-align

  • text-rendering

  • word-spacing

  • white-space

  • text-indent

  • text-transform

  • text-shadow

  • font

  • line-height

  • color

  • visibility

  • cursor

display,float,position的關係

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

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

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

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

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

外邊距摺疊(collapsing margins)

• 毗鄰的兩個或多個 margin 會合併成一個margin，叫做外邊距摺疊。規則如下：

  • 兩個或多個毗鄰的普通流中的塊元素垂直方向上的margin會摺疊

  • 浮動元素或inline-block元素或絕對定位元素的margin不會和垂直方向上的其他元素的margin摺疊

  • 建立了塊級格式化上下文的元素，不會和它的子元素髮生margin摺疊

  • 元素自身的margin-bottom和margin-top相鄰時也會折

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

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

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

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

CSS選擇符有哪些？哪些屬性可以繼承？

• id選擇器（ # myid）

• 類選擇器（.myclassname）

• 標籤選擇器（div, h1, p）

• 相鄰選擇器（h1 + p）

• 子選擇器（ul > li）

• 後代選擇器（li a）

• 萬用字元選擇器（ * ）

• 屬性選擇器（a[rel = "external"]）

• 偽類選擇器（a:hover, li:nth-child）

• 可繼承的樣式： font-size font-family color, UL LI DL DD DT

• 不可繼承的樣式：border padding margin width height

CSS優先順序演算法如何計算？

• 優先順序就近原則，同權重情況下樣式定義最近者為準

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

• 優先順序為: !important > id > class > tag important 比 內聯優先順序高

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

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

• 給div設定一個寬度，然後新增margin:0 auto屬性

div{    width:200px;    margin:0 auto; }

• 居中一個浮動元素

//確定容器的寬高 寬500 高 300 的層 //設定層的外邊距 .div {      width:500px ; height:300px;//高度可以不設      margin: -150px 0 0 -250px;      position:relative;         //相對定位      background-color:pink;     //方便看效果      left:50%;      top:50%; }

• 讓絕對定位的div居中

position: absolute;  width: 1200px;  background: none;  margin: 0 auto;  top: 0;  left: 0;  bottom: 0;  right: 0;

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有哪些新特性？

• 新增各種CSS選擇器 （: not(.input)：所有 class 不是“input”的節點）

• 圓角 （border-radius:8px）

• 多列布局 （multi-column layout）

• 陰影和反射 （Shadow\Reflect）

• 文字特效 （text-shadow、）

• 文字渲染 （Text-decoration）

• 線性漸變 （gradient）

• 旋轉 （transform）

• 增加了旋轉,縮放,定位,傾斜,動畫，多背景

• transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

用純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，就沒有空格了

為什麼要初始化CSS樣式

• 因為瀏覽器的相容問題，不同瀏覽器對有些標籤的預設值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異

對BFC規範(塊級格式化上下文：block formatting context)的理解？

• 一個頁面是由很多個 Box 組成的,元素的型別和 display 屬性,決定了這個 Box 的型別

• 不同型別的 Box,會參與不同的 Formatting Context（決定如何渲染文件的容器）,因此Box內的元素會以不同的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響

css定義的權重

// 以下是權重的規則：標籤的權重為1，class的權重為10，id的權重為100，以下/// 例子是演示各種定義的權重值： /*權重為1*/ div{ } /*權重為10*/ .class1{ } /*權重為100*/ #id1{ } /*權重為100+1=101*/ #id1 div{ } /*權重為10+1=11*/ .class1 div{ } /*權重為10+10+1=21*/ .class1 .class2 div{ } // 如果權重相同，則最後定義的樣式會起作用，但是應該避免這種情況出現

display:inline-block 什麼時候會顯示間隙？(攜程)

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

談談浮動和清除浮動

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

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

• 盒子模型構成：內容(content)、內填充(padding)、 邊框(border)、外邊距(margin)

• IE8及其以下版本瀏覽器，未宣告 DOCTYPE，內容寬高會包含內填充和邊框，稱為怪異盒模型(IE盒模型)

• 標準(W3C)盒模型：元素寬度 = width + padding + border + margin

• 怪異(IE)盒模型：元素寬度 = width + margin

• 標準瀏覽器通過設定 css3 的 box-sizing: border-box 屬性，觸發“怪異模式”解析計算寬高

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

• box-sizing: content-box; // 預設的標準(W3C)盒模型元素效果

• box-sizing: border-box; // 觸發怪異(IE)盒模型元素的效果

• box-sizing: inherit; // 繼承父元素 box-sizing 屬性的值

CSS選擇器有哪些？

• id選擇器 #id

• 類選擇器 .class

• 標籤選擇器 div, h1, p

• 相鄰選擇器 h1 + p

• 子選擇器 ul > li

• 後代選擇器 li a

• 萬用字元選擇器 *

• 屬性選擇器 a[rel='external']

• 偽類選擇器 a:hover, li:nth-child

CSS哪些屬性可以繼承？哪些屬性不可以繼承？

• 可以繼承的樣式：font-size、font-family、color、list-style、cursor

• 不可繼承的樣式：width、height、border、padding、margin、background

CSS如何計算選擇器優先？

• 相同權重，定義最近者為準：行內樣式 > 內部樣式 > 外部樣式

• 含外部載入樣式時，後載入樣式覆蓋其前面的載入的樣式和內部樣式

• 選擇器優先順序: 行內樣式[1000] > id[100] > class[10] > Tag[1]

• 在同一組屬性設定中，!important 優先順序最高，高於行內樣式

CSS3新增偽類有哪些？

• :root 選擇文件的根元素，等同於 html 元素

• :empty 選擇沒有子元素的元素

• :target 選取當前活動的目標元素

• :not(selector) 選擇除 selector 元素意外的元素

• :enabled 選擇可用的表單元素

• :disabled 選擇禁用的表單元素

• :checked 選擇被選中的表單元素

• :after 在元素內部最前新增內容

• :before 在元素內部最後新增內容

• :nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n

• :nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，從後向前數

• :nth-child(odd)

• :nth-child(even)

• :nth-child(3n+1)

• :first-child

• :last-child

• :only-child

• :nth-of-type(n) 匹配父元素下指定子元素，在同類子元素中排序第n

• :nth-last-of-type(n) 匹配父元素下指定子元素，在同類子元素中排序第n，從後向前數

• :nth-of-type(odd)

• :nth-of-type(even)

• :nth-of-type(3n+1)

• :first-of-type

• :last-of-type

• :only-of-type

• ::selection 選擇被使用者選取的元素部分

• :first-line 選擇元素中的第一行

• :first-letter 選擇元素中的第一個字元

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

• 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有哪些新特性？

• 新增選擇器 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;

• 轉換

  • 旋轉 transform: rotate(20deg);

  • 傾斜 transform: skew(150deg, -10deg);

  • 位移 transform: translate(20px, 20px);

  • 縮放 transform: scale(.5);

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

• 動畫 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

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

• Flexbox 用於不同尺寸螢幕中建立可自動擴充套件和收縮佈局

經常遇到的瀏覽器的JS相容性有哪些？解決方法是什麼？

• 當前樣式：getComputedStyle(el, null) VS el.currentStyle

• 事件物件：e VS window.event

• 滑鼠座標：e.pageX, e.pageY VS window.event.x, window.event.y

• 按鍵碼：e.which VS event.keyCode

• 文字節點：el.textContent VS el.innerText

li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？

• li排列受到中間空白(回車/空格)等的影響，因為空白也屬於字元，會被應用樣式佔據空間，產生間隔

• 解決辦法：在ul設定設定font-size=0,在li上設定需要的文字大小

什麼是外邊距重疊？ 重疊的結果是什麼？

• 外邊距重疊就是 margin-collapse

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

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

  • 兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值

  • 兩個相鄰的外邊距都是負數時，摺疊結果是兩者絕對值的較大值

  • 兩個外邊距一正一負時，摺疊結果是兩者的相加的和

請寫出多種等高佈局

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

• 模仿表格佈局等高列效果：相容性不好，在ie6-7無法正常執行

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

css垂直居中的方法有哪些？

• 如果是單行文字, line-height 設定成和 height 值

.vertical {      height: 100px;      line-height: 100px;    }

• 已知高度的塊級子元素，採用絕對定位和負邊距

.container {  position: relative; } .vertical {  height: 300px;  /*子元素高度*/  position: absolute;  top:50%;  /*父元素高度50%*/  margin-top: -150px; /*自身高度一半*/ }

• 未知高度的塊級父子元素居中，模擬表格佈局

• 缺點：IE67不相容，父級 overflow：hidden 失效

.container {      display: table;    }    .content {      display: table-cell;      vertical-align: middle;    }

• 新增 inline-block 兄弟元素，設定 vertical-align

  • 缺點：需要增加額外標籤，IE67不相容

.container {  height: 100%;/*定義父級高度，作為參考*/ } .extra .vertical{  display: inline-block;  /*行內塊顯示*/  vertical-align: middle; /*垂直居中*/ } .extra {  height: 100%; /*設定新增元素高度為100%*/ }

• 絕對定位配合 CSS3 位移

.vertical {  position: absolute;  top:50%;  /*父元素高度50%*/  transform:translateY(-50%, -50%); }

• CSS3彈性盒模型

.container {  display:flex;  justify-content: center; /*子元素水平居中*/  align-items: center; /*子元素垂直居中*/ }

聖盃佈局的實現原理？

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

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

  • 原理：利用相對定位、浮動、負邊距佈局，而不新增額外標籤

.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 初始化

解釋下什麼是浮動和它的工作原理？

• 非IE瀏覽器下，容器不設高度且子元素浮動時，容器高度不能被內容撐開。 此時，內容會溢位到容器外面而影響佈局。這種現象被稱為浮動（溢位）。

• 工作原理：

  • 浮動元素脫離文件流，不佔據空間（引起“高度塌陷”現象）

  • 浮動元素碰到包含它的邊框或者其他浮動元素的邊框停留

浮動元素引起的問題？

• 父元素的高度無法被撐開，影響與父元素同級的元素

• 與浮動元素同級的非浮動元素會跟隨其後

列舉幾種清除浮動的方式？

• 新增額外標籤，例如 <div style="clear:both"></div>

• 使用 br 標籤和其自身的 clear 屬性，例如 <br clear="all" />

• 父元素設定 overflow：hidden; 在IE6中還需要觸發 hasLayout，例如zoom：1;

• 父元素也設定浮動

• 使用 :after 偽元素。由於IE6-7不支援 :after，使用 zoom:1 觸發 hasLayout

清除浮動最佳實踐（after偽元素閉合浮動）：

.clearfix:after{    content: "\200B";    display: table;    height: 0;    clear: both;  }  .clearfix{    *zoom: 1;  }

什麼是 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

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

• 元素豎向的百分比設定是相對於容器的寬度，而不是高度

全屏滾動的原理是什麼？ 用到了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

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

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

• 偽元素 -- 在內容元素的前後插入額外的元素或樣式，但是這些元素實際上並不在文件中生成。

• 它們只在外部顯示可見，但不會在文件的原始碼中找到它們，因此，稱為“偽”元素。例如：

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

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

• 相鄰的 inline-block 元素之間有換行或空格分隔的情況下會產生間距

• 非 inline-block 水平元素設定為 inline-block 也會有水平間距

• 可以藉助 vertical-align:top; 消除垂直間隙

• 可以在父級加 font-size：0; 在子元素裡設定需要的字型大小，消除垂直間隙

• 把 li 標籤寫到同一行可以消除垂直間隙，但程式碼可讀性差

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