CSS

一、CSS3新特性錨偽類target

<li><a href="#bg5">我在為我的激光充能!</a></li>

<img src="bg5.jpg" alt="" class="bg rotate"         id="bg5" />

.rotate:target{
    z-index: 100;
    animation-name: rotate;
    animation-duration: 2s;
    animation-iteration-count: 1;     
    animation-fill-mode:forwards; 
}

在點(diǎn)擊完鏈接a標(biāo)簽后，錨鏈接目標(biāo)元素就多了個偽類 :target:，類似偽類 :hover

參考例子：
【純CSS3-animation】實(shí)現(xiàn)背景動態(tài)切換

二、CSS實(shí)現(xiàn)隱藏頁面的方式

Opacity:0;
display:none;
visibility:hidden;
position: absolute;
   top: -1000%;
   left: -1000%;

三、如何實(shí)現(xiàn)水平居中和垂直居中。

水平居中

1、margin和固定width實(shí)現(xiàn)水平居中

width:100px;
margin: 0 auto;

2、inline-block實(shí)現(xiàn)水平居中方法
僅inline-block屬性是無法讓元素水平居中，他的關(guān)鍵之處要在元素的父容器中設(shè)置text-align的屬性為“center”

ul {
text-align:center;
}
ul > li {
display:inline-block;
}

3、浮動實(shí)現(xiàn)水平居中的方法

pagination {
  float: left;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.pagination ul {
  clear: left;
  float: left;
  position: relative;
  left: 50%;/*整個分頁向右邊移動寬度的50%*/
  text-align: center;
}**
.pagination li {
    line-height: 25px;
    margin: 0 5px;
    display: block;
    float: left;
    position: relative;
    right: 50%;/*將每個分頁項向左邊移動寬度的50%*/**
}

4、絕對定位和浮動實(shí)現(xiàn)水平居中

.pagination {
    position: relative;
}
.pagination ul {
    position: absolute;
    left: 50%;
}**
.pagination li {
      line-height: 25px;
      margin: 0 5px;
     float: left;
      position: relative;/*注意，這里不能是absolute，大家懂的*/
      right: 50%;**
}

5、絕對定位和transform實(shí)現(xiàn)水平居中

position: absolute;
left: 50%;
transform:translateX(-50%);

6、CSS3的flex實(shí)現(xiàn)水平居中方法

ul {
display:flex;
justify-content:center;
}

垂直居中

1、通過verticle-align:middle實(shí)現(xiàn)CSS垂直居中。
通過vertical-align:middle實(shí)現(xiàn)CSS垂直居中是最常使用的方法，但是有一點(diǎn)需要格外注意，vertical生效的前提是元素的display：inline-block。

2、通過display:flex實(shí)現(xiàn)CSS垂直居中

3、通過偽元素:before實(shí)現(xiàn)CSS垂直居中。
具體方式是為父元素添加偽元素:before，使得子元素實(shí)現(xiàn)垂直居中

.parent:before {
    content:"";
    display:inline-block;
    vertical-align: middle;
    height: 100%;
}

4、通過display:table-cell實(shí)現(xiàn)CSS垂直居中。
給父元素display:table，子元素display：table-cell的方式實(shí)現(xiàn)CSS垂直居中。

5、通過隱藏節(jié)點(diǎn)實(shí)現(xiàn)CSS垂直居中。
創(chuàng)建一個隱藏節(jié)點(diǎn)#hide，使得隱藏節(jié)點(diǎn)的height值為剩余高度的一半即可。
這種方法也適用于CSS水平居中，原理一樣。

6、絕對定位和transform實(shí)現(xiàn)垂直居中

四、請解釋*{box-sizing:border-box;}的作用，并說明使用它的好處
將寬高也包括邊框?qū)挾?，?dāng)需要按比例相應(yīng)式布局時，也可以不用考慮邊框的影響。

五、浮動元素引起的問題和解決辦法？絕對定位和相對定位，元素浮動后的display值

浮動元素引起的問題
1.由于浮動元素已脫離文檔流，所以父元素?zé)o法被撐開，影響與父級元素同級的元素。
2.與浮動元素同級的非浮動元素（內(nèi)聯(lián)元素）會跟隨其后，也是由于浮動元素脫離文檔流，不占據(jù)文檔流中額位置。
3.如果該浮動元素不是同級第一個浮動的元素，則它之前的元素也應(yīng)該浮動，否則容易影響頁面的結(jié)構(gòu)顯示。

