1，介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不同的？
（1）有兩種， IE 盒子模型、W3C 盒子模型；（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
（3）區 別： IE的content部分把 border 和 padding計算了進去；
2，CSS選擇符有哪些？哪些屬性可以繼承？
* 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 ;
3，CSS優先級算法如何計算？
* 優先級就近原則，同權重情況下樣式定義最近者爲準;* 載入樣式以最後載入的定位爲準;
優先級爲:
!important > id > class > tag
important 比 內聯優先級高
4，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 單選框或複選框被選中。
5，如何居中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居中
div{
position: absolute;
width: 1200px;
background: none;
margin: 0 auto;
top: 0;
left: 0;
bottom: 0;
right: 0;}
6，display有哪些值？說明他們的作用。
block 象塊類型元素一樣顯示。none 缺省值。象行內元素類型一樣顯示。
inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。
list-item 象塊類型元素一樣顯示，並添加樣式列表標記。
table 此元素會作爲塊級表格來顯示
inherit 規定應該從父元素繼承 display 屬性的值
7，position的值relative和absolute定位原點是？
absolute 生成絕對定位的元素，相對於值不爲 static的第一個父元素進行定位。fixed （老IE不支持） 生成絕對定位的元素，相對於瀏覽器窗口進行定位。
relative 生成相對定位的元素，相對於其正常位置進行定位。
static 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 聲明）。
inherit 規定從父元素繼承 position 屬性的值。
8，CSS3有哪些新特性？
新增各種CSS選擇器 （: not(.input)：所有 class 不是“input”的節點）圓角 （border-radius:8px）
多列布局 （multi-column layout）
陰影和反射 （Shadow\Reflect）
文字特效 （text-shadow、）
文字渲染 （Text-decoration）
線性漸變 （gradient）
旋轉 （transform）
增加了旋轉,縮放,定位,傾斜,動畫，多背景
transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:
9，用純CSS創建一個三角形的原理是什麼？
把上、左、右三條邊隱藏掉（顏色設爲 transparent）
demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
10，一個滿屏 品 字佈局 如何設計?
簡單的方式：上面的div寬100%，
下面的兩個div分別寬50%，
然後用float或者inline使其不換行即可
11，li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？
行框的排列會受到中間空白（回車\空格）等的影響，因爲空格也屬於字符,這些空白也會被應用樣式，佔據空間，所以會有間隔，把字符大小設爲0，就沒有空格了。
12，爲什麼要初始化CSS樣式。
- 因爲瀏覽器的兼容問題，不同瀏覽器對有些標籤的默認值是不同的，如果沒對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; }
13，absolute的containing block(容器塊)計算方式跟正常流有什麼不同？
無論屬於哪種，都要先找到其祖先元素中最近的 position 值不爲 static 的元素，然後再判斷：1、若此元素爲 inline 元素，則 containing block 爲能夠包含這個元素生成的第一個和最後一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
2、否則,則由這個祖先元素的 padding box 構成。
如果都找不到，則爲 initial containing block。
補充：
1. static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分）
2. absolute: 向上找最近的定位爲absolute/relative的元素
3. fixed: 它的containing block一律爲根元素(html/body)，根元素也是initial containing block
14，對BFC規範(塊級格式化上下文：block formatting context)的理解？
（W3C CSS 2.1 規範中的一個概念,它是一個獨立容器，決定了元素如何對其內容進行定位,以及與其他元素的關係和相互作用。）一個頁面是由很多個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。
不同類型的 Box,會參與不同的 Formatting Context（決定如何渲染文檔的容器）,因此Box內的元素會以不同的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響。
創建規則：
根元素
浮動元素（float不是none）
絕對定位元素（position取值爲absolute或fixed）
display取值爲inline-block,table-cell, table-caption,flex, inline-flex之一的元素
overflow不是visible的元素
作用：
可以包含浮動元素
不被浮動元素覆蓋
阻止父子元素的margin摺疊
15，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{}
如果權重相同，則最後定義的樣式會起作用，但是應該避免這種情況出現