CSS易錯(cuò)題總結(jié)(更新中)

1解幼、CSS 指的是放仗?

Cascading Style Sheets

2润绎、在 HTML 文檔中,引用外部樣式表的正確位置是匙监?

<head>部分

3凡橱、 請(qǐng)判斷以下說法是否正確:如需定義元素內(nèi)容與邊框間的空間,可使用 padding 屬性亭姥,并可使用負(fù)值稼钩?

錯(cuò)誤。(margin可以达罗,padding不行)

4坝撑、如何產(chǎn)生帶有正方形項(xiàng)目的列表?

正確答案:list-style-type: square

5粮揉、下列哪個(gè)不屬于id與class之間的區(qū)別:

正確:id在文檔中只能使用一次巡李,而class可以多次使用

正確:id比class具有更高的樣式優(yōu)先級(jí)

正確:一個(gè)元素只能有一個(gè)id屬性值,卻可以擁有多個(gè)class屬性值

錯(cuò)誤:在class中可以定義:hover偽類扶认,在id中不能定義

解釋:在樣式表定義一個(gè)樣式的時(shí)候侨拦,可以定義id也可以定義class。

?1辐宾、在CSS文件里書寫時(shí)狱从,ID加前綴"#";CLASS用"."?

2叠纹、id一個(gè)頁面只可以使用一次季研;class可以多次引用。?

3誉察、ID是一個(gè)標(biāo)簽与涡,用于區(qū)分不同的結(jié)構(gòu)和內(nèi)容,就象名字持偏,如果一個(gè)屋子有2個(gè)人同名驼卖,就會(huì)出現(xiàn)混淆;class是一個(gè)樣式鸿秆,可以套在任何結(jié)構(gòu)和內(nèi)容上款慨,就象一件衣服;?

4谬莹、從概念上說就是不一樣的:id是先找到結(jié)構(gòu)/內(nèi)容檩奠,再給它定義樣式桩了;class是先定義好一種樣式,再套給多個(gè)結(jié)構(gòu)/內(nèi)容埠戳。

6井誉、在不考慮H5的情況下,下列哪些值是可以作為標(biāo)簽的type屬性的屬性值。()

a. text

b. submit

c. button

d. date

答案:abc

以下 input 類型是 HTML5 中的新類型:color整胃、date颗圣、datetime、datetime-local屁使、month在岂、week、time蛮寂、email蔽午、number、range酬蹋、search及老、tel 和 url。

7范抓、CSS中的width屬性并不總是有效的骄恶,如果對(duì)象是inline對(duì)象,width屬性就會(huì)被忽略匕垫。

內(nèi)聯(lián)元素的高度僧鲁、寬度及頂部和底部邊距不可設(shè)置;元素的寬度就是它包含的文字或圖片的寬度象泵,不可改變寞秃。

8、innerHTML单芜、innerText、outerHTML

例子:<div id="test"><span style="color:red">test1</span>test2</div>

test.innerHTML:

也就是從對(duì)象的起始位置到終止位置的全部?jī)?nèi)容,包括Html標(biāo)簽犁柜。

上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”洲鸠。

test.innerText:

從起始位置到終止位置的內(nèi)容,?但它去除Html標(biāo)簽

上例中的text.innerTest的值也就是“test1?test2”,?其中span標(biāo)簽去除了。

test.outerHTML:

除了包含innerHTML的全部?jī)?nèi)容外,?還包含對(duì)象標(biāo)簽本身馋缅。

上例中的text.outerHTML的值也就是<div id="test"><span style="color:red"> test1 </span> test2 </div>

8扒腕、標(biāo)準(zhǔn)盒子模型和IE盒子模型

IE盒子模型和標(biāo)準(zhǔn)盒子模型都是由四個(gè)部分組成的:margin,border,padding,content這四個(gè)部分!S┿病瘾腰!

不同的是在標(biāo)準(zhǔn)盒子模型中content是一個(gè)獨(dú)立的部分不包含其他部分!覆履!但是在IE盒子模型中content包含了border,padding,是一個(gè)總體的概念LE琛费薄!

9、css中clear的作用栖雾?

clear : none | left | right | both.

對(duì)于CSS的清除浮動(dòng)(clear)楞抡,一定要牢記:這個(gè)規(guī)則只能影響使用清除的元素本身,不能影響其他元素析藕。

10召廷、

11、form表單中input元素的readonly與disabled屬性:

