CSS
介紹CSS的盒子模型？
（1）有兩種，IE 盒子模型、標準W3C 盒子模型；IE的content部分包含了border 和pading;
（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).
CSS 選擇符有哪些？哪些屬性可以繼承？優先權演算法如何計算？ CSS3新增偽類有那些？
* 1.id選擇器（ # myid）
2.類別選擇器（.myclassname）
3.標籤選擇器（div, h1, p）
4.相鄰選擇器（h1 p）
5.子選擇器（ul < li）
6.後代選擇器（li a）
7.通配符選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.偽類別選擇器（a: hover, li: nth - child）
* 可繼承的樣式： font-size font-family color , UL LI DL DD DT;
* 不可繼承的樣式：border padding margin width height ;
* 優先權就近原則，同權重情況下樣式定義最近者為準;
* 載入樣式以最後載入的定位為準;
優先權為:
!important > id > class > tag
!important > id > class > tag
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> 元素。
:enabled :disabled 控製表單控制項的停用狀態。
如何居中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%;
}
1.
block 象塊類型元素一樣顯示。
none 預設值。象行內元素類型一樣顯示。
inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。
list-item 象塊類型元素一樣顯示，並新增樣式清單標記。
2.
*absolute
產生絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。
*fixed （舊IE不支援）
產生絕對定位的元素，相對於瀏覽器視窗進行定位。
*relative
產生相對定位的元素，相對於其正常位置進行定位。
* static 預設值。沒有定位，元素出現在正常的流中
*（忽略 top, bottom, left, right z-index 宣告）。
* inherit 規定從父元素繼承 position 屬性的值。
CSS3實作圓角（border-radius:8px），陰影（box-shadow:10px），
對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform )
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
增加了更多的CSS選擇器 多背景rgba
- 因為瀏覽器的相容問題，不同瀏覽器對有些標籤的預設值是不同的，如果沒有對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
- 當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
*最簡單的初始化方法就是： * {padding: 0; margin: 0;} （不建議）
#淘寶的樣式初始化：
body, h1, h2, h3 , h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0 ; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100 %; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
# sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
#absolute的containing block計算方式跟正常流有什麼不同？
position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？
對BFC規範的理解？
（W3C CSS 2.1 規範中的一個概念,它決定了元素如何對其內容進行定位,以及與其他元素的關係和相互作用。）
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{
}
如果權重相同，則最後定義的樣式會起作用，但是應該避免這種情況出現
解釋下浮動和它的工作原理？清除浮動的技巧
用過媒體查詢，針對行動端的佈局嗎？
使用 CSS 預處理器嗎？喜歡那個？
SASS
