# 介紹一下 CSS 的盒子模型？

position:relative;background:green；left：50%；top：50%}

#css有哪些新特性？

css3實現圓角：border-radius：8px

陰影：box-shadow

對文字加特效（其實也就是給文字加陰影）：text-shadow

線性漸變：gradient

動畫：tranform

transform：rotate（9deg）scle（0.85，0.90） translate（0px，30px）skew（-9deg，0deg）

旋轉 縮放位移傾斜

#radius的值有8個：

 左上、右上，左下、右下分別  兩個值

#radius有八個兼容性寫法：

#為什么初始化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; } 

#display：inline-block什么時候顯示間隙？（這是空格或換行產生的間隙）

dispaly：inline-block布局的元素在Chrome下會出現幾像素的間隙

因為我們在編輯器里 寫代碼的時候，同級的標簽不寫在同一行 ，出現換行符

這就是著名的inline-block”換行符/空格  間隙問題“

##怎樣移除空格？

使用margin：負值、使用font-size：0、letter-spacing、Word-spacing、word-spacing

#什么是盒子模型？

在網頁中  一個元素占有空間的大小有幾部分組成，其中包括

concent 、padding、border、margin

四個部分組成

**box-sizing:border-box;→盒子的大小是固定的  無論是加 padding還是 border盒子的總體大小是不變的**

這四個部分占有的空間中，有的部分可以顯示相應的內容，

而有的部分 只用來分隔相鄰的區域，四個部分一起構成了css 中元素的盒子模型。

#px和em、rem的區別？；

px：px的值是固定的，指定是多少就是多少，計算比較容易。

em：em的值不是固定的  em會繼承父級元素的大小。瀏覽器的默認字體高度就是16px。

所以未經調整的瀏覽器的都符合：1em = 16px。那么12px ==0.75em，10px = 0.625em；

rem：rem的值 是相對與根文字大小的一個尺寸單位；

例如，html{ font-size:50px} div{font-size:0.5rem} 則div中的字體大小為25px；

#link和@import的區別是：

1）link屬于XHTML標簽，而@import是css提供的；

2）頁面被加載的時，link同時會被加載，而@import引用的css會等到頁面被加載完再加載

3）import只有在IE5以上才能被識別，而link是XHTML標簽，無兼容性問題

4）link方式的樣式的權重高于import的權重。

#css的基本語法構成是：

選擇器｛屬性1：值1；屬性2：值2；屬性3：值3｝

#描述css reset的作用和用途：

Reset是重置瀏覽器的

css默認屬性 瀏覽器的 品種不同  樣式不同  然后重置讓他們統一

#解釋css中的sprites如何使用？

css 精靈圖 把一堆小的圖片整合到一張背景透明的大圖片上，

然后通過定位的方式讓各自顯示在應顯示的位置

**好處是  減輕服務器對圖片的請求數量

#清除浮動的 幾種方式，各自的優缺點是什么，什么時候清除浮動？

清除浮動的方式：

1）使用空標簽  清除浮動 clear：left  |   right  |  both

（理論上能清除浮動，但是增加無意義的標簽）

2）使用overflow：auto；

　　此方法有效地解決了通過空標簽元素清除浮動而不得不增加無意代碼的弊端。使用該方法是只需在需要清除浮動的元素中定義CSS屬性：overflow:auto，即可！”zoom:1″用于兼容IE6。

.clear{background:#FF9;overflow:auto;zoom:1;}

<div class=”clear”> 

3）使用after偽元素清除浮動（用于非IE瀏覽器）

　　該方法只適用于非IE瀏覽器。寫法如下示例。

使用中需注意：

一、該方法中必須有height:0，否則該元素會比實際高出若干像素；

二、content屬性是必須有，其值可以為空也可以為"."

.clearfix:after{

content:" ";

height:0;

line-height:0;

display:block;

clear:both;

visibility:hidden;//隱藏

}

.clearfix{

zoom:1;//兼容其他瀏覽器

}

***什么時候清除浮動？1）父元素的高度為0；2）父元素的子元素的都設置了浮動***

#rgba（）和 opacity的透明度效果有什么不同？

opacity作用域元素，以及元素的所有內容（子元素繼承父元素的的透明效果）。

rgba（）只作用于與元素的顏色或被景色（子元素不會繼承透明度效果）

#css設置dom元素 不顯示瀏覽器的可視范圍

基本方式：

1.display：none

2.visibility：hidden

技巧性：

3、寬高為0；

4、透明度 為0；

5、z-index：-100（降低層級）；

6、定位出瀏覽器可視范圍。

#display：none與visibility：hidden  的區別：

display:none→隱藏元素，并且不占空間；

visibility:hidden;→隱藏元素，占有空間；

#行內node與塊級node區別  行內node是否可以設置padding和margin：

行內元素：display:inline;在同一行顯示，不可以設置寬高。寬高 內外邊距的top/bottom都可以不設置，但是 內外邊距left/right可以設置。

塊級元素：display：block 獨占一行  ，可以設置寬高 內外邊距…

行內塊元素：inline-block 在同一行顯示 可以設置寬高 

*行內塊標簽：input，img，button，texterea，label

#css盒子模型

兩種：

IE盒模型：content包含了border和padding

w3c盒模型

#去除a標簽的跳轉效果

<a href = "javascript:return false;">這個連接點不能點擊</a>

<a href = "Javascript:volid(0);"></a>

#b標簽 和Strong標簽，i標簽和em標簽的區別

后者有語義  前者沒有語義

#顏色的4種表達方式↓↓↓

1、直接設置color：red；

2、十六進制：color：#00ff；

3、rgb設置color：rgb(0-255,0-255,0-255)

4、 rgba color:rgba(0-255,0-255,0-255,0-255,0.1); 

#css的3中書寫方式

1、外聯式：新建css內部引用<link href = "css文件路徑" rel = ”“>（主要寫法  ：   推薦寫法）

1)該寫法  影響范圍比較廣，影響整個站點