disabled指當(dāng) input 元素加載時(shí)禁用此元素账胧。input內(nèi)容不會(huì)隨著表單提交

readonly規(guī)定輸入字段為只讀竞慢。input內(nèi)容會(huì)隨著表單提交。

無論設(shè)置readonly還是disabled治泥,通過js腳本都能更改input的value

12筹煮、DHTML

DHTML實(shí)現(xiàn)了網(wǎng)頁從Web服務(wù)器下載后無需再經(jīng)過服務(wù)的處理,而在瀏覽器中直接動(dòng)態(tài)地更新網(wǎng)頁的內(nèi)容车摄、排版樣式和動(dòng)畫的功能寺谤。例如,當(dāng)鼠標(biāo)指針移到文章段落中時(shí)吮播,段落能夠變成藍(lán)色变屁,或者當(dāng)鼠標(biāo)指針移到一個(gè)超級(jí)鏈接上時(shí),會(huì)自動(dòng)生成一個(gè)下拉式子鏈接目錄等意狠。

包括:

①動(dòng)態(tài)內(nèi)容(DynamicContent):動(dòng)態(tài)地更新網(wǎng)頁內(nèi)容粟关,可“動(dòng)態(tài)”地插入、修改或刪除網(wǎng)頁的元件环戈,如文字闷板、圖像、標(biāo)記等院塞。

動(dòng)態(tài)排版樣式(Dynamic Style Sheets):W3C的CSS樣式表提供了設(shè)定HTML標(biāo)記的字體大小遮晚、字形、樣式拦止、粗細(xì)县遣、文字顏色、行高度汹族、加底線或加中間橫線萧求、縮排、與邊緣距離顶瞒、靠左右或置中夸政、背景圖片或顏色等排版功能,而“動(dòng)態(tài)排版樣式”即可以“動(dòng)態(tài)”地改變排版樣式榴徐。

13守问、置換元素

特殊的元素:如img|input|select|textarea|button|label等匀归,他們被稱為可置換元素。

他們區(qū)別一般inline元素(相對(duì)而言酪碘,稱non-replaced element)是:這些元素?fù)碛袃?nèi)在尺寸(intrinsic dimensions),他們可以設(shè)置width/height屬性朋譬。

他們的性質(zhì)同設(shè)置了display:inline-block的元素一致。

14兴垦、css屬性overflow屬性

參數(shù)是scroll時(shí)候徙赢,必會(huì)出現(xiàn)滾動(dòng)條。

參數(shù)是auto時(shí)候探越,子元素內(nèi)容大于父元素時(shí)出現(xiàn)滾動(dòng)條狡赐。

參數(shù)是visible時(shí)候,溢出的內(nèi)容出現(xiàn)在父元素之外钦幔。

參數(shù)是hidden時(shí)候枕屉,溢出隱藏。

15鲤氢、下面哪個(gè)屬性不會(huì)讓 div 脫離文檔流(normal flow)搀擂?答案c

position: absolute;

position: fixed;

position: relative;

float: left;

css的定位機(jī)制有三種,分別是1:文檔流卷玉,2:浮動(dòng)(float)哨颂,3定位(position)

文檔流的意義就是按照HTML里面的寫法就是從上到下,從左到右的排版布局;

A:position: absolute;

生成絕對(duì)定位的元素相种,相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位威恼;都絕對(duì)定位了,肯定脫離了文檔流寝并。箫措。

B:position: fixed;

生成絕對(duì)定位的元素,相對(duì)于瀏覽器窗口進(jìn)行定位;相對(duì)于瀏覽器了衬潦,也和正常順序排下來沒什么關(guān)系斤蔓。。

C:position: relative;

生成相對(duì)定位的元素镀岛,相對(duì)于其正常位置進(jìn)行定位弦牡。生成相對(duì)定位,也就是說還在原本的上下左右之間哎媚,上下左右的元素都不變喇伯,so這個(gè)沒有能脫離文檔流喊儡。拨与。就這個(gè)了

D:float: left;都浮動(dòng)出去了,還上哪保持原位置去

16艾猜、要運(yùn)用css3動(dòng)畫买喧,你需要運(yùn)用@keyframes規(guī)則 animation屬性

17捻悯、display: none 和 visibility:hidden

display: none;不為被隱藏的對(duì)象保留其物理空間淤毛;

visibility:hidden;所占據(jù)的空間位置仍然存在,僅為視覺上的完全透明今缚;

