margin負值 一 之對自身的影響

2022-09-01 11:24:10 字數 3439 閱讀 2974

【1.margin-left/margin-right負值】

當元素不存在width屬性或width:auto時,負值margin會增加元素的寬度。

注意:這僅是在元素不存在width屬性或則width屬性預設時。

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>document

title

>

<

style

>

body

.box

.in

style

>

head

>

<

body

>

<

div

class

="box"

>

最外層的寬度為300px

<

div

class

="in"

>

元素設定了margin-left:-50px

如果有寬度設定,margin-left和margin-right為負值時,會發生位移。

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>document

title

>

<

style

>

body

.box

.in

style

>

head

>

<

body

>

<

div

class

="box"

>

最外層的寬度為300px

<

div

class

="in"

>

元素設定了with:200px

【2.margin-top負值】

margin-top為負值時,不會增加寬度,但會讓元素上移。

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>document

title

>

<

style

>

body

.one

.two

style

>

head

>

<

body

>

<

div

class

="one"

>margin-top為-100px--高度為200px

div>

<

div

class

="two"

>高度為20px

【3.margin-bottom負值】

margin-bottom為負值時不會位移,但會減少自身供css讀取的高度。

doctype html

>

<

html

lang

="en"

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>document

title

>

<

style

>

body

.one

.two

style

>

head

>

<

body

>

<

div

class

="one"

>margin-top為-100px--高度為200px

div>

<

div

class

="two"

>高度為20px

下圖為margin-bottom從0到負值的變化圖

[注意]:.one的元素的高度依舊是200px,瀏覽器依舊將整個元素渲染出來

負值之美 負margin在頁面布局中的應用

負數給人總是一種消極 否定 拒絕之感,不過有時利用負margin可以達到奇妙的效果,今天就表一表負值在頁面布局中的應用。這裡說的負值主要指的是負margin。關於負margin的原理建議大家看看這篇文章 本文不講原理,主要展示幾個應用。此例適用於左右欄寬度固定,中間欄寬度自適應的布局。由於網頁的主體...

Unity3d開發之對Public的一些個人說法

在開發專案中,我們經常需要公開類內部的變數讓外部呼叫。c 標準寫法是讓我宣告私有字段然後生成對應的公共屬性供外部呼叫。保證 安全。而我們在開發unity專案時,因為為了省時或者可以在面板賦值,我們經常直接在類內部宣告公開的字段。如下 public int num 1 unity的獨特之處時,在我們編...

第一天之C 對C語言的加強

所謂namespace,是指識別符號的各種可見範圍。c 標準程式庫中的所有識別符號都被定義於乙個名為std的namespace中。在c 中,名稱 name 可以是符號常量 變數 巨集 函式 結構 列舉 類和物件等等。為了避免,在大規模程式的設計中,以及在程式設計師使用各種各樣的c 庫時,這些識別符號...