html/css杂题
1、css選擇器：詳細（http://www.ruanyifeng.com/blog/2009/03/css_selectors.html）
派生選擇器：按標(biāo)簽
類別選擇器：按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屬性順序無關(guān)，跟class樣式順序有關(guān)。誰在最后就顯示誰
?
?
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文件并下載，同時不會停止當(dāng)前文檔的加載。（故不用@import）
<script src="j.js">：瀏覽器會停止加載，并加載src中的資源并執(zhí)行，完成后繼續(xù)加載。
?
?6、外邊框重合
相鄰的或父子元素之間的外邊距margin可以結(jié)合成一個單獨外邊距，規(guī)則為：
都為正或都為負，去絕對值大的一個
一正一負的取兩者和。
7、文字重疊
水平方向：letter-spacing設(shè)置為負數(shù)，則文字會水平方向上重疊
垂直方向：line-height設(shè)置為負數(shù)，則文字會在垂直方向上重疊
?
?8、CSS 選擇符有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計算？ CSS3新增偽類有那些？
? ? * ? 1.id選擇器（ # myid）
? ? ? ? 2.類選擇器（.myclassname）
? ? ? ? 3.標(biāo)簽選擇器（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 ;
? ? * ? 優(yōu)先級就近原則，樣式定義最近者為準(zhǔn);
? ? * ? 載入樣式以最后載入的定位為準(zhǔn);
優(yōu)先級為:
?? ? ? !important >? id > class > tag ?
?? ? ? important 比 內(nèi)聯(lián)優(yōu)先級高
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 控制表單控件的禁用狀態(tài)。
? ? :checked，單選框或復(fù)選框被選中
?
?
9、列出display的值，說明他們的作用。position的值， relative和absolute定位原點是？
? 1. block 象塊類型元素一樣顯示。
? none 缺省值。向行內(nèi)元素類型一樣顯示。
? inline-block 象行內(nèi)元素一樣顯示，但其內(nèi)容象塊類型元素一樣顯示。
? list-item 象塊類型元素一樣顯示，并添加樣式列表標(biāo)記。
? 2. position的值
? *absolute?
? ? ? ? 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。?
? *fixed （老IE不支持）
? ? ? ? 生成絕對定位的元素，相對于瀏覽器窗口進行定位。?
? * relative?
? ? ? ? 生成相對定位的元素，相對于其正常位置進行定位。?
? * static? 默認值。沒有定位，元素出現(xiàn)在正常的流中
? *（忽略 top, bottom, left, right z-index 聲明）。
? * inherit 規(guī)定從父元素繼承 position 屬性的值。
?
?
?10、瀏覽器的內(nèi)核分別是什么?經(jīng)常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧 ？
? ? * IE瀏覽器的內(nèi)核Trident、 Mozilla的Gecko、google的WebKit、Opera內(nèi)核Presto；
? ? * png24為的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8.
? ? * 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統(tǒng)一。
? ? * IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。?
? ? ? 浮動ie產(chǎn)生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}?
?? ? 這種情況之下IE會產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式控制中加入 ——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個符號只有ie6會識別)
? ? ? 漸進識別的方式，從總體中逐漸排除局部。?
? ? ? 首先，巧妙的使用“\9”這一標(biāo)記，將IE游覽器從所有情況中分離出來。?
? ? ? 接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經(jīng)獨立識別。
? ? ? css
? ? ? ? ? .bb{
?? ? ? ? ? background-color:#f1ee18;/*所有識別*/
? ? ? ? ? .background-color:#00deff\9; /*IE6、7、8識別*/
? ? ? ? ? +background-color:#a200ff;/*IE6、7識別*/
? ? ? ? ? _background-color:#1e0bd1;/*IE6識別*/
? ? ? ? ? }?
? ? *? IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,
?? ? ? 也可以使用getAttribute()獲取自定義屬性;
?? ? ? Firefox下,只能使用getAttribute()獲取自定義屬性.?
?? ? ? 解決方法:統(tǒng)一通過getAttribute()獲取自定義屬性.
? ? *? IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;?
? ? ? Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.
? ? * （條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數(shù)。
? ? * Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
? ? 超鏈接訪問過后hover樣式就不出現(xiàn)了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:
? ? L-V-H-A :? a:link {} a:visited {} a:hover {} a:active {}
?
?
?11、opacity和rgba()都可以設(shè)置元素透明，區(qū)別
opacity：可以作用到元素及所有子元素和內(nèi)容
rgba()：不能作用到子元素，也不能作用到元素的文字
?
?
?
12、css的link和@import的區(qū)別：
link在不阻塞瀏覽器加載的情況下加載css文件
import會在頁面加載完成后再加載css文件，ie5+才支持
?
?
?
?
?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/laojun/p/8288896.html
總結(jié)
以上是生活随笔為你收集整理的html/css杂题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小米激光投影仪1S和极米H3S对比谁更值
- 下一篇： 路由器架设虚拟服务器让外网访问到本地网站