前端面試題2（CSS）

時間 2019-11-08

標籤端面試題 css 欄目 CSS 简体版

原文原文鏈接

前端面試之CSS

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

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

css hack原理及經常使用hackhtml

原理：利用不一樣瀏覽器對CSS的支持和解析結果不同編寫針對特定瀏覽器樣式。
常見的hack有前端
- 屬性hack
- 選擇器hack
- IE條件註釋

link 與 @import 的區別java

link 是HTML方式， @import 是CSS方式
link 最大限度支持並行下載， @import 過多嵌套致使串行下載，出現FOUC
link 能夠經過 rel="alternate stylesheet" 指定候選樣式
瀏覽器對 link 支持早於 @import ，可使用 @import 對老瀏覽器隱藏樣式
@import 必須在樣式規則以前，能夠在css文件中引用其餘文件
整體來講：link優於@import

CSS有哪些繼承屬性jquery

關於文字排版的屬性如：css3
- fontweb
  - word-break
  - letter-spacing
  - text-align
  - text-rendering
  - word-spacing
  - white-space
  - text-indent
  - text-transform
  - text-shadow
- line-height
- color
- visibility
- cursor

外邊距摺疊(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）
陰影和反射（ShadowReflect）
文字特效（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

請寫出多種等高佈局

在列的父元素上使用這個背景圖進行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

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

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。