網頁CSS樣式 詳述margin樣式屬性

2021-09-23 05:19:17 字數 3279 閱讀 1723

用於在乙個宣告中設定所有外邊距的寬度,或者設定各邊上外邊距的寬度。該屬性有多個值。

瀏覽器計算外邊距(css中auto一般是自動適應的意思,auto在水平方向上的作用是始終居中,但在垂直方向上不起作用,相當於0值)

瀏規定以具體單位計的外邊距值,比如畫素、厘公尺等。預設值是0px。注:允許使用負值,不過要謹慎使用

比如這是margin:0 auto的**及結果:

>

>

charset

="utf-8"

>

>

塊級元素水平居中title

>

>

.out

.instyle

>

head

>

>

class

="out"

>

class

="in"

>

div>

div>

body

>

html

>

結果圖如下:

而margin:auto auto的**及結果與上述一樣,這裡就不多增加同樣的內容了,只需將margin值改一改一試便知。

規定基於父元素的寬度的百分比的外邊距

規定應該從父元素繼承外邊距。注:ie瀏覽器不支援inherit屬性值

上述2,3,4總示例如下:

>

>

charset

="utf-8"

>

>

margin-toptitle

>

type

="text/css"

>

div.two

style

>

head

>

>

class

="one"

>

第乙個divdiv

>

class

="two"

>

第二個divdiv

>

class

="three"

>

第三個divdiv

>

body

>

html

>

水平居中顯示,上面介紹auto值時已經做了較為詳細的解釋,這裡是因為margin:0 auto應用十分廣泛,水平居中一般都這麼寫,所以專門列為一項注意事項

取消瀏覽器為html文件中各標籤設定的margin預設值,方便後面設定

**如下:

>

>

charset

="utf-8"

>

>

margin-toptitle

>

type

="text/css"

>

*div,p

style

>

head

>

>

>

第乙個divdiv

>

>

第二個divp

>

body

>

html

>

結果圖如下:

塊級元素的垂直相鄰外邊距會合併(即外邊距合併),合併後的外邊距間距等於兩個外邊距的較大者;行內元素實際上不佔上下外邊距;行內元素的左右外邊距不會合併;浮動元素的外邊距也不會合併。

外邊距合併示例**如下:

>

>

charset

="utf-8"

>

>

外邊距的合併title

>

type

="text/css"

>*p

#one

#two

style

>

head

>

>

"one"

>

文字段1p

>

"two"

>

文字段2p

>

/>

>

外邊距的合併:上面id為one的文段下外邊距為100px,id為two的文段上外邊距為50px,但從顯示的結果上看兩者之間的間距取了其中的最大值,而不是兩者之和,這就是外邊距的合併span

>

body

>

html

>

結果圖如下:

行內元素外邊距示例如下:

>

>

charset

="utf-8"

>

type

="text/css"

>

*div

style

>

head

>

>

style

="margin-left

:100px;

margin-right

:100px;

">

第乙個div標籤

div>

style

="margin-left

:100px;

">

第二個div標籤

div>

body

>

html

>

CSS之margin樣式屬性

相對於同級的標籤設定偏移量 doctype html utf 8 title span in style head border 1px solid red height 300px width 300px margin bottom 20px in style background color b...

CSS 為網頁新增樣式

css全稱為 層疊樣式表 cascading style sheets 它主要是用於定義html內容在瀏覽器內的顯示樣式,如文字大小 顏色 字型加粗等。如下列 p使用css樣式的乙個好處是通過定義某個樣式,可以讓不同網頁位置的文字有著統一的字型 字型大小或者顏色等。為什麼使用css樣式來設定網頁的外...

CSS 網頁的樣式美化

內部樣式表 不用通過引入css檔案來設定樣式,直接在head的 style 雙標籤中設定。內聯樣式表 行內樣式 在html中,直接將樣式屬性寫在標籤上,優先順序高於其它所有方式設定的樣式,加了 important的除外。外部樣式表 通過引入外部css檔案設定樣式,引入方式有兩種,一種是通過link標...