解決方法

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

六、link和@import引入css的區(qū)別

1、link
<link rel="stylesheet" type="text/css" href="sheet.css">
link的作用是將外部文件引入到當(dāng)前文件中，可以引入除去css文件之外別的類型的文件。但是只能位于head中
rel = “stylesheet”表示的是當(dāng)前文檔與引用的文檔之間的關(guān)系。
type=“text/css”表示引用的文檔是文本類型的css文件。
href=“URL”指明引用文件的URL

2、@import

@import url(sheet.css);

@import是css的一個屬性，代表著引入css文件到當(dāng)下css文件中，且只能引入css文件。@import只能位于文件的頂部，這降低了靈活性

七、解釋一下css3的flexbox，以及適用場景
Flex布局的完整基本語法

八、inline和inline-block的區(qū)別
1、display:block
block元素會獨(dú)占一行，多個block元素會各自新起一行。默認(rèn)情況下，block元素寬度自動填滿其父元素寬度。
block元素可以設(shè)置width,height屬性。塊級元素即使設(shè)置了寬度,仍然是獨(dú)占一行。
block元素可以設(shè)置margin和padding屬性。

2、display:inline
inline元素不會獨(dú)占一行，多個相鄰的行內(nèi)元素會排列在同一行里，直到一行排列不下，才會新?lián)Q一行，其寬度隨元素的內(nèi)容而變化。
inline元素設(shè)置width,height屬性無效。
inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產(chǎn)生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產(chǎn)生邊距效果。

3、display:inline-block
簡單來說就是將對象呈現(xiàn)為inline對象，但是對象的內(nèi)容作為block對象呈現(xiàn)。之后的內(nèi)聯(lián)對象會被排列在同一行內(nèi)。比如我們可以給一個link（a元素）inline-block屬性值，使其既具有block的寬度高度特性又具有inline的同行特性

九、哪些是塊級元素那些是行級元素，各有什么特點(diǎn)
1、行級元素
a、em、span、br、i、input、label、img

十、grid布局

父容器(Grid Container)的屬性

display

將元素定義為 grid contaienr，并為其內(nèi)容建立新的網(wǎng)格格式化上下文(grid formatting context)。
值:

grid - 生成一個塊級(block-level)網(wǎng)格
inline-grid - 生成一個行級(inline-level)網(wǎng)格
subgrid - 如果你的 grid container 本身就是一個 grid item（即,嵌套網(wǎng)格），你可以使用這個屬性來表示你想從它的父節(jié)點(diǎn)獲取它的行/列的大小，而不是指定它自己的大小。

grid-template-columns / grid-template-rows

使用以空格分隔的多個值來定義網(wǎng)格的列和行。這些值表示軌道大小(track size)，它們之間的空格代表表格線(grid line)。

.container {
  grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
  grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}

例子:
(如果未顯示的給網(wǎng)格線命名)，軌道值之間僅僅有空格時，網(wǎng)格線會被自動分配數(shù)字名稱：

  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;

image.png

可以給網(wǎng)格線指定確切的命名。 注意中括號里的網(wǎng)格線命名語法：

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

image.png

grid-template-areas

通過引用 grid-area屬性指定的網(wǎng)格區(qū)域的名稱來定義網(wǎng)格模板。 重復(fù)網(wǎng)格區(qū)域的名稱導(dǎo)致內(nèi)容擴(kuò)展到這些單元格。 點(diǎn)號表示一個空單元格。 語法本身提供了網(wǎng)格結(jié)構(gòu)的可視化。

值：

• <grid-area-name> - 使用 grid-area 屬性設(shè)置的網(wǎng)格區(qū)域的名稱
• . - 點(diǎn)號代表一個空網(wǎng)格單元
• none - 沒有定義網(wǎng)格區(qū)域

舉例：

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

這將創(chuàng)建一個四列寬三行高的網(wǎng)格。 整個第一行將由 header 區(qū)域組成。 中間一行將由兩個 main 區(qū)域、一個空單元格和一個 sidebar 區(qū)域組成。 最后一行是footer區(qū)域組成。

image.png

grid-template
在單個聲明中定義 grid-template-rows、grid-template-columns、grid-template-areas 的簡寫。

值：