repaint(重繪) ,repaint發(fā)生更改時(shí)低淡,元素的外觀被改變姓言,且在沒有改變布局的情況下發(fā)生,如改變outline,visibility,background color蔗蹋,不會(huì)影響到dom結(jié)構(gòu)渲染何荚。

reflow(渲染),與repaint區(qū)別就是他會(huì)影響到dom的結(jié)構(gòu)渲染猪杭,同時(shí)他會(huì)觸發(fā)repaint餐塘,他會(huì)改變他本身與所有父輩元素(祖先),這種開銷是非常昂貴的皂吮,導(dǎo)致性能下降是必然的戒傻,頁面元素越多效果越明顯。

總結(jié):

display:none改變了dom的結(jié)構(gòu)蜂筹,所以產(chǎn)生了reflow visibility:hidden沒有改變dom結(jié)構(gòu)需纳,觸發(fā)repaint

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市狂票,隨后出現(xiàn)的幾起案子候齿,更是在濱河造成了極大的恐慌,老刑警劉巖闺属,帶你破解...
    沈念sama閱讀 216,997評(píng)論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件慌盯,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡掂器,警方通過查閱死者的電腦和手機(jī)亚皂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,603評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來国瓮,“玉大人灭必,你說我怎么就攤上這事∧四。” “怎么了禁漓?”我有些...
    開封第一講書人閱讀 163,359評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)孵睬。 經(jīng)常有香客問我播歼,道長(zhǎng),這世上最難降的妖魔是什么掰读? 我笑而不...
    開封第一講書人閱讀 58,309評(píng)論 1 292
  • 正文 為了忘掉前任秘狞,我火速辦了婚禮叭莫,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘烁试。我一直安慰自己雇初,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,346評(píng)論 6 390
  • 文/花漫 我一把揭開白布减响。 她就那樣靜靜地躺著靖诗,像睡著了一般。 火紅的嫁衣襯著肌膚如雪支示。 梳的紋絲不亂的頭發(fā)上呻畸,一...
    開封第一講書人閱讀 51,258評(píng)論 1 300
  • 那天,我揣著相機(jī)與錄音悼院,去河邊找鬼伤为。 笑死,一個(gè)胖子當(dāng)著我的面吹牛据途,可吹牛的內(nèi)容都是我干的绞愚。 我是一名探鬼主播,決...
    沈念sama閱讀 40,122評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼颖医,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼位衩!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起熔萧,我...
    開封第一講書人閱讀 38,970評(píng)論 0 275
  • 序言:老撾萬榮一對(duì)情侶失蹤糖驴,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后佛致,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體贮缕,經(jīng)...
    沈念sama閱讀 45,403評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,596評(píng)論 3 334
  • 正文 我和宋清朗相戀三年俺榆,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了感昼。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,769評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡罐脊,死狀恐怖定嗓,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情萍桌,我是刑警寧澤宵溅,帶...
    沈念sama閱讀 35,464評(píng)論 5 344
  • 正文 年R本政府宣布,位于F島的核電站上炎,受9級(jí)特大地震影響恃逻,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,075評(píng)論 3 327
  • 文/蒙蒙 一辛块、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧铅碍,春花似錦润绵、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,705評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至烦绳,卻和暖如春卿捎,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背径密。 一陣腳步聲響...
    開封第一講書人閱讀 32,848評(píng)論 1 269
  • 我被黑心中介騙來泰國打工午阵, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人享扔。 一個(gè)月前我還...
    沈念sama閱讀 47,831評(píng)論 2 370
  • 正文 我出身青樓底桂,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國和親惧眠。 傳聞我的和親對(duì)象是個(gè)殘疾皇子籽懦,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,678評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,751評(píng)論 1 92
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表氛魁,主要用...
    寥寥十一閱讀 1,833評(píng)論 0 6
  • 1.塊級(jí)元素和行內(nèi)元素 塊級(jí)(block-level)元素暮顺;行內(nèi)(內(nèi)聯(lián)、inline-level)元素秀存。 塊元素的...
    饑人谷_小侯閱讀 2,002評(píng)論 1 4
  • FreeCodeCamp - HTML5 and CSS 發(fā)現(xiàn)原來在另外一臺(tái)電腦學(xué) FreeCodeCamp 的時(shí)...
    付林恒閱讀 9,368評(píng)論 2 17
  • 大家好
    董琳霖閱讀 154評(píng)論 0 0