2）完全實現了html結構與樣式的分離（代碼的可維護性比較好）

2、內嵌式：在頭部的style中書寫

1）只會影響當前頁面

2）沒有實現html結構與樣式的分離

3、行內式：直接在標簽內寫style

1）只會影響當前標簽

2）沒有實現 html結構與樣式的分離

#css的特性：

1、 層疊性：當同一個標簽（權重一樣）的樣式發生沖突的時候，最后定義的樣式會將之前定義的樣式層疊掉；

與樣式定義的順序有關、與樣式調用的順序無關

2、繼承性：標簽之間的關系屬于嵌套關系 

 *可以被繼承的屬性：有關文字的相關屬性都可以被繼承，如，顏色 大小 行高  字體。

*注意：兩個例外↓↓↓

a標簽不能直接使用父元素中的文字大小。

標題標簽 h1... h6不能使用父元素的文字大小

#偽類：用來向選擇器定義樣式或添加特定的效果。常用的偽類有focus  nth-child等

1、a:link｛屬性：值｝  設置a標簽的默認樣式

2、a：visited｛屬性：值｝鏈接訪問過后的樣式

3、a:hover｛屬性：值｝  鼠標移動到超鏈接上的樣式

4、a:active｛屬性：值｝ 鏈接激活狀態下 的樣式

*注意：link visitedhoveractive

(LoVe HAte順序) 愛恨順序書寫可以解決a標簽在四種狀態中出現的小問題

5、a:foucs｛屬性：值｝獲取光標焦點的樣式

6、xxx：first-child向元素的第一個子元素添加樣式

7、xxx：last-child向元素的最后一個樣式添加樣式

#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>元素；

xxx：enable

xxx：disabled  控制表單的禁用狀態；

xxx：checked   單選 或復選框被選中。

#overflow的用法

1、overflow：hidden 將超出盒子部分的內容隱藏

2、overflow：scorll 添加滾動條

3、overflow：auto 自適應

# 定位(position) : 定位的元素常與具體的方位名稱配合使用 left  top  right  bottom       1 靜態定位(static)    不脫標           標準留下的盒子  默認靜態定位static      2 絕對定位(absolute) （看臉型） 脫標

1）父元素不定位、子元素定位 的情況下，子元素以瀏覽器左上角為基準設置定位。

2）父元素設置定位 、子元素設置絕對定位，子元素以父元素的左上角為基準設置定位。

3）元素設置絕對定位后  該元素脫標不占位置。

      3 相對定位 (relative) （自戀型） 不脫標

1）元素設置相對定位  該元素會以自己原來的位置為基準定位。

2）設置相對定位的元素   不脫標占據原來的位置

      4 固定定位(fixed)    脫標

1）設置了固定定位的元素  只會相對于瀏覽器進行定位

2）設置了固定的元素  脫標不占位置

#Z-index（層級）

1、元素與元素之間的層級關系

2、在css2中  只有定位的元素才有z-index

3、默認情況下，定位元素的z-index的值auto（0）

z-index可以取正值  也可以去負值。

特點：1）如果兩個元素都設置了定位，那么后面定位的元素會覆蓋前面定位的元素。

2）如果想讓一個盒子壓另一個盒子 ，可以設置z-index值。

3）如果元素的父元素設置了z-index值，那么程序會以父元素的z-index值為準

#css容易混淆屬性

overflow: auto; /*給添加滾動條 可設置水平 */  overflow：hidden；    /*超出的部分隱藏  */  visibility：hidden； /*元素隱藏  該屬性隱藏元素后，元素占位置*/   display：none: ;     /*元素隱藏 隱藏元素不占位置*/  display: block;     /*顯示元素*/  display: inline;  /* 轉化為  行*/  display: block; /* 轉化為 塊*/   vertical-align: baseline /*只對img/img4和表格起作用*/  vertical-align: middle;  /*垂直居中對齊*/    border-collapse: collapse; /* 合并邊框  與 表格屬性中的 cellspacing="0" 一樣*/  white-space: nowrap; /*將行內快元素在一行上顯示*/