html/css雜題

1、css選擇器：詳細（http://www.ruanyifeng.com/blog/2009/03/css_selectors.html）

　　派生選擇器：按標簽

　　類別選擇器：按class

　　ID選擇器：按ID

　　通用選擇器：* 匹配所有

　　屬性選擇器：按屬性，屬于css2，IE6不支持

　　以上五個為基本選擇器

　　　　后代選擇器【div span】；子元素選擇器【div > span】；群組選擇器【div,p,#my】；相鄰元素選擇器【div + span】

　　　　偽類選擇器：【div:first-child】【a:hover】css2

　　　　css3同級元素選擇器：【div ~ ul】匹配任何div元素后的同級元素ul

2、

.classA{ color:blue;}

.classB{ color:red;}

?

<p class='classB classA'> 123 </p>

答案：p為red，元素的屬性跟class屬性順序無關，跟class樣式順序有關。誰在最后就顯示誰

?

?

3、hover被訪問的樣式順序：L-V-H-A　　link visited hover active；

?

4、css的hack：詳細（http://blog.csdn.net/liu_rong_fei/article/details/51555438）

　　1.大部分特殊字符IE瀏覽器支持，其他主流瀏覽器firefox，chrome，opera，safari不支持 (opera可識別除外)。
　　2.\9??? ：所有IE瀏覽器都支持
　　3._和-? ：僅IE6支持
　　4.*???? ：IE6、E7支持
　　5.\0??? ：IE8、IE9支持，opera部分支持
　　6.\9\0? ：IE8部分支持、IE9支持
　　7.\0\9? ：IE8、IE9支持

?

　　#tip{?
　　　　background:blue;/*Firefox背景變藍色 所有瀏覽器都支持*/?
　　　　background:red\9;/*IE8背景變紅色 IE6、7、8、9支持覆蓋上面樣式*/?
　　　　*background:black;/*IE7背景變黑色 IE6、7支持又一次覆蓋上面樣式*/?
　　　　_background:orange;/*IE6背景變橘色 緊IE6支持又一次覆蓋上面樣式*/?
　　}

　　

　　基本是：ie6（_）；ie7（*）? ie8（\0） 所有ie(\9)

　　ie6不識別[!important]，ie7可以

?5、src和href

　　<link href="s.css" rel='stylesheet' /> ：瀏覽器會識別css文件并下載，同時不會停止當前文檔的加載。（故不用@import）

　　<script src="j.js">：瀏覽器會停止加載，并加載src中的資源并執行，完成后繼續加載。

?

?6、外邊框重合

　　相鄰的或父子元素之間的外邊距margin可以結合成一個單獨外邊距，規則為：

　　　　　都為正或都為負，去絕對值大的一個

　　　　　一正一負的取兩者和。

7、文字重疊

　　水平方向：letter-spacing設置為負數，則文字會水平方向上重疊

　　垂直方向：line-height設置為負數，則文字會在垂直方向上重疊

?

?8、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 比 內聯優先級高

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 控制表單控件的禁用狀態。

? ? :checked，單選框或復選框被選中

?

?

9、列出display的值，說明他們的作用。position的值， relative和absolute定位原點是？

? 1. block 象塊類型元素一樣顯示。

? none 缺省值。向行內元素類型一樣顯示。

? inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。

? list-item 象塊類型元素一樣顯示，并添加樣式列表標記。

? 2. position的值

? *absolute?

? ? ? ? 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。?

? *fixed （老IE不支持）

? ? ? ? 生成絕對定位的元素，相對于瀏覽器窗口進行定位。?

? * relative?

? ? ? ? 生成相對定位的元素，相對于其正常位置進行定位。?

? * static? 默認值。沒有定位，元素出現在正常的流中

? *（忽略 top, bottom, left, right z-index 聲明）。

? * inherit 規定從父元素繼承 position 屬性的值。

?

?

?10、瀏覽器的內核分別是什么?經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧 ？

? ? * IE瀏覽器的內核Trident、 Mozilla的Gecko、google的WebKit、Opera內核Presto；

? ? * png24為的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.

? ? * 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

? ? * IE6雙邊距bug:塊屬性標簽float后，又有橫行的margin情況下，在ie6顯示margin比設置的大。?

? ? ? 浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}?

?? ? 這種情況之下IE會產生20px的距離，解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)

? ? ? 漸進識別的方式，從總體中逐漸排除局部。?

? ? ? 首先，巧妙的使用“\9”這一標記，將IE游覽器從所有情況中分離出來。?

? ? ? 接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

? ? ? css

? ? ? ? ? .bb{

?? ? ? ? ? background-color:#f1ee18;/*所有識別*/

? ? ? ? ? .background-color:#00deff\9; /*IE6、7、8識別*/

? ? ? ? ? +background-color:#a200ff;/*IE6、7識別*/

? ? ? ? ? _background-color:#1e0bd1;/*IE6識別*/

? ? ? ? ? }?

? ? *? IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,

?? ? ? 也可以使用getAttribute()獲取自定義屬性;

?? ? ? Firefox下,只能使用getAttribute()獲取自定義屬性.?

?? ? ? 解決方法:統一通過getAttribute()獲取自定義屬性.

? ? *? IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;?

? ? ? Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.

? ? * （條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。

? ? * Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

? ? 超鏈接訪問過后hover樣式就不出現了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:

? ? L-V-H-A :? a:link {} a:visited {} a:hover {} a:active {}

?

?

?11、opacity和rgba()都可以設置元素透明，區別

　　opacity：可以作用到元素及所有子元素和內容

　　rgba()：不能作用到子元素，也不能作用到元素的文字

?

?

?

12、css的link和@import的區別：

　　link在不阻塞瀏覽器加載的情況下加載css文件

　　import會在頁面加載完成后再加載css文件，ie5+才支持

?

?

?

?

?

?

?