none - 將三個屬性都設(shè)置為其初始值
subgrid - 把 grid-template-rows 和 grid-template-columns 設(shè)置為 subgrid, 并且 grid-template-areas 設(shè)置為初始值
grid-template-rows / <grid-template-columns - 把 grid-template-columns 和 grid-template-rows 設(shè)置為指定值, 與此同時, 設(shè)置 grid-template-areas 為 none
.container {
grid-template: none | subgrid | <grid-template-rows> / <grid-template-columns>;
}
它也可以使用一個更復(fù)雜但相當(dāng)方便的語法來指定這三個值。 一個例子：

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

以上等價于：

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

由于 grid-template 不會重置隱式網(wǎng)格屬性（grid-auto-columns，grid-auto-rows和grid-auto-flow），而這可能是大多數(shù)情況下你想要做的。因此建議使用grid屬性來代替grid-template。

具體參考：
# CSS Grid 系列(上)-Grid布局完整指南

十一、table布局的作用
主要作用：

用于布局（過時）
用于顯示批量的數(shù)據(jù)

缺點(diǎn)：

加載頁面的時候，需要全部的數(shù)據(jù)都請求到，才顯示頁面，否則就是一片的空白

十二、實(shí)現(xiàn)兩欄布局有哪些方法？

1. 雙inline-block方案
2. 雙float方案
3. 使用absolute+margin-left方法
4. 使用float+BFC方法

.wrapper-float-bfc {
    overflow: auto;
}

.wrapper-float-bfc .left {
    float: left;
    margin-right: 20px;
}

.wrapper-float-bfc .right {
    margin-left: 0;
    overflow: auto;
}

5. flex方案
6. grid方案

十三、BFC是什么？
1、塊格式化上下文（BFC）有下面幾個特點(diǎn)：

BFC是就像一道屏障，隔離出了BFC內(nèi)部和外部，內(nèi)部和外部區(qū)域的渲染相互之間不影響。BFC有自己的一套內(nèi)部子元素渲染的規(guī)則，不影響外部渲染，也不受外部渲染影響。
BFC的區(qū)域不會和外部浮動盒子的外邊距區(qū)域發(fā)生疊加。也就是說，外部任何浮動元素區(qū)域和BFC區(qū)域是涇渭分明的，不可能重疊。
BFC在計算高度的時候，內(nèi)部浮動元素的高度也要計算在內(nèi)。也就是說，即使BFC區(qū)域內(nèi)只有一個浮動元素，BFC的高度也不會發(fā)生塌縮，高度是大于等于浮動元素的高度的。
HTML結(jié)構(gòu)中，當(dāng)構(gòu)建BFC區(qū)域的元素緊接著一個浮動盒子時，即，是該浮動盒子的兄弟節(jié)點(diǎn)，BFC區(qū)域會首先嘗試在浮動盒子的旁邊渲染，但若寬度不夠，就在浮動元素的下方渲染

2、如何創(chuàng)建BFC

float屬性不為none
overflow不為visible(可以是hidden、scroll、auto)
position為absolute或fixed
display為inline-block、table-cell、table-caption

3、BFC的作用

3.1、 清除內(nèi)部浮動

我們在布局時經(jīng)常會遇到這個問題：對子元素設(shè)置浮動后，父元素會發(fā)生高度塌陷，也就是父元素的高度變?yōu)?。解決這個問題，只需要把把父元素變成一個BFC就行了。常用的辦法是給父元素設(shè)置overflow:hidden。

3.2、 垂直margin合并
在CSS當(dāng)中，相鄰的兩個盒子的外邊距可以結(jié)合成一個單獨(dú)的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距。
折疊的結(jié)果：

兩個相鄰的外邊距都是正數(shù)時，折疊結(jié)果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負(fù)數(shù)時，折疊結(jié)果是兩者絕對值的較大值。
兩個外邊距一正一負(fù)時，折疊結(jié)果是兩者的相加的和。
這個同樣可以利用BFC解決

十四、css 和 dpi 的關(guān)系？

DPI就是DOT PER INCH
圖像的輸出分辨率
設(shè)備輸出圖像時每英寸可產(chǎn)生的點(diǎn)數(shù)dpi，以dpi為單位
普通屏幕通常包含96dpi
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

十五、你知道attribute和property的區(qū)別么
1、差異點(diǎn)是哪些

