文章詳情頁

前端 - css負邊距的問題？

瀏覽：111日期：2023-07-21 13:08:19

問題描述

這里有兩個p, 都向左浮動，其中sub 設(shè)置了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; }

前端 - css負邊距的問題？

問題解答

回答1：

margin值是百分比數(shù)的時候，是相當(dāng)于元素的包含塊的width來計算的

你這兒的.sub margin-left:-100%的100% 是相對于sub的包含塊 body的width 來計算也就是body的寬度

而-190px就只是190個像素

回答2：

1、這兩個p都設(shè)置了左浮動，當(dāng)body的寬度足夠他們倆平排在一起的時候，他們一定會排在同一行。2、sub設(shè)置了-100%，這個100%是相對于它的父元素body的寬度，也就是說它等于body的寬度，所以，它就回到了最左邊，而sub的寬度為190px，那就是從最左邊開始排列，就是現(xiàn)在這個樣式。

CSS

上一條：css3 - 手機端幻燈的實現(xiàn)下一條：css3 - flex布局問題

相關(guān)文章：

1. java - new + 類名，一定需要申明一個對象嗎？2. java - mac下配置ndk環(huán)境變量3. 為啥最大化個窗口還得找一堆理由?4. css - psd設(shè)計稿給的是1920寬的，而我的電腦是1600寬的，那我在寫代碼時，是不是每個寬度都要計算調(diào)整5. css3 - 如圖的flex骰子布局是怎么實現(xiàn)的？6. node.js - 用nodejs 的node-xlsx模塊去讀取excel中的數(shù)據(jù)，可是讀取出來的日期是數(shù)字，請問該如何讀取日期呢？7. HTML表單操作標(biāo)簽調(diào)用父相對URL8. javascript - 根據(jù)不同數(shù)據(jù)顯示不同內(nèi)容9. javascript - 在 vue里面用import引入js文件，結(jié)果為undefined10. android - 京東app下面的table背景怎么實現(xiàn)的？