前端 - css負邊距的問題？
問題描述
這里有兩個p, 都向左浮動，其中sub 設置了margin-left:-100%; 請問為何會出現(xiàn)這樣的效果，sub能夠占據(jù)到main上面。
在線demo:http://codepen.io/anon/pen/zvJeNG
請問這個負邊距有何妙用，為何-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ù)的時候，是相當于元素的包含塊的width來計算的
你這兒的.sub margin-left:-100%的100% 是相對于sub的包含塊 body的width 來計算也就是body的寬度
而-190px就只是190個像素
回答2：1、這兩個p都設置了左浮動，當body的寬度足夠他們倆平排在一起的時候，他們一定會排在同一行。2、sub設置了-100%，這個100%是相對于它的父元素body的寬度，也就是說它等于body的寬度，所以，它就回到了最左邊，而sub的寬度為190px，那就是從最左邊開始排列，就是現(xiàn)在這個樣式。
相關文章：
1. javascript - 在top.jsp點擊退出按鈕后，right.jsp進行頁面跳轉(zhuǎn)，跳轉(zhuǎn)到login.jsp2. android - 哪位大神知道java后臺的api接口的對象傳到前端后輸入日期報錯，是什么情況？求大神指點3. java - spring-data Jpa 不需要執(zhí)行save 語句，Set字段就可以自動執(zhí)行保存的方法？求解4. css3 - 在sublime text里， 如何讓emmet生成的帶前綴css屬性垂直對齊？5. mac連接阿里云docker集群，已經(jīng)卡了2天了，求問？6. [前端求職必看]前端開發(fā)面試題與答案精選_擴展問題7. javascript - js 有什么優(yōu)雅的辦法實現(xiàn)在同時打開的兩個標簽頁間相互通信？8. javascript - jquery怎么給select option一個點擊時觸發(fā)的事件,如圖 如果選擇自定義觸發(fā)一個時間？9. css3 - Typecho 后臺部分表單按鈕在 Chrome 下出現(xiàn)靈異動畫問題，求解決10. html - CSS如何處理圖片縮放問題？
網(wǎng)公網(wǎng)安備