DOM有其默認(rèn)的基本屬性，而這些屬性就是所謂的“property”，無論如何，它們都會在初始化的時候再DOM對象上創(chuàng)建。
如果在TAG對這些屬性進(jìn)行賦值，那么這些值就會作為初始值賦給DOM的同名property
attributes是屬于property的一個子集
打印attribute屬性不會直接得到對象的值，而是獲取一個包含屬性名和值的字符串
HTML標(biāo)簽中定義的屬性和值會保存該DOM對象的attributes屬性里面；
這些attribute屬性的JavaScript中的類型是Attr，而不僅僅是保存屬性名和值這么簡單；

2、是否雙向綁定

property能夠從attribute中得到同步；
attribute不會同步property上的值；
attribute和property之間的數(shù)據(jù)綁定是單向的，attribute->property；
更改property和attribute上的任意值，都會將更新反映到HTML頁面中；

十六、流式布局如何實(shí)現(xiàn)，響應(yīng)式布局如何實(shí)現(xiàn)
1、流式布局的特點(diǎn)以及應(yīng)用場景

特點(diǎn)：當(dāng)上面一行的空間不夠容納新的TextView時候，
應(yīng)用場景：圖片墻

2、響應(yīng)式布局
兼容不同屏幕分辨率、清晰度以及屏幕定向方式豎屏(portrait)、橫屏(landscape)
2.1、Meta標(biāo)簽定義
使用 viewport meta 標(biāo)簽在手機(jī)瀏覽器上控制布局

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />

通過快捷方式打開時全屏顯示

<meta name="apple-mobile-web-app-capable" content="yes" />

隱藏狀態(tài)欄

<meta name="apple-mobile-web-app-status-bar-style" content="blank" />

iPhone會將看起來像電話號碼的數(shù)字添加電話連接，應(yīng)當(dāng)關(guān)閉

<meta name="format-detection" content="telephone=no" />

2.2、使用Media Queries適配對應(yīng)樣式
2.2.1、設(shè)備類型(media type):

all所有設(shè)備
screen 電腦顯示器

2.2.2、設(shè)備特性(media feature):

width瀏覽器寬度；
height瀏覽器高度；
device-width設(shè)備屏幕分辨率的寬度值；
device-height設(shè)備屏幕分辨率的高度值；
orientation瀏覽器窗口的方向縱向還是橫向，當(dāng)窗口的高度值大于等于寬度時該特性值為portrait，否則為landscape；
aspect-ratio比例值，瀏覽器的縱橫比；
device-aspect-ratio比例值，屏幕的縱橫比。

@media only screen and (min-device-width:241px) and (max-device-width:320px){
　　 selector{ ... }
}

3、響應(yīng)式內(nèi)容
3.1、響應(yīng)式圖片

<span data-picture data-alt="圖片描述文本">
    　<span data-src="small.jpg"></span>
    　<span data-src="medium.jpg"     data-media="(min-width: 400px)"></span>
    　<span data-src="large.jpg"      data-media="(min-width: 800px)"></span>
    　<span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
    　<!-- 瀏覽器不支持JS時的備用方案. -->
    　<noscript>
        　<img src="external/imgs/small.jpg" alt="圖片描述文本">
    　</noscript>
</span>

其原理就是JS獲取Source的源以及CSS Media Queries規(guī)則，輸出適應(yīng)圖片
3.2、高分辨率(DPI)下的響應(yīng)式處理

（1）、SVG：優(yōu)點(diǎn)可承載色彩豐富、設(shè)計復(fù)雜圖形，且渲染不會出現(xiàn)邊緣不順滑；缺點(diǎn)是IE的支持不完美。
（2）、Icon fonts：支持多瀏覽器，圖形顏色大小的修改成本低，易于維護(hù)；圖形表現(xiàn)單一，不支持色彩豐富且復(fù)雜的圖形，IE6渲染有毛邊。
（3）、-webkit-image-set:只支持單個圖形的適配，不利于圖形合并，兼容不完美（Safari 6+, Chrome 21+）。
JS檢測：var retina = window.devicePixelRatio > 1;

CSS Media Query:

@media (-webkit-min-device-pixel-ratio: 2), 
/* Webkit-based browsers */
　　(min--moz-device-pixel-ratio: 2),   
 /* Older Firefox browsers (prior to Firefox 16) */
　　(min-resolution: 2dppx),             
/* The standard way */
　　(min-resolution: 192dpi)            
 /* dppx fallback */

3.3、高分辨率下的1px border

