網頁設計中margin怎麼用
- IT技術
- 關注:2.07W次
網頁佈局中margin也是必不可少的,那麼在網頁設計佈局中,margin應該怎樣使用呢?
操作方法
(01)首先,我們先設計一個div,並且給這個div添加一個id,id名隨意取。
(02)然後設置一下寬高,並且添加一個紅色的背景屬性值。
(03)默認情況下,這個div是靠近瀏覽器的頂部和左邊的。
(04)接着我們給這個div設置一下margin值,從左到右表示的是上邊,右邊,下邊,左邊的margin值。
(05)設置好之後,可以看到左邊和上邊都隔開了一定的距離,這就是margin值的用處,而下邊和右邊因為沒有其他div或者其他顏色,所以效果被忽略了。
(06)當然,margin值也可以分開寫,比如我只設置div的上邊的margin值,就可以使用margin-top,而右邊則可以使用margin-right,左邊則是margin-left,下邊則是margin-bottom。
(07)如圖,設置margin-top之後,只有上邊拉開了距離,而左邊並沒有拉開距離。
(08)接着我們再在網頁中添加一個div,並設置id為“you”。
(09)接着設置“you”這個div的寬高和背景。
(10)如圖所示,新添加一個div之後,如果沒有設置margin-bottom的值,兩個div就會連在一起。
(11)然後我們給上面的div,也就是“my”,設置margin-bottom。
(12)設置好之後,兩個div之間就會拉開距離,這樣就可以定位好div的位置。
(13)而如果我們給“my”設置好margin-bottom之後,又給“you”設置margin-top,又會有什麼結果呢?
(14)結果就是這樣:有兩個相鄰的div,如果一個div設置了margin-top,另一個設置了margin-bottom,則以它們之間值最大的為準。比如margin-top是50像素,margin-bottom是30像素,則間隔就是50像素,而不是兩個相加哦。瞭解這個之後,在網頁佈局中,我們只需要對其中一個設置就可以了。
- 文章版權屬於文章作者所有,轉載請註明 https://miaozhigu.com/sm/itjishu/8mydej.html