文章詳情頁

前端 - css負邊距的問題？

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

問題描述

這里有兩個p, 都向左浮動，其中sub 設置了margin-left:-100%; 請問為何會出現這樣的效果，sub能夠占據到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值是百分比數的時候，是相當于元素的包含塊的width來計算的

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

而-190px就只是190個像素

回答2：

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

CSS

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

相關文章：

1. 在mac下出現了兩個docker環境2. 利用IPMI遠程安裝centos報錯！3. 運行python程序時出現“應用程序發生異?！钡膬却驽e誤？4. 測試自動化html元素選擇器元素ID或DataAttribute [關閉]5. spring-mvc - spring-session-redis HttpSessionListener失效6. 淺談Vue使用Cascader級聯選擇器數據回顯中的坑7. javascript - 在 model里定義的引用表模型時，model為undefined。8. javascript - 最近用echarts做統計圖時遇到兩個問題！！9. mysql - 查詢修改數據庫優化問題吧10. java - Spring boot 讀取放在 jar 包外的，log4j 配置文件，系統有創建日志文件，不寫入日志信息。

排行榜

					
					spring-mvc - spring-session-redis HttpSessionListener失效
					1. 運行python程序時出現“應用程序發生異?！钡膬却驽e誤？
					2. 測試自動化html元素選擇器元素ID或DataAttribute [關閉]
					3. 利用IPMI遠程安裝centos報錯！
					4. 在mac下出現了兩個docker環境
					5. IOS app應用軟件的id號怎么查詢？比如百度貼吧的app-id=477927813
					6. 淺談Vue使用Cascader級聯選擇器數據回顯中的坑
					7. python 正則表達式提取
					8. java - Spring boot 讀取 放在 jar 包外的，log4j 配置文件，系統有創建日志文件，不寫入日志信息。
					9. 正在使用electron和node.js做桌面應用，需要實時監聽是否有網絡連接，node或者electron是否可以做到
					10. 
			熱門標簽

					
					PHP

					JavaScript

					HTML

					CSS

					java

					vue

					數據庫

					微信

					百度

					

午夜剧场伦理_日本一道高清_国产又黄又硬_91黄色网战_女同久久另类69精品国产_妹妹的朋友在线

前端 - css負邊距的問題？

前端 - css負邊距的問題？