1. CSS 盒子模型
大體包含:margin、padding、border、content。
官網的解釋：
在一個文檔中，每個元素都被表示為一個矩形的盒子。確定這些盒子的尺寸, 屬性 --- 像它的顏色，背景，邊框方面 --- 和位置是渲染引擎的目標。
在CSS中，使用標准盒模型描述這些矩形盒子中的每一個。這個模型描述了元素所占空間的內容。每個盒子有四個邊：外邊距邊, 邊框邊, 內填充邊與內容邊。
盒子模型和box-sizing
為了我們定義元素的大小，box-sizing出現了。其屬性值有：content-box（盒子寬度只包含content）、border-box（盒子實際寬度包含content、padding、border）。默認為content-box。
2.絕對定位和相對定位
position定位問題：分為無特殊定位（static）絕對定位（absolute） 相對定位（relative）和固定定位（fixed）。
static：無特殊定位，按照html標准元素排列 relative：相對定位，占元素位置，偏移根據原有位置進行一個偏移 absolute：絕對定位，不占元素位置，偏移位置根據父元素（父元素要使用相對定位才可以）。 而其層疊通過css z-index屬性定義。此時對象不具有邊距，但仍有補白和邊框 fixed：固定定位，不占元素位置，偏移位置根據body進行一個偏移。 而其層疊通過css z-index屬性定義。此時對象不具有邊距，但仍有補白和邊框
3.浮動
脫離本身的文檔流，進行一個位置布局的調整。
浮動元素之后的元素將圍繞它。浮動元素之前的元素將不會受到影響。
清除浮動：（浮動后的元素，不會影響父元素的高度）
1.使用clear進行清除浮動，使其父元素的高度受浮動元素的影響（我們新建一個樣式選擇器CSS命名為“.clear”，並且對應選擇器樣式為“clear:both”，然后我們在父級“</div>”結束前加此div引入“class="clear"”樣式。這樣即可清除浮動。）（此方法不推薦使用，因為新增了一個元素出來）
2.使用父元素給一個合適的高度處理（此方法一般也不使用，因為父元素高度需要寫死。）
3.父元素使用overflow：hidden（經常使用，比較方便）
4.如何保持浮層水平垂直居中
1.使用定位：
<div class="parent">
<div class="children">
</div>
</div>
.parent {
position：relative；
}
.children{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: black; }
2.使用flex布局
<div class="parent">
<div class="children">
</div>
</div>
.parent {
justify-content:center;
align-items:center;
display: -webkit-flex;
}
3.使用margin
<div class="parent">
<div class="children">
</div>
</div>
.parent {
width: 500px;
height: 500px;
background: red;
position: relative;
}
.children {
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
width: 50%;
height: 50%;
background: #fff;
margin: auto;
}
4.position 和 display 的取值和各自的意思和用法
position見上方定位。
display：inline（行內元素），inline-block（介於行內元素和塊狀元素之間），block（塊狀元素）。none（不顯示，不占位）---（visibility：hidden，不顯示 但是占位）。flex（flex布局）
5.樣式的層級關系，選擇器優先級，樣式沖突，以及抽離樣式模塊怎么寫
行內>（!important>）id>class（屬性選擇器/偽類選擇器）>標簽選擇器（偽元素選擇器） 同類選擇符條件下層級越多的優先級越高。優先級就近原則，同權重情況下樣式定義最近者為准。載入樣式以最后載入的定位為准。
抽離樣式模塊，是指把一些公用的東西使用公用類名或者元素標簽進行一次統一的樣式處理。項目的各個模塊皆可使用。
6.css3動畫效果屬性，canvas、svg的區別，CSS3中新增偽類舉例
c3動畫效果屬性：transition（transition允許css的屬性值在一定的時間區間內平滑地過渡。這種效果可以在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值。）、animation（不同於transition只能定義首尾兩個狀態，animation可以定義任意多的關鍵幀，因而能實現更復雜的動畫效果。）和transform（就是變形，主要包括旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。）是CSS3中三個制作動畫的重要屬性
c3新增偽類： p:first-of-type。 p:last-of-type p:only-of-type p:only-child p:nth-child(2) :enabled、:disabled 控制表單控件的禁用狀態。:checked，單選框或復選框被選中。
canvas：用於畫圖的一個東東，h5的新標簽，而svg是很久前xml技術的一個描述二維圖像的語言。canvas可以看做是一個畫布，其繪制出來的圖形為標量圖，因此，可以在canvas中引入jpg或png這類格式的圖片，而svg，所繪制的圖形為矢量圖，所以其用法上受到了限制。因為只能繪制矢量圖，所以svg中不能引入普通的圖片，因為矢量圖的不會失真的效果，在項目中我們會用來做一些動態的小圖標。但是由於其本質為矢量圖，可以被無限放大而不會失真，這很適合被用來做地圖，而百度地圖就是用svg技術做出來的。
另外從技術發面來講canvas里面繪制的圖形不能被引擎抓取，如我們要讓canvas里面的一個圖片跟隨鼠標事件：canvas.οnmοuseοver=function(){}。而svg里面的圖形可以被引擎抓取，支持事件的綁定。另外canvas中我們繪制圖形通常是通過javascript來實現，svg更多的是通過標簽來來實現，如在svg中繪制正矩形形就要用<rect>，這里我們不能用屬性style="width:XXX;height:XXX;"來定義。我再來介紹一個svg的js庫：TWO.JS。其中包含two.js和three.js前者用於繪制二維圖形，后者用於繪制三維圖形。TWO.JS可以支持三種格式，svg（默認）、canvas、和WEBGL。當然也可以在普通div中引入。
7.px和em和rem的區別，CSS中link 和@import的區別是?
px表示絕對尺寸，實際上就是css中定義的像素
em表示的是相對尺寸，他相對於當前對象內文本的font-size
rem表示相對尺寸，其參考對象為根元素<html>的font-size，因此只需要確定這一個font-size。
link和@import的區別：
差別1：老祖宗的差別，link屬於XHTML標簽，而@import完全是css提供的一種方式。
link標簽除了可以加載css外，還可以做很多其他的事情，比如定義RSS，定義rel連接屬性等，@import只能加載CSS。
差別2：加載順序的差別：當一個頁面被夾在的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS會等到頁面全部被下載完再加載。所以有時候瀏覽@import加載CSS的頁面時會沒有樣式（就是閃爍），網速慢的時候還挺明顯。
差別3：兼容性的差別。由於@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別，而link標簽無此問題，完全兼容。
差別4：使用dom控制樣式時的差別。當時用JavaScript控制dom去改變樣式的時候，只能使用link標簽，因為@import不是dom可以控制的（不支持）。