深入理解 margin

2021-09-24 17:48:28 字數 973 閱讀 7246

1. margin可以改變容器尺寸。

2. margin與百分比單位。(普通元素的百分比margin都是相對於父級的寬度計算的,

絕對定位元素的百分比margin是相對於第乙個定位祖先元素(relative/absolute/fixed)的寬度計算的。)

例子: 寬高2:1自適應矩形

.box

.box > div

3. 正確看待css的margin重疊。

margin的計算法則: 1.正正取大值。 2. 正負值相加。3.負負最負值。

例子: .list ,利用margin的上下間距重疊屬性。

4.理解css中的margin auto。

img /*水平居中.*/

設定div元素垂直居中。 (改變流的方向 writing-mode. 如下:)

.father

.son

絕對定位的垂直居中.

.father

.son

margin負值定位。(margin負值可以改變(增加)空間尺寸。)

1.margin負值下的兩端對齊。

列表一

列表二

列表三

.box

.ul

.li

2. margin負值下的等高布局。

例一:

例二: . box

.child-orange, .child-green

.child-orange

.child-green

3. margin負值下的兩欄自適應布局.

左邊文字,右邊......

// margin負值增加空間尺寸,margin正值減小空間尺寸。

margin無效的情況。

1. 內聯元素的垂直margin是無效的。

2. margin重疊。

3. display: table-cell;   margin是無效的。

學習筆記 CSS深入理解之margin

張鑫旭的css深入理解之margin學習筆記前提 只應用於block元素 不考慮writing mode的情況下,只發生在垂直方向 場景 兄弟元素發生重疊 父元素和第乙個 最後乙個子元素發生重疊 margin bottom重疊 最後乙個子元素設定margin bottom相對于父元素設定margin...

深入理解C語言 深入理解指標

關於指標,其是c語言的重點,c語言學的好壞,其實就是指標學的好壞。其實指標並不複雜,學習指標,要正確的理解指標。指標也是一種變數,占有記憶體空間,用來儲存記憶體位址 指標就是告訴編譯器,開闢4個位元組的儲存空間 32位系統 無論是幾級指標都是一樣的 p操作記憶體 在指標宣告時,號表示所宣告的變數為指...

mysql 索引深入理解 深入理解MySql的索引

為什麼索引能提高查詢速度 先從 mysql的基本儲存結構說起 mysql的基本儲存結構是頁 記錄都存在頁裡邊 各個資料頁可以組成乙個雙向鍊錶每個資料頁中的記錄又可以組成乙個單向鍊錶 每個資料頁都會為儲存在它裡邊兒的記錄生成乙個頁目錄,在通過主鍵查詢某條記錄的時候可以在頁目錄中使用二分法快速定位到對應...