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