57道CSS常問面試題及答案匯總
1、介紹一下標準的css的盒子模型？與低版本IE的盒子模型有什么不同的？
2、box-sizing屬性？
3、CSS選擇器有哪些？哪些屬性可以繼承？
4、CSS優(yōu)先級算法如何計算？
class選擇符：10
id選擇符：100
元素標簽：1000
同一級別：后寫的會覆蓋先寫的
5、CSS3新增偽類有那些?
6、display有哪些值？說明他們的作用?
7、position的值？
8、什么是z-index？
number——設(shè)置元素的堆疊順序。
inherit——規(guī)定應(yīng)該從父元素繼承 z-index 屬性的值。
9、CSS3有哪些新特性？
10、請解釋一下CSS3的flexbox（彈性盒布局模型）,以及適用場景？
11、用純CSS創(chuàng)建一個三角形的原理是什么？
.square{width:0;height:0;margin:0 auto;border:6px solid transparent;border-top: 6px solid red;}
12、為什么要初始化CSS樣式
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現(xiàn)瀏覽器之間的頁面顯示差異。
13、display:none與visibility：hidden的區(qū)別？
display：none 不顯示對應(yīng)的元素，在文檔布局中不再分配空間（回流+重繪）
visibility：hidden 隱藏對應(yīng)元素，在文檔布局中仍保留原來的空間（重繪）
14、position跟display、overflow、float這些特性相互疊加后會怎么樣？
display屬性規(guī)定元素應(yīng)該生成的框的類型；position屬性規(guī)定元素的定位類型；float屬性是一種布局方式，定義元素在哪個方向浮動。
類似于優(yōu)先級機制：position：absolute/fixed優(yōu)先級最高，有他們在時，float不起作用，display值需要調(diào)整。float 或者absolute定位的元素，只能是塊元素或表格。
15、對BFC規(guī)范(塊級格式化上下文：block formatting context)的理解？
BFC規(guī)定了內(nèi)部的Block Box如何布局。
定位方案：
內(nèi)部的Box會在垂直方向上一個接一個放置。
Box垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊。
每個元素的margin box 的左邊，與包含塊border box的左邊相接觸。
BFC的區(qū)域不會與float box重疊。
BFC是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。
計算BFC的高度時，浮動元素也會參與計算。
滿足下列條件之一就可觸發(fā)BFC
根元素，即html
float的值不為none（默認）
overflow的值不為visible（默認）
display的值為inline-block、table-cell、table-caption
position的值為absolute或fixed
16、為什么會出現(xiàn)浮動和什么時候需要清除浮動？清除浮動的方式？
浮動元素碰到包含它的邊框或者浮動元素的邊框停留。由于浮動元素不在文檔流中，所以文檔流的塊框表現(xiàn)得就像浮動框不存在一樣。浮動元素會漂浮在文檔流的塊框上。
浮動帶來的問題：
父元素的高度無法被撐開，影響與父元素同級的元素
與浮動元素同級的非浮動元素（內(nèi)聯(lián)元素）會跟隨其后
若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結(jié)構(gòu)。
清除浮動的方式：
父級div定義height
最后一個浮動元素后加空div標簽 并添加樣式clear:both。
包含浮動元素的父標簽添加樣式overflow為hidden或auto。
父級div定義zoom
17、設(shè)置元素浮動后，該元素的display值是多少？
自動變成display:block
18、使用 CSS 預(yù)處理器嗎？
CSS預(yù)處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為CSS增加了一些編程的特性，將CSS作為目標生成文件，然后開發(fā)者就只要使用這種語言進行編碼工作。
可以讓你的CSS更加簡潔、適應(yīng)性更強、可讀性更佳，更易于代碼的維護等諸多好處。
比如說：Sass（ 基于Ruby寫的 ）、LESS（基于Node寫的）、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。
預(yù)處理器能力
1.嵌套 反映層級和約束
2.變量和計算 減少重復(fù)代碼
3.Extend和Mixin 代碼片段復(fù)用
4.循環(huán) 適用于復(fù)雜有規(guī)律的樣式
5.import CSS文件模塊化
19、CSS優(yōu)化、提高性能的方法有哪些？
避免過度約束
避免后代選擇符
避免鏈式選擇符
使用緊湊的語法
避免不必要的命名空間
避免不必要的重復(fù)
最好使用表示語義的名字。一個好的類名應(yīng)該是描述他是什么而不是像什么
避免！important，可以選擇其他選擇器
盡可能的精簡規(guī)則，你可以合并不同類里的重復(fù)規(guī)則
20、瀏覽器是怎樣解析CSS選擇器的？
CSS選擇器的解析是從右向左解析的。若從左向右的匹配，發(fā)現(xiàn)不符合規(guī)則，需要進行回溯，會損失很多性能。
若從右向左匹配，先找到所有的最右節(jié)點，對于每一個節(jié)點，向上尋找其父節(jié)點直到找到根元素或滿足條件的匹配規(guī)則，則結(jié)束這個分支的遍歷。
兩種匹配規(guī)則的性能差別很大，是因為從右向左的匹配在第一步就篩選掉了大量的不符合條件的最右節(jié)點（葉子節(jié)點），而從左向右的匹配規(guī)則的性能都浪費在了失敗的查找上面。
而在 CSS 解析完畢后，需要將解析的結(jié)果與 DOM Tree 的內(nèi)容一起進行分析建立一棵 Render Tree，最終用來進行繪圖。
在建立 Render Tree 時（WebKit 中的「Attachment」過程），瀏覽器就要為每個 DOM Tree 中的元素根據(jù) CSS 的解析結(jié)果（Style Rules）來確定生成怎樣的 Render Tree。
21、在網(wǎng)頁中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢？
使用偶數(shù)字體。偶數(shù)字號相對更容易和 web 設(shè)計的其他部分構(gòu)成比例關(guān)系。Windows 自帶的點陣宋體（中易宋體）從 Vista 開始只提供 12、14、16 px 這三個大小的點陣，而 13、15、17 px時用的是小一號的點。（即每個字占的空間大了 1 px，但點陣沒變），于是略顯稀疏。
22、margin和padding分別適合什么場景使用？
何時使用margin：
需要在border外側(cè)添加空白
空白處不需要背景色
上下相連的兩個盒子之間的空白，需要相互抵消時。
何時使用padding：
需要在border內(nèi)側(cè)添加空白
空白處需要背景顏色
上下相連的兩個盒子的空白，希望為兩者之和。
兼容性的問題：在IE5 IE6中，為float的盒子指定margin時，左側(cè)的margin可能會變成兩倍的寬度。通過改變padding或者指定盒子的display：inline解決。
23、元素豎向的百分比設(shè)定是相對于容器的高度嗎？
當按百分比設(shè)定一個元素的寬度時，它是相對于父容器的寬度計算的，但是，對于一些表示豎向距離的屬性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，當按百分比設(shè)定它們時，依據(jù)的也是父容器的寬度，而不是高度。
24、全屏滾動的原理是什么？用到了CSS的哪些屬性？
原理：有點類似于輪播，整體的元素一直排列下去，假設(shè)有5個需要展示的全屏頁面，那么高度是500%，只是展示100%，剩下的可以通過transform進行y軸定位，也可以通過margin-top實現(xiàn)
overflow：hidden；transition：all 1000ms ease；
25、什么是響應(yīng)式設(shè)計？響應(yīng)式設(shè)計的基本原理是什么？
響應(yīng)式網(wǎng)站設(shè)計(Responsive Web design)是一個網(wǎng)站能夠兼容多個終端，而不是為每一個終端做一個特定的版本。
基本原理是通過媒體查詢檢測不同的設(shè)備屏幕尺寸做處理。
頁面頭部必須有meta聲明的viewport。
26、 ::before 和 :after中雙冒號和單冒號有什么區(qū)別？解釋一下這2個偽元素的作用
單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素。
::before就是以一個子元素的存在，定義在元素主體內(nèi)容之前的一個偽元素。并不存在于dom之中，只存在在頁面之中。
:before 和 :after 這兩個偽元素，是在CSS2.1里新出現(xiàn)的。起初，偽元素的前綴使用的是單冒號語法，但隨著Web的進化，在CSS3的規(guī)范里，偽元素的語法被修改成使用雙冒號，成為::before ::after。
27、你對line-height是如何理解的？
行高是指一行文字的高度，具體說是兩行文字間基線的距離。CSS中起高度作用的是height和line-height，沒有定義height屬性，最終其表現(xiàn)作用一定是line-height。
單行文本垂直居中：把line-height值設(shè)置為height一樣大小的值可以實現(xiàn)單行文字的垂直居中，其實也可以把height刪除。
多行文本垂直居中：需要設(shè)置display屬性為inline-block。
28、怎么讓Chrome支持小于12px 的文字？
這個我們在做移動端的時候，設(shè)計師圖片上的文字假如是10px，我們實現(xiàn)在網(wǎng)頁上之后。往往設(shè)計師回來找我們，這個字體能小一些嗎？我設(shè)計的是10px？
為啥是12px?其實我們都知道，谷歌Chrome最小字體是12px，不管你設(shè)置成8px還是10px，在瀏覽器中只會顯示12px，那么如何解決這個坑爹的問題呢？
針對谷歌瀏覽器內(nèi)核，加webkit前綴，用transform:scale()這個屬性進行縮放！
<style>p span{font-size:10px;-webkit-transform:scale(0.8);display:block;}</style>
29、讓頁面里的字體變清晰，變細用CSS怎么做？
-webkit-font-smoothing在window系統(tǒng)下沒有起作用，但是在IOS設(shè)備上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。
30、如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？
多數(shù)顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms。
31、li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？
行框的排列會受到中間空白（回車空格）等的影響，因為空格也屬于字符,這些空白也會被應(yīng)用樣式，占據(jù)空間，所以會有間隔，把字符大小設(shè)為0，就沒有空格了。
解決方法：
可以將<li>代碼全部寫在一排
浮動li中float：left
在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px
32、display:inline-block 什么時候會顯示間隙？
元素被當成行內(nèi)元素排版的時候，原來html代碼中的回車換行被轉(zhuǎn)成一個空白符，在字體不為0的情況下，空白符占據(jù)一定寬度，所以inline-block的元素之間就出現(xiàn)了空隙。這些元素之間的間距會隨著字體的大小而變化，當行內(nèi)元素font-size:16px時，間距為8px。
解決：
1、font-size
2、改變書寫方式
3、使用margin負值
4、使用word-spacing或letter-spacing
33、有一個高度自適應(yīng)的div，里面有兩個div，一個高度100px，希望另一個填滿剩下的高度
外層div使用position：relative；高度要求自適應(yīng)的div使用position: absolute; top: 100px; bottom: 0; left: 0
34、png、jpg、gif 這些圖片格式解釋一下，分別什么時候用。有沒有了解過webp？
png是便攜式網(wǎng)絡(luò)圖片（Portable Network Graphics）是一種無損數(shù)據(jù)壓縮位圖文件格式.優(yōu)點是：壓縮比高，色彩好。大多數(shù)地方都可以用。
jpg是一種針對相片使用的一種失真壓縮方法，是一種破壞性的壓縮，在色調(diào)及顏色平滑變化做的不錯。在www上，被用來儲存和傳輸照片的格式。
gif是一種位圖文件格式，以8位色重現(xiàn)真色彩的圖像?？梢詫崿F(xiàn)動畫效果.
webp格式是谷歌在2010年推出的圖片格式，壓縮率只有jpg的2/3，大小比png小了45%。缺點是壓縮的時間更久了，兼容性不好，目前谷歌和opera支持。
35、style標簽寫在body后與body前有什么區(qū)別？
頁面加載自上而下 當然是先加載樣式。
寫在body標簽后由于瀏覽器以逐行方式對HTML文檔進行解析，當解析到寫在尾部的樣式表（外聯(lián)或?qū)懺趕tyle標簽）會導(dǎo)致瀏覽器停止之前的渲染，等待加載且解析樣式表完成之后重新渲染，在windows的IE下可能會出現(xiàn)FOUC現(xiàn)象（即樣式失效導(dǎo)致的頁面閃爍問題）。
36、CSS屬性overflow屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會如何處理?
參數(shù)是scroll時候，必會出現(xiàn)滾動條。
參數(shù)是auto時候，子元素內(nèi)容大于父元素時出現(xiàn)滾動條。
參數(shù)是visible時候，溢出的內(nèi)容出現(xiàn)在父元素之外。
參數(shù)是hidden時候，溢出隱藏。
37、闡述一下CSS Sprites
將一個頁面涉及到的所有圖片都包含到一張大圖中去，然后利用CSS的 background-image，background- repeat，background-position 的組合進行背景定位。利用CSS Sprites能很好地減少網(wǎng)頁的http請求，從而大大的提高頁面的性能；CSS Sprites能減少圖片的字節(jié)。
38、css可繼承屬性不可繼承屬性
可 font-size, font-family, color
不可 border, padding, margin, width, height
39、flex布局
先給父元素添加上display:flex形成一個flex容器
flex-direction:控制主軸的方向
row 水平從左到右（默認）
row-reverse 水平從右到左
column垂直從上到下
column-reverse垂直從下到上
justify-content:控制子元素在子元素在主軸的對齊方式
flex-start 從主軸起點到主軸終點
flex-end 從主軸終點到起點
center 居中
space-between 兩端分布
space-around 環(huán)繞分布
space-evenly 均衡分布
align-items 控制子元素在側(cè)軸的對齊方式
flex-start 從側(cè)軸起點到終點
flex-end 從側(cè)軸終點到起點
center 居中
stretch 拉伸對齊，想要拉伸效果得子元素設(shè)置高度
flex-wrap 控制子元素是否換行
nowrap 默認，不換行
wrap 換行
align-content 控制子元素在側(cè)軸的對齊方式（多行）
flex-start 從主軸起點到主軸終點
flex-end: 從主軸的終點到起點
center: 居中對齊
space-between 兩端分布
space-around 環(huán)繞分布
space-evenly 均衡分布
stretch: 拉伸分布 要拉伸效果 子元素不要設(shè)置高度
40、移動端的布局用過媒體查詢嗎？
<head>
<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">
CSS :
@media only screen and (max-device-width:480px) {/css樣式/}
41、文字溢出時顯示點點點
單行
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
多行
display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; //這里是在第二行有省略號overflow: hidden;
42、CSS有哪些布局
float布局的兼容性比較好。解決辦法：給橙色塊添加overflow: hidden（生成了一個BFC）。浮動元素父元素還存在高度塌陷問題，解決方法：父元素生成一個BFC。
absolute布局的有點是簡單直接，兼容性好。缺點，脫離了文檔流。
flex布局的優(yōu)點，布局簡單、靈活，移動端友好；缺點是ie8以下不兼容。
table布局的優(yōu)點是兼容性好，有時候布局相對簡單。缺點是它是對TABLE標簽的不正規(guī)使用，一直以來被大家所詬病。當需要內(nèi)容高度不一致時并不適應(yīng)。
grid布局優(yōu)點，是第一個基于二維方向的布局模塊。它是第一個基于網(wǎng)格的原生布局系統(tǒng)。缺點是對低版本瀏覽器兼容性不好。
43、CSS3文本屬性
text-shadow:2px 2px 8px #000;參數(shù)1為向右的偏移量，參數(shù)2為向左的偏移量，參數(shù)3為漸變的像素，參數(shù)4為漸變的顏色
text-overflow:規(guī)定當文本溢出包含元素時發(fā)生的事情 text-overflow:ellipsis(省略)
text-wrap:規(guī)定文本換行的規(guī)則
word-break 規(guī)定非中日韓文本的換行規(guī)則
word-wrap 對長的不可分割的單詞進行分割并換行到下一行
white-space: 規(guī)定如何處理元素中的空白 white-space:nowrap 規(guī)定段落中的文本不進行換行
44、CSS3漸變
CSS3 定義了兩種類型的漸變（gradients）：
線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
徑向漸變（Radial Gradients）- 由它們的中心定義
線性漸變
background-image: linear-gradient(direction || angle, color-stop1, color-stop2, ...);
第一個參數(shù)：漸變方向（可選，默認從上到下），取值：（to bottom、to top、to right、to left、to bottom right等等）
徑向漸變
background-image: radial-gradient(position, shape size, start-color, stop-color);
position：定義圓心位置；
shape size：由2個參數(shù)組成，前者shape定義圓形或橢圓形，后者size定義大??；
shape它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。默認值是 ellipse。
size 參數(shù)定義了漸變的大小。它可以是以下四個值：closest-side、farthest-side、closest-corner、farthest-corner
start-color：設(shè)置開始的顏色；
stop-color：設(shè)置結(jié)束的顏色；
position、shape size可選可不選，如果沒有進行設(shè)置，表示該參數(shù)采用默認值。
start-color和stop-color為必須設(shè)置的參數(shù)，并且徑向漸變同線性漸變一樣可以設(shè)置多種顏色。
45、CSS3中box-shadow
box-shadow 向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關(guān)鍵詞來規(guī)定。省略長度的值是 0。
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平陰影的位置。允許負值。 |
| v-shadow | 必需。垂直陰影的位置。允許負值。 |
| blur | 可選。模糊距離。 |
| spread | 可選。陰影的尺寸。 |
| color | 可選。陰影的顏色。請參閱 CSS 顏色值。 |
| inset | 可選。將外部陰影 (outset) 改為內(nèi)部陰影。 |
div{box-shadow: 10px 10px 5px #888888;}
46、CSS3 過渡
CSS3的transition允許CSS的屬性值在一定的時間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標單擊，獲得焦點，被點擊或?qū)υ厝魏胃淖冎杏|發(fā)，并平滑地以動畫效果改變CSS的屬性值。
transition:[<transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>]
transition-property：指定過渡的CSS屬性。
none：沒有指定任何樣式。
all：默認值，表示指定元素所有支持transition-property屬性的樣式。
<single-transition-property>：指定一個或多個樣式。并不是所有樣式都能應(yīng)用transition-property進行過渡，只有具有一個中點值的樣式才能具備過渡效果，如顏色，長度，漸變等。
transition-duration：指定完成過渡所需的時間。
<time>為數(shù)值，單位為s(秒)或ms(毫秒)，默認值是0。當有多個過渡屬性時，可以設(shè)置多個過渡時間分別應(yīng)用過渡屬性，也可以設(shè)置一個過渡時間應(yīng)用所有過渡屬性。
transition-timing-function：指定過渡調(diào)速函數(shù)。
ease：默認值，元素樣式從初始狀態(tài)過渡到終止狀態(tài)時速度由快到慢，逐漸變慢。
linear：元素樣式從初始狀態(tài)過渡到終止狀態(tài)速度是恒速。
ease-in：元素樣式從初始狀態(tài)過渡到終止狀態(tài)時，速度越來越快，呈一種加速狀態(tài)。這種效果稱為漸顯效果。
ease-out：元素樣式從初始狀態(tài)過渡到終止狀態(tài)時，速度越來越慢，呈一種減速狀態(tài)。這種效果稱為漸隱效果。
ease-in-out：元素樣式從初始狀態(tài)到終止狀態(tài)時，先加速再減速。這種效果稱為漸顯漸隱效果。
transition-delay：指定過渡開始出現(xiàn)的延遲時間。
用來指定一個動畫開始執(zhí)行的時間，也就是說當改變元素屬性值后多長時間開始執(zhí)行過渡效果，它可以是正整數(shù)，負整數(shù)和0，非零的時候必須將單位設(shè)置為s(秒)或ms(毫秒)。
47、css3中的變形（transform）
Transform字面上就是變形，改變的意思。在CSS3中transform主要包括以下幾種：旋轉(zhuǎn)rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。
transform: rotate | scale | skew | translate |matrix;
一、旋轉(zhuǎn)rotate
rotate() ：通過指定的角度參數(shù)對原元素指定一個2D rotation（2D 旋轉(zhuǎn)），需先有transform-origin屬性的定義。
transform-origin定義的是旋轉(zhuǎn)的基點，其中angle是指旋轉(zhuǎn)角度，如果設(shè)置的值為正數(shù)表示順時針旋轉(zhuǎn)，如果設(shè)置的值為負數(shù)，則表示逆時針旋轉(zhuǎn)。如：transform:rotate(30deg):
二、移動translate
移動translate我們分為三種情況：translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）；translateX(x)僅水平方向移動（X軸移動）；translateY(Y)僅垂直方向移動（Y軸移動）。
具體使用方法如下：
1、translate([, ]) ：通過矢量[tx, ty]指定一個2D translation，tx 是第一個過渡值參數(shù)，ty 是第二個過渡值參數(shù)選項。如果未被提供，則ty以 0 作為其值。也就是translate(x,y),它表示對象進行平移，按照設(shè)定的x,y參數(shù)值,當值為負數(shù)時，反方向移動物體，其基點默認為元素 中心點，也可以根據(jù)transform-origin進行改變基點。如transform:translate(100px,20px):
2、translateX() ：通過給定一個X方向上的數(shù)目指定一個translation。只向x軸進行移動元素，同樣其基點是元素中心點，也可以根據(jù)transform-origin改變基點位置。如：transform:translateX(100px):
3、translateY() ：通過給定Y方向的數(shù)目指定一個translation。只向Y軸進行移動，基點在元素心點，可以通過transform-origin改變基點位置。如：transform:translateY(20px):
三、縮放scale
縮放scale和移動translate是極其相似，他也具有三種情況：scale(x,y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）；scaleX(x)元素僅水平方向縮放（X軸縮放）；scaleY(y)元素僅垂直方向縮放（Y軸縮放），但它們具有相同的縮放中心點和基數(shù)，其中心點就是元素的中心位置，縮放基數(shù)為1，如果其值大于1元素就放大，反之其值小于1，元素縮小。
下面我們具體來看看這三種情況具體使用方法：
1、scale([, ])：提供執(zhí)行[sx,sy]縮放矢量的兩個參數(shù)指定一個2D scale（2D縮放）。
如果第二個參數(shù)未提供，則取與第一個參數(shù)一樣的值。scale(X,Y)是用于對元素進行縮放，可以通過transform-origin對元素的基點進行設(shè)置，同樣基點在元素中心位置；基中X表示水平方向縮放的倍數(shù)，Y表示垂直方向的縮放倍數(shù)，而Y是一個可選參數(shù)，如果沒有設(shè)置Y值，則表示X，Y兩個方向的縮放倍數(shù)是一樣的。并以X為準。如：transform:scale(2,1.5):
2、scaleX() ：使用 [sx,1] 縮放矢量執(zhí)行縮放操作，sx為所需參數(shù)。scaleX表示元素只在X軸(水平方向)縮放元素，他的默認值是(1,1)，其基點一樣是在元素的中心位置，我們同樣是通過transform-origin來改變元素的基點。如：transform:scaleX(2):
3、scaleY() ：使用 [1,sy] 縮放矢量執(zhí)行縮放操作，sy為所需參數(shù)。scaleY表示元素只在Y軸（垂直方向）縮放元素，其基點同樣是在元素中心位置，可以通過transform-origin來改變元素的基點。如transform:scaleY(2):
四、扭曲skew
扭曲skew和translate、scale一樣同樣具有三種情況：skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）；skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）。
具體使用如下：
1、skew( [, ]) ：X軸Y軸上的skew transformation（斜切變換）。第一個參數(shù)對應(yīng)X軸，第二個參數(shù)對應(yīng)Y軸。如果第二個參數(shù)未提供，則值為0，也就是Y軸方向上無斜切。
skew是用來對元素進行扭曲變行，第一個參數(shù)是水平方向扭曲角度，第二個參數(shù)是垂直方向扭曲角度。
其中第二個參數(shù)是可選參數(shù)，如果沒有設(shè)置第二個參數(shù)，那么Y軸為0deg。同樣是以元素中心為基點，我們也可以通過transform-origin來改變元素的基點位置。如：transform:skew(30deg,10deg):
2、skewX() ：按給定的角度沿X軸指定一個skew transformation（斜切變換）。skewX是使元素以其中心為基點，并在水平方向（X軸）進行扭曲變行，同樣可以通過transform-origin來改變元素的基點。如：transform:skewX(30deg)
3、skewY() ：按給定的角度沿Y軸指定一個skew transformation（斜切變換）。skewY是用來設(shè)置元素以其中心為基點并按給定的角度在垂直方向（Y軸）扭曲變形。同樣我們可以通過transform-origin來改變元素的基點。如：transform:skewY（10deg）
五、矩陣matrix
matrix(, , , , , ) ：以一個含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個2D變換，相當于直接應(yīng)用一個[a b c d e f]變換矩陣。就是基于水平方向（X軸）和垂直方向（Y軸）重新定位元素,此屬性值使用涉及到數(shù)學中的矩陣。
48、css3 動畫(animation)
CSS3 時代，動畫不再必須依賴 js，變得更加簡單、高效。語法：
animation: name duration timing-function delay iteration-count direction;
animation 屬性是一個簡寫屬性，用于設(shè)置六個動畫屬性：animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction。
注釋：請始終規(guī)定 animation-duration 屬性，否則時長為 0，就不會播放動畫了。
示例:
@keyframes myFadeIn {from {opacity: 0;}to {opacity: 1;}}.target{background: #f0f;width: 100px;height: 100px;animation: myFadeIn 1s;}
@keyframes 用來定義一個動畫，其后的第一個單詞，就是動畫的名字（上面代碼中的 myFadeIn）,最外層括號里的內(nèi)容，就是動畫的效果
from 和 to 分別定義兩個狀態(tài)，表示動畫是由 0%變成 100%
viewport的理解
手機瀏覽器會把頁面放入到一個虛擬的“視口”（viewpoint）中，但viewport又不局限于瀏覽器可視區(qū)域的大小，它可能比瀏覽器的可視區(qū)域大，也可能比瀏覽器的可視區(qū)域小。通常這個虛擬的“視口”（viewport）比屏幕寬，會把網(wǎng)頁擠到一個很小的窗口。
如果不顯示地設(shè)置viewport，那么瀏覽器就會把width默認設(shè)置為980。但后果是瀏覽器出現(xiàn)橫向滾動條，因為瀏覽器可視區(qū)域的寬度比默認的viewport的寬度小。
然后瀏覽器引進了 viewport 這個 meta tag，讓網(wǎng)頁開發(fā)者來控制 viewport 的大小和縮放。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
49、CSS實現(xiàn)寬度自適應(yīng)100%，寬高16:9的比例的矩形
第一步先計算高度，假設(shè)寬100%，那么高為h=9/16=56.25%
第二步利用之前所說設(shè)置padding-bottom方法實現(xiàn)矩形
<div class="box"><div class="scale">這是一個16：9的矩形</div></div><style>.box {width: 80%;}.scale {width: 100%;padding-bottom: 56.25%;height: 0;position: relative;}</style>
50、rem布局的優(yōu)缺點
優(yōu)點：能讓我們在手機各個機型的適配方面；大大減少我們代碼的重復(fù)性，是我們的代碼更兼容。
缺點：目前ie不支持 對pc頁面來講使用次數(shù)不多；
數(shù)據(jù)量大：所有的圖片，盒子都需要我們?nèi)ソo一個準確的值；才能保證不同機型的適配；
px轉(zhuǎn)換成rem需要手動，計算方式：量的大小除以100，就等于rem，例如：量的設(shè)計稿元素寬度是120，那么就寫成{width: 1.2rem}。實現(xiàn)代碼如下：
<script>function resetFontSize() {var baseFontSize = 100var designWidth = 750var width = window.innerWidthvar currentFontSize = (width / designWidth) * baseFontSizedocument.getElementsByTagName('html')[0].style.fontSize = currentFontSize + 'px'}window.onresize = function () {resetFontSize()};resetFontSize()</script>
51、如何解決1px問題（1像素邊框問題）
移動端web開發(fā)中，UI設(shè)計稿中設(shè)置邊框為1像素，前端在開發(fā)過程中如果出現(xiàn)border:1px，測試會發(fā)現(xiàn)在某些機型上，1px會比較粗，即是較經(jīng)典的 移動端1px像素問題。
1.transform: scale(0.5)
a、設(shè)置height: 1px，根據(jù)媒體查詢結(jié)合transform縮放為相應(yīng)尺寸。
div {height:1px;background:#000;-webkit-transform: scaleY(0.5);-webkit-transform-origin:0 0;overflow: hidden;}
b、用::after和::befor,設(shè)置border-bottom：1px solid #000,然后在縮放-webkit-transform: scaleY(0.5);可以實現(xiàn)兩根邊線的需求
div::after{content:'';width:100%;border-bottom:1px solid #000;transform: scaleY(0.5);}
2.媒體查詢利用設(shè)備像素比縮放，設(shè)置小數(shù)像素；
優(yōu)點：簡單，好理解
缺點：兼容性差，目前之余IOS8+才支持，在IOS7及其以下、安卓系統(tǒng)都是顯示0px。
1.）css可以寫成這樣：
.border { border: 1px solid #999 }@media screen and (-webkit-min-device-pixel-ratio: 2) {.border { border: 0.5px solid #999 }}@media screen and (-webkit-min-device-pixel-ratio: 3) {.border { border: 0.333333px solid #999 }}
2.）js 可以寫成這樣：
<body><div id="main" style="border: 1px solid #000000;"></div></body><script type="text/JavaScript">if (window.devicePixelRatio && devicePixelRatio >= 2) {var main = document.getElementById('main');main.style.border = '.5px solid #000000';}</script>
二者任選其一；
3.媒體查詢 + transfrom
/* 2倍屏 */@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {.border-bottom::after {-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}}/* 3倍屏 */@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {.border-bottom::after {-webkit-transform: scaleY(0.33);transform: scaleY(0.33);}}
4.box-shadow 方案
利用陰影也可以實現(xiàn)，優(yōu)點是沒有圓角問題，缺點是顏色不好控制
div {-webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);}
52、CSS允許使用哪些不同的媒介類型？
@media屬性主要有四種類型（包括screen）：
all—適用于所有設(shè)備。
print—打印預(yù)覽模式/打印頁面。
speech——適用于“朗讀”頁面的屏幕閱讀器
screen——計算機屏幕（默認）
53、CSS有哪些單位?
CSS 有兩種類型的長度單位：相對和絕對。設(shè)置 CSS 長度的屬性有 width, margin, padding, font-size, border-width, 等。
相對長度：
| 單位 | 描述 |
|---|---|
| em | 它是描述相對于應(yīng)用在當前元素的字體尺寸，所以它也是相對長度單位。一般瀏覽器字體大小默認為16px，則2em == 32px； |
| rem | 是根 em（root em）的縮寫，rem作用于非根元素時，相對于根元素字體大??；rem作用于根元素字體大小時，相對于其出初始字體大小。 |
| vh | viewpoint height，視窗高度，1vh=視窗高度的1% |
| vw | viewpoint width，視窗寬度，1vw=視窗寬度的1% |
| vmin | vw和vh中較小的那個。 |
| vmax | vw和vh中較大的那個。 |
| % | 相對父元素 |
提示: rem與em有什么區(qū)別呢？區(qū)別在于使用rem為元素設(shè)定字體大小時，仍然是相對大小，但相對的只是HTML根元素。
絕對長度：
| 單位 | 描述 |
|---|---|
| cm | 厘米 |
| mm | 毫米 |
| in | 英寸 (1in = 96px = 2.54cm) |
| px * | 像素 (1px = 1/96th of 1in) |
| pt | point，大約1/72英寸；(1pt = 1/72in) |
像素或許被認為是最好的"設(shè)備像素"，而這種像素長度和你在顯示器上看到的文字屏幕像素無關(guān)。px實際上是一個按角度度量的單位。
54、用于控制背景圖像滾動的屬性是什么？
background-attachment：該屬性設(shè)置背景圖像是隨頁面其余部分滾動還是固定滾動。
body {background-image: url("img_tree.gif");background-repeat: no-repeat;background-attachment: fixed;}
55、什么是供應(yīng)商前綴？
瀏覽器供應(yīng)商有時會在實驗性或非標準CSS屬性和JavaScript API中添加前綴，因此，從理論上講，開發(fā)人員可以嘗試新的想法，同時從理論上防止在標準化過程中依賴他們的實驗，然后破壞Web開發(fā)人員的代碼。
開發(fā)人員應(yīng)等待包括未添加前綴的屬性，直到瀏覽器行為標準化為止。
主流瀏覽器使用以下前綴：
-webkit- （Chrome，Safari，Opera的較新版本，幾乎所有的iOS瀏覽器（包括Firefox for iOS）；基本上是任何基于WebKit的瀏覽器）
-moz- （Firefox）
-o- （舊的，WebKit之前的Opera版本）
-ms- （Internet Explorer和Microsoft Edge）
56、CSS中 link 和@import 的區(qū)別是？
link屬于HTML標簽，而@import是CSS提供的，頁面被加載時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載
import只在IE5以上才能識別，而link是HTML標簽，無兼容問題
link方式的樣式的權(quán)重 高于@import的權(quán)重.
57、使元素消失的方法有哪些？
opacity：0，該元素隱藏起來了，但不會改變頁面布局，并且，如果該元素已經(jīng)綁定一些事件，如click事件，那么點擊該區(qū)域，也能觸發(fā)點擊事件的
visibility：hidden，該元素隱藏起來了，但不會改變頁面布局，但是不會觸發(fā)該元素已經(jīng)綁定的事件
display：none，把元素隱藏起來，并且會改變頁面布局，可以理解成在頁面中把該元素刪除掉。
感謝你的閱讀。
學習更多技能
請點擊下方公眾號
