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

成都創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)田陽,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

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ì)算。說三遍

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

 

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

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

比如 有兩個(gè)容器

 

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

4. margin 的重疊 為什么重疊

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

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

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

B) 發(fā)生的情況

1> 相鄰的兄弟元素

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

3> 空的 block。 

例子一 相鄰的兄弟元素

   

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

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

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

 

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

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

父子 margin重疊的 條件

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

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

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

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

  

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

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

A) 正正取大值

B) 正負(fù)值相加

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

5. margin 重疊的意義

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

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

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

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

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

.list{

margin-top : 15px;

margin-bottom: 15px;

}

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

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

網(wǎng)站題目：CSS的margin實(shí)例用法
文章位置：http://www.chinadenli.net/article48/jcodhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計(jì)公司、商城網(wǎng)站、網(wǎng)站制作、企業(yè)建站、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)