首頁 > web前端 > css教學 > 主體

css margin-left和margin-right使用法總結

伊谢尔伦
發布: 2017-06-01 14:40:31
原創
9123 人瀏覽過

一般在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.N11121111112121112000000000000000000 對外的物件上。

參數介紹   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-left和margin-right使用法總結CSS佈局各種居中總結(margin-right,margin-left)

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

3. css margin-left和margin-right使用法總結CSS實作頁面各種列佈局的範例(margin-right,margin-left)

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

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

margin-left和margin-right屬性相關問答

1. css("margin- left")位元null??? 迷惘了

2. 

#margin-right 不起作用?

3. 下面的程式碼,已經用了margin-left:auto,為什麼還是沒辦法居中?

【相關建議】

1.  #css margin外邊距屬性與用法總結

2. css margin-top使用中常遇到的問題總結

#

以上是css margin-left和margin-right使用法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!