前端 - css負(fù)邊距的問題？
問題描述
這里有兩個(gè)p, 都向左浮動(dòng)，其中sub 設(shè)置了margin-left:-100%; 請(qǐng)問為何會(huì)出現(xiàn)這樣的效果，sub能夠占據(jù)到main上面。
在線demo:http://codepen.io/anon/pen/zvJeNG
請(qǐng)問這個(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; }
問題解答
回答1：margin值是百分比數(shù)的時(shí)候，是相當(dāng)于元素的包含塊的width來計(jì)算的
你這兒的.sub margin-left:-100%的100% 是相對(duì)于sub的包含塊 body的width 來計(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的寬度，也就是說它等于body的寬度，所以，它就回到了最左邊，而sub的寬度為190px，那就是從最左邊開始排列，就是現(xiàn)在這個(gè)樣式。
相關(guān)文章：
1. javascript - 關(guān)于emoji是如何解析的呢？？2. css - 要實(shí)現(xiàn)這種磨砂效果，有什么好方法嗎3. java - Tomcat的Spring-MVC項(xiàng)目在重啟一段時(shí)間后變卡4. idea 編譯的java文件 外面直接運(yùn)行5. javascript - 最近用echarts.js做項(xiàng)目遇到一些問題！6. java - 用Redis實(shí)現(xiàn)分布式Session失效時(shí)間問題7. java - 如何動(dòng)態(tài)加載jdbc.properties8. 這樣的下三角氣泡框用純css3如何實(shí)現(xiàn)9. css - vue里局部引用的樣式怎么都成為全局的了？10. 正則表達(dá)式 - java獲得一個(gè)String字符串中第一個(gè)數(shù)字的下標(biāo)，并截取后面的6位和前面的地區(qū)
網(wǎng)公網(wǎng)安備