css盒模型中margin很牛逼
生活随笔
收集整理的這篇文章主要介紹了
css盒模型中margin很牛逼
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
css盒子模型,說簡單也簡單,用的時候也有不簡單的。
其中margin的值可以為負值,并且為了實現(xiàn)margin,忽略父級的padding、border、甚至定位。這在布局上很有用,要注意。
------------
比如,div1,嵌套div2。按照直覺,div1有border和padding,里面的內(nèi)容頂?shù)筋^,不能超過外面的盒子(div1)吧?可惜不是,只要div2的margin是負的,如圖浮動出了一樣。
下面再看。
1 <style type="text/css"> 2 div { 3 width: 100px; 4 height: 100px; 5 } 6 #div1 { 7 background-color: #F00; 8 border:100px solid #345; 9 padding:100px; 10 position: relative; 11 float: right; 12 } 13 #div2 { 14 background-color: #0F0; 15 /*margin-left: -200px;*/ 16 position: absolute; 17 left: 0; 18 } 19 </style>div1是相對定位,padding和border都是100px,在谷歌瀏覽器中,div2為絕對定位,left為0,就是div2在div1中,同時舉例左邊為0,按照自然直覺,應(yīng)該是padding后為0,但是實驗得知是,靠近border內(nèi)側(cè)為0,也就是說,絕對定位是跟外面的容器比,但是不看外面容器的padding,而是以border為參考。
?
再加上margin-left:-200px;那么,div2還要向左再走200px;
本文轉(zhuǎn)載于:猿2048https://www.mk2048.com/blog/blog.php?id=bbjiib&title=css盒模型中margin很牛逼
總結(jié)
以上是生活随笔為你收集整理的css盒模型中margin很牛逼的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 什么是web标准??
- 下一篇: 从零开始的全栈工程师——html篇1.2