由于高清屏的特性，1px是由2×2個像素點(diǎn)來渲染，那么我們樣式上的border:1px在Retina屏下會渲染成2px的邊框，與設(shè)計稿有出入，為了追求1px精準(zhǔn)還原，我們就不得不拿出一個完美的解決方案。

在Photoshop中，如果需要看似0.5px的邊框，常見的方法就是對1px邊框加上陰影模糊1px。同理，我們在retina屏下需要做到真實(shí)的1px邊框，可利用box-shadow屬性模擬。

@media only screen and (-webkit-min-device-pixel-ratio:1.5),
　　only screen and (min-device-pixel-ratio:1.5) {
　　button {
　　border:none;
　　padding:0 16px;
　　box-shadow: inset 0 0 1px #000,
　　inset 0 1px 0 #75c2f8,
　　0 1px 1px -1px rgba(0, 0, 0, .5);
　　}
　　}

十七、移動端布局方案
rem方案

十八、overflow:hidden有什么缺點(diǎn)？什么時候失效？
通常一個盒子的內(nèi)容是被限制在盒子邊界之內(nèi)的。但有時也會產(chǎn)生溢出，即部分或全部內(nèi)容跑到盒子邊界之外。溢出將在滿足下列條件之一時出現(xiàn)：

1. 一個不換行的行元素寬度超出了容器盒子寬度。
2. 一個寬度固定的塊元素放在了比它窄的容器盒子內(nèi)。
3. 一個元素的高度超出了容器盒子的高度。
4. 一個子孫元素，由負(fù)邊距值引起的部分內(nèi)容在盒子外部。
5. text-indent屬性引起的行內(nèi)元素在盒子的左右邊界外。
6. 一個絕對定位的子孫元素，部分內(nèi)容在盒子外。但超出的部分不是總會被剪裁。子孫元素的內(nèi)容就不會被子孫元素和其包含塊之間的祖先元素的overflow的設(shè)置所剪裁。

十九、transition和animation的區(qū)別

1. 觸發(fā)條件不同。transition通常和hover等事件配合使用，由事件觸發(fā)。animation則和gif動態(tài)圖差不多，立即播放。
2. 循環(huán)。 animation可以設(shè)定循環(huán)次數(shù)。
3. 精確性。 animation可以設(shè)定每一幀的樣式和時間。tranistion 只能設(shè)定頭尾。 animation中可以設(shè)置每一幀需要單獨(dú)變化的樣式屬性， transition中所有樣式屬性都要一起變化。
4. 與javascript的交互。animation與js的交互不是很緊密。tranistion和js的結(jié)合更強(qiáng)大。js設(shè)定要變化的樣式，transition負(fù)責(zé)動畫效果，天作之合，比之前只能用js時爽太多。

二十、對less在開發(fā)中有哪些應(yīng)用？
1、樣式可以嵌套使用，使用簡便，更有結(jié)構(gòu)性
2、可以定義變量，后面可以統(tǒng)一使用一樣的樣式在相同的組件上，可以通過更換變量值，改變所有使用該變量的組件樣式

@fontSize-small: 12px;

3、mixin，就是用一個變量表示一組的樣式

.vk-clearfix() {
    &::before,
    &::after {
        content: " ";
        display: table;
    }

    &::after {
        clear: both;
    }
}

其它類名，直接將mixin變量引入，就可以擁有mixin變量的所有樣式

.layout {
  .vk-clearfix
}

mixin可以看出是函數(shù)，可以傳參

.px2rem(@name, @px) {
    @{name}: @px / @root-px;
}
@root-px: 1rem

設(shè)置字體大小，將px轉(zhuǎn)成rem

.main {
  .px2rem(font-size, 28);
}

4、可以簡化多類名的使用

,circle .circle-red {}

在less可以更簡單的表示同時存在多個類名的元素

.circle {
    &-red {;
    }
}

二十一、CSS 選擇器的優(yōu)先級是怎樣的？

內(nèi)聯(lián)樣式表的權(quán)值為 1000
ID 選擇器的權(quán)值為 100
Class 類選擇器的權(quán)值為 10
HTML 標(biāo)簽選擇器的權(quán)值為 1

二十二、解釋一下“::before”和“:after”中的雙冒號和單冒號的區(qū)別

單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素。
需要兼容webkit、firefox、opera等瀏覽器，建議對于偽元素采用雙冒號的寫法，如果不得不兼容
還是用CSS2的單冒號寫法比較安全