CSS屬性margin

**001
**

**margin****百分比:****1.****普通元素相對父級容器的寬度計算。****2.****絕對定位元素相對于鄰近的被定位的父級元素寬度計算。****
**

**002
**

**margin****重疊通常特性****:****
1.block****水平元素****(****不包括****float****和****absolute****元素****)****
2.****不考慮****writing-mode,****只發生在垂直方向上****.****
margin****重疊****3****中情景****:****
1.****相鄰的兄弟元素****
2.****父級和第一個****/****最后一個子元素****
**

**
3.****空的****block****元素****
**

**

[圖片上傳中。。。(1)]
**

**003
**

**
**

可以利用margin屬性的負值來設置(margin**屬性會改變自適應寬度元素的寬度)
**

**
**

**004
**

Margin無效
**

**
**

1inline水平元素的垂直margin無效,以及無效的兩個前提,如圖**
2.margin****重疊****
**

3.然而,替換元素即便display設為table相關的,他們的margin值依然有效.button元素在不同瀏覽器的渲染行為** 還不一樣
**

在火狐中按照inline-block渲染
4.****絕對定位非定位方位的****margin****值****"****無效****".****
4.****絕對定位的****margin****一直有效只是不像普通元素一樣****,****可以影響兄弟元素****.****
4.****總結****:****如果絕對定位元素設置了left,沒有設置right.則設置margin-left父元素大小不變,子元素有margin.設置margin-right子元素沒有margin,但是父元素的大小改變**
**

5.如圖,divmargin-left并不是相對img的右邊緣,因為float元素不再文檔流中.margin-left大于200px,margin值就會有效**
**

在前一個元素浮動的時候,后一個元素的margin-left相對于父元素,而不是相對于浮動元素,就當左浮動元素不存在.
**

6.內聯特性導致的margin無效,img元素是內聯元素,它既要保持和行內元素比如X的基線對齊,又要接受行內元素無法跨出父元素邊框這個事實**.
**

**005
**

****margin-start****的作用****,****如圖****,****有三點****.margin-end****正好和****margin-start****行為相反****
****第2點中,改變水平流的方向的css描述是derection:rtl;
****第3點中,改變垂直流的方向的css描述是**writing-mode:vertical-lr;
**

**margin-before ****默認流向的情況下,等同于****margin-top****
margin-after 默認流向的情況下,等同于margin-bottom
**

****非常好的特性,margin-collapse,可以取消margin重疊.可惜只有webkit支持**
**

  1.   **
    

[圖片上傳中。。。(2)]
**

wc:????

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,815評論 1 92
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表,主要用...
    寥寥十一閱讀 1,883評論 0 6
  • 浮動 CSS允許浮動任何元素。 浮動元素 首先,會以某種方式將浮動元素從文檔的正常流中刪除,不過它還是會影響布局。...
    exialym閱讀 1,251評論 0 6
  • 以下文章是我在網上收集的內容,為了記錄自己的學習以及為了以后不到處找而記錄下來,如果對你有用,請感謝寫這些文章的前...
    DCbryant閱讀 954評論 0 2
  • relative:生成相對定位的元素,通過top,bottom,left,right的位置相對于其正常位置進行定位...
    zx9426閱讀 970評論 0 2