css中margin-left和margin-right的使用方法有哪幾種

這篇文章主要講解了“css中margin-left和margin-right的使用方法有哪幾種”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css中margin-left和margin-right的使用方法有哪幾種”吧！

　　一般在css樣式中，使用margin屬性來設置外邊距。如果只需要一邊的外邊距，可以使用單邊外邊距屬性為元素單邊上的外邊距設置值。使用 margin-left 屬性設置元素的左外邊距。使用margin-right 屬性設置元素的右外邊距。它們的默認值都為0。在具體的實際使用中可以設置具體的單位值，也可以設置為百分比的形式。本文就來總結一下 margin-left 和 margin-right 的使用方式。

一、關于 margin-left 屬性的使用

　　1. CSS margin 淺析

　　margin-left負值結合浮動實現不改變DOM結構的流體布局。當margin屬性的值為百分數時，其總是以父元素的width為基數進行計算。

　　2. CSS備忘(margin-left)

　　設置外邊距： margin-top,margin-left,margin-right，margin-bottom

　　p背景單張鋪滿設置：width: 30px; height: 30px; line-height: 30px; background-image: url(../image/lzhf/one.png); background-repeat: no-repeat; background-size: 100% auto;

　　3. margin-left實例用法

　　檢索或設置對象左邊的外延邊距。參數介紹 auto : 　值被設置為相對邊的值。length : 　由浮點數字和單位標識符組成的長度值 | 或者百分數。百分數是基于父對象的高度。

　　說明 檢索或設置對象左邊的外延邊距。內聯對象要使用該屬性，必須先設定對象的height或width屬性，或者設定position屬性為absolute。在IE4+，margin屬性不可用于td和tr對象。

　　外延邊距始終透明。 對應的腳本特性為marginLeft。

二、關于 margin-right 屬性的使用

　　1. 詳解CSS中三種基本的定位機制(margin-right，margin-left)

　　CSS中首選的讓元素水平居中的方法就是使用margin屬性—將元素的margin-left和margin-right屬性設置為auto即可。在實際使用中，我們可以為這些需要居中的元素創建一個起容器作用的p。需要特別注意的一點就是，必須為該容器指定寬度。

　　2. CSS布局各種居中總結(margin-right，margin-left)

　　居中是我們使用css來布局時常遇到的情況。使用css來進行居中時，有時一個屬性就能搞定，有時則需要一定的技巧才能兼容到所有瀏覽器，具體來說就是把要居中的元素的margin-left和margin-right都設為auto，此方法只能進行水平的居中，且對浮動元素或絕對定位元素無效。

　　3. CSS實現頁面各種列布局的示例(margin-right，margin-left)

　　一列布局需要掌握3個知識點：標準文檔流，其中又包含了塊級元素和行級元素，還有margin屬性，可以說實現一列布局的關鍵代碼就是由margin屬性實現的，通過設置margin:0 auto;來實現水平居中，auto就是它會根據瀏覽器的寬度自動設置兩邊的外邊距。要設置margin，你首先得有一個盒子模型，比如這里的p，然后設置它的長寬，有一個固定的大小，才可以實現居中。

　　雙飛翼布局 這是主列的margin-left與margin-right比左右兩列的寬度大一點，則可以設置出來主列與子列之間的間隙。

感謝各位的閱讀，以上就是“css中margin-left和margin-right的使用方法有哪幾種”的內容了，經過本文的學習后，相信大家對css中margin-left和margin-right的使用方法有哪幾種這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！