前端 - css負(fù)邊距的問(wèn)題？
問(wèn)題描述
這里有兩個(gè)p, 都向左浮動(dòng)，其中sub 設(shè)置了margin-left:-100%; 請(qǐng)問(wèn)為何會(huì)出現(xiàn)這樣的效果，sub能夠占據(jù)到main上面。
在線demo:http://codepen.io/anon/pen/zvJeNG
請(qǐng)問(wèn)這個(gè)負(fù)邊距有何妙用，為何-100% 和 -190px（p的寬度）效果截然不同呢？
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8' /> <title>Document</title></head><body> <p class='main'> this is main</p> <p class='sub'> this is sub </p> </body></html>
.main{ float:left; width:100%; background-color:aqua;}.sub{ float:left; width: 190px; margin-left:-100%; background-color:black; }
問(wèn)題解答
回答1：margin值是百分比數(shù)的時(shí)候，是相當(dāng)于元素的包含塊的width來(lái)計(jì)算的
你這兒的.sub margin-left:-100%的100% 是相對(duì)于sub的包含塊 body的width 來(lái)計(jì)算也就是body的寬度
而-190px就只是190個(gè)像素
回答2：1、這兩個(gè)p都設(shè)置了左浮動(dòng)，當(dāng)body的寬度足夠他們倆平排在一起的時(shí)候，他們一定會(huì)排在同一行。2、sub設(shè)置了-100%，這個(gè)100%是相對(duì)于它的父元素body的寬度，也就是說(shuō)它等于body的寬度，所以，它就回到了最左邊，而sub的寬度為190px，那就是從最左邊開(kāi)始排列，就是現(xiàn)在這個(gè)樣式。
相關(guān)文章：
1. android - NavigationView 的側(cè)滑菜單中如何保存新增項(xiàng)（通過(guò)程序添加）2. tp5 不同控制器中的變量調(diào)用問(wèn)題3. 微信小程序可以用gulp,webpack嗎？4. mysql服務(wù)無(wú)法啟動(dòng)1067錯(cuò)誤，誰(shuí)知道正確的解決方法？5. ueditor上傳服務(wù)器提示后端配置項(xiàng)沒(méi)有正常加載，求助！！！！！6. python - 為什么正常輸出中文沒(méi)有亂碼，zip函數(shù)之后出現(xiàn)中文編程unicode編碼的問(wèn)題，我是遍歷輸出的啊。7. 老師 我是一個(gè)沒(méi)有學(xué)過(guò)php語(yǔ)言的準(zhǔn)畢業(yè)生 我希望您能幫我一下8. 這段代碼既不提示錯(cuò)誤也看不到結(jié)果，請(qǐng)老師明示錯(cuò)在哪里，謝謝！9. php7.3.4中怎么開(kāi)啟pdo驅(qū)動(dòng)10. 提示語(yǔ)法錯(cuò)誤語(yǔ)法錯(cuò)誤: unexpected ’abstract’ (T_ABSTRACT)
網(wǎng)公網(wǎng)安備