首頁 > web前端 > html教學 > HTML裡怎麼使用margin 0 auto

HTML裡怎麼使用margin 0 auto

php中世界最好的语言
發布: 2017-11-23 17:56:07
原創
9609 人瀏覽過

margin是一個很重要的屬性,那麼在HTML裡怎麼使用margin 0 auto呢?我們今天就好好介紹一下margin:0 auto,下面給大家舉一個小列子

margin設定物件外邊距,如果我們給DIV設定一條邊框線(border)樣式後,在DW軟體即可看出margin設定值其實是在邊框外距離,此樣式設定物件(DIV)之間間距的樣式。

margin:0 auto作用語法 

1、margin:0 auto介紹

margin:0 auto 設定物件上下間距為0,左右自動。

可分割:margin:0 auto 0 auto(上下)

也可分割為:margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;

2、作用

對DIV設定margin:0 auto樣式,是為了讓DIV在瀏覽器中水平居中。佈局居中、水平居中,均加入margin:0 auto即可。

關節點:auto(自動、自適應) 

假如一個DIV我們設定寬度為500px,然後設定margin:0 auto樣式後,假如你瀏覽器視窗寬度為1000px寬,這時候此DIV靠左和靠右間距為(auto)這個時候瀏覽器會自動辨別DIV靠左和靠右各250px寬度間距,此時這個DIV盒子自然而然就水平居中瀏覽器中。

為什麼要設定margin:0 auto?

設定此樣式讓DIV佈局水平居中於瀏覽器中,目的就是相容各大瀏覽器讓佈局居中。如果不加margin:0 auto CSS樣式,會造成佈局在有的瀏覽器中居中有的瀏覽器靠左。

禁:如果要讓DIV佈局居中瀏覽器中,加入margin:0 auto就不能加入float浮動樣式,避免邏輯錯誤,造成佈局居中不相容。

相信透過我們的介紹,你對於margin 0 auto這個屬性已經很熟練的掌握了,更多精彩請關注php中文網其它相關文章!

相關閱讀:

HTML怎麼設定網頁背景圖

#css的cursor屬性怎麼設定

CSS裡怎麼使用border-radius

以上是HTML裡怎麼使用margin 0 auto的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板