CSS的margin實(shí)例用法

本篇內(nèi)容主要講解“CSS的margin實(shí)例用法”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“CSS的margin實(shí)例用法”吧!

1.margin的百分比值普通元素的百分比maigin相對(duì)于容器元素的寬度(width) 進(jìn)行計(jì)算的。

這里我們?cè)趫D片外面設(shè)置一個(gè)寬高分別為800 * 600的容器。設(shè)置img{ margin: 10%; }

結(jié)果如下

　  
結(jié)果margin值都是 800 * 10% = 80px; 所以這里都是相對(duì)于容器的寬度計(jì)算的 容器的寬度計(jì)算 容器的寬度計(jì)算。說(shuō)三遍

2.絕對(duì)定位的百分比maigin值

相對(duì)于第一個(gè)定位的祖先元素的 width值計(jì)算的。就是 parent 的 width = 1000px. 所以 margin = 100px；

3.可以使用margin 實(shí)現(xiàn) 2 ： 1 的自適應(yīng)

比如 有兩個(gè)容器

這里 box的高度沒(méi)有指定。 由于設(shè)置 margin 50% 。他的高度就是父容器的一半  所以高寬比就是 1 ： 2；

4. margin 的重疊 為什么重疊

A) margin 重疊的兩個(gè)特性

只會(huì)發(fā)生在block的水平元素上。 （不包括 float 和 absolute元素）

不考慮 wirte-mode(就是書(shū)寫(xiě)格式)  只發(fā)生在 垂直方向(margin-top margin-bottom)

B) 發(fā)生的情況

1> 相鄰的兄弟元素

2> 父級(jí)的第一個(gè) 和 最后一個(gè)子元素

3> 空的 block。 

例子一 相鄰的兄弟元素

  這里就是兩個(gè)兄弟元素 。

這里的 兩個(gè)p 之間只有一個(gè)em 沒(méi)有兩個(gè)em。 因?yàn)榈谝粋€(gè)margin-bottom 和 第二個(gè)的 margin-top 發(fā)生了重疊。

例子二 父元素和最后一個(gè)子元素 重疊

按照常規(guī)理論 son 和 父元素的 father 之間會(huì) 留出 80px的 margin-top值。但是實(shí)際上沒(méi)有。son的背景元素沒(méi)有變化 沒(méi)有留出80px；

這里只是 給 父元素設(shè)置了 80px;

父子 margin重疊的 條件

那么怎么干掉margin-top 重疊呢？

只要不讓它滿足那些條件就可以了。

父元素添加 overflow: hidden;  border-top  padding-top （在他們之間加個(gè)空格）;

例子三 空block元素的 margin 重疊。

注意 里面沒(méi)有任何內(nèi)容的空元素 。空元素發(fā)生margin重疊的條件

4 margin重疊的計(jì)算規(guī)則。

A) 正正取大值

B) 正負(fù)值相加

C) 負(fù)負(fù)取最負(fù)。

5. margin 重疊的意義

A)  連續(xù)段落或列表之類(lèi) 如果沒(méi)有margin重疊 收尾出現(xiàn) 1 ： 2 就會(huì)顯得不協(xié)調(diào)

B) web 中任何地方嵌套或直接放div 都不會(huì)影響原來(lái)的布局

C) 遺落的空的任意 多個(gè)p元素 不要影響原來(lái)閱讀的排版

實(shí)際應(yīng)用

制作列表 的時(shí)候控制每個(gè)列表的距離里面的

.list{

margin-top : 15px;

margin-bottom: 15px;

}

更具有健壯性 即使最后一個(gè) 移除了 亦不會(huì)影響布局

到此，相信大家對(duì)“CSS的margin實(shí)例用法”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！