盒子模型,top和margin-top
生活随笔
收集整理的這篇文章主要介紹了
盒子模型,top和margin-top
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.
標準盒子模型：
width只是內容的寬度。
元素的總寬度=width + padding*2 +border*2 +margin*2。
IE盒子模型：
width=內容的寬度 + padding*2 + border*2。
元素的總寬度=width +margin*2。
2.top
top 屬性規定元素的頂部邊緣。該屬性定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
注釋：如果 "position" 屬性的值為 "static"，那么設置 "top" 屬性不會產生任何效果。position必須設置。
<html> <head> <style type="text/css"> img { position:absolute; top:5px; } </style> </head><body> <img src="/i/w3school_logo_white.gif" /> <h1>This is a heading</h1> </body> </html>效果圖：
可以看出，是相對他的父元素定位的。
2.margin-top
設置元素的上外邊距。
<html> <head> <style type="text/css"> p.topmargin {background:yellow;margin-top: 100px;} p.compare{background:blue;} </style> </head><body> <p class="compare" >這個段落沒有指定外邊距。</p> <p class="topmargin">這個段落帶有指定的上外邊距。</p> </body> </html>效果圖：
可以看出：margin-top外邊距相對的是離他最近的元素。
?
轉載于:https://www.cnblogs.com/sunmarvell/p/9124567.html
總結
以上是生活随笔為你收集整理的盒子模型,top和margin-top的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微信小程序开发：学习笔记[8]——页面跳
- 下一篇： Observer（订阅与发布）