課程
/前端開發(fā)
/HTML/CSS
/初識HTML(5)+CSS(3)
為什么這里不能設(shè)置成百分之百呢?
2020-09-15
源自:初識HTML(5)+CSS(3) 13-9
正在回答
因?yàn)樵O(shè)置了absolute的元素脫離的文檔流 飄起來了?
在此處,設(shè)置成100%和設(shè)置成200px的效果是一樣的。但是你會發(fā)現(xiàn)紅框無法重合,原因通俗來講是:box4是box3的子元素,box4的左上角那個像素點(diǎn)與box3內(nèi)的元素的最左邊(而非box3的邊框)的像素重合·,這樣導(dǎo)致boxd4的邊框的最右端比box3的邊框的最右端多出2個像素(div中border設(shè)為2px時多出2個像素點(diǎn),若border設(shè)為1px時看起來多出來1個像素點(diǎn))。但你發(fā)現(xiàn)多出來不止2個像素,其實(shí)就是2個像素,看起來中間有一條白線的原因是瀏覽器的顯示問題,box3最右邊的那條邊框與box4最右邊的那條邊框就是緊挨的,若是想仔細(xì)觀察可以放大瀏覽器(按住crtl加滾輪),會發(fā)現(xiàn)在放大過程中那條白線時有時無,實(shí)際上是沒有的。若是想讓他們完全對齊,可以在box4的css里加一個偏移:margin-left:-2px;其中2與其父類div里border屬性對應(yīng)。
至于為什么那條白縫在放大時時有時無,那我作為初學(xué)者也不知道?。
可能是
box3是相對位置(position:relative)
box4是絕對位置(position:absolute)
的原因,你看兩個方框左邊都不對齊
舉報
HTML(5)+CSS(3)基礎(chǔ)教程8小時帶領(lǐng)大家步步深入學(xué)習(xí)標(biāo)簽用法和意義
3 回答為什么要設(shè)置width:200px;這個來定寬呢?
1 回答為什么不是width:200px
1 回答為什么width設(shè)置成30px啊
4 回答box3為什么要設(shè)置為relative呢,設(shè)置成absolute也能達(dá)到效果???
1 回答為什么頁面內(nèi)百度打不開
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2020-09-23
因?yàn)樵O(shè)置了absolute的元素脫離的文檔流 飄起來了?
2020-09-19
在此處,設(shè)置成100%和設(shè)置成200px的效果是一樣的。但是你會發(fā)現(xiàn)紅框無法重合,原因通俗來講是:box4是box3的子元素,box4的左上角那個像素點(diǎn)與box3內(nèi)的元素的最左邊(而非box3的邊框)的像素重合·,這樣導(dǎo)致boxd4的邊框的最右端比box3的邊框的最右端多出2個像素(div中border設(shè)為2px時多出2個像素點(diǎn),若border設(shè)為1px時看起來多出來1個像素點(diǎn))。但你發(fā)現(xiàn)多出來不止2個像素,其實(shí)就是2個像素,看起來中間有一條白線的原因是瀏覽器的顯示問題,box3最右邊的那條邊框與box4最右邊的那條邊框就是緊挨的,若是想仔細(xì)觀察可以放大瀏覽器(按住crtl加滾輪),會發(fā)現(xiàn)在放大過程中那條白線時有時無,實(shí)際上是沒有的。若是想讓他們完全對齊,可以在box4的css里加一個偏移:margin-left:-2px;其中2與其父類div里border屬性對應(yīng)。
至于為什么那條白縫在放大時時有時無,那我作為初學(xué)者也不知道?。
2020-09-16
可能是
box3是相對位置(position:relative)
box4是絕對位置(position:absolute)
的原因,你看兩個方框左邊都不對齊