CSS中的margin屬性有什么功能-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)公司堅(jiān)信：善待客戶，將會(huì)成為終身客戶。我們能堅(jiān)持多年，是因?yàn)槲覀円恢笨芍档眯刨?。我們從不忽悠初訪客戶，我們用心做好本職工作，不忘初心，方得始終。10余年網(wǎng)站建設(shè)經(jīng)驗(yàn)成都創(chuàng)新互聯(lián)公司是成都老牌網(wǎng)站營(yíng)銷服務(wù)商,為您提供網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、H5網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、高端網(wǎng)站設(shè)計(jì)、成都微信小程序服務(wù),給眾多知名企業(yè)提供過(guò)好品質(zhì)的建站服務(wù)。

一、屬性介紹

margin 屬性接受任何長(zhǎng)度單位，可以是像素、英寸、毫米或 em。
可取值：
auto 瀏覽器計(jì)算外邊距。
length 規(guī)定以具體單位計(jì)的外邊距值，比如像素、厘米等。默認(rèn)值是 0px。
% 規(guī)定基于父元素的寬度的百分比計(jì)算的外邊距。
inherit 規(guī)定應(yīng)該從父元素繼承外邊距。

二、常見(jiàn)問(wèn)題

1.IE6下浮動(dòng)元素雙倍邊距問(wèn)題
解決方法：
IE6中設(shè)置block元素display:inline;
.l{margin-left:20px;float:left;display:inline;}
原因：首先，inline元素和inline-block元素是沒(méi)有雙倍邊距的。對(duì)inline元素設(shè)置float后，會(huì)有個(gè)haslayout,使inline元素具有inline-block元素的特性，進(jìn)而可以設(shè)置垂直margin、padding、width、height。

2.margin外邊距合并問(wèn)題
外邊距的合并發(fā)生在以下三種情形：
情形一：空塊元素
a)如果一個(gè)塊級(jí)元素沒(méi)有border、padding、inline content、height、min-height來(lái)分隔，設(shè)置margin-top和margin-bottom屬性后會(huì)合并,

b)實(shí)例：

代碼如下:

<style type="text/css">
body{margin:0;}
.out{width:400px;border:1px solid #f00;margin:0 auto;background-color:#ccc;}
.inner{margin-top:40px;margin-bottom:40px;}
</style>
<div class="out">
<div class="inner"></div>
</div>

從上例可以看出，最后.out computed height為40px;
>=IE8、Firefox、Chrome測(cè)試效果相同。但是有個(gè)疑問(wèn)，去掉out的邊框后，其高度計(jì)算為0，不知道什么原因？

情形二：父元素與第一個(gè)或最后一個(gè)子元素
如果塊元素的 margin-top 與它的第一個(gè)子元素之間沒(méi)有border, padding, inline content, 或 clearance 分隔，或者塊元素的 margin-bottom 與它的最后一個(gè)子元素之間沒(méi)有padding, inline content, height, min-height, or max-height 分隔，那么外邊距會(huì)合并。

代碼如下:

<style type="text/css">
body{margin:0;}
.parent{border:1px dotted #ccc;width:400px;}
.outer{height:50px;background-color:#f00;margin-top:40px;margin-bottom:40px;}
.inner01{margin-top:20px;background:#00f;}
.inner02{margin-bottom:60px;background:#f0f;}
</style>
<div class="parent">
<div class="outer">
 <div class="inner01">inner01</div>
 <div class="inner02">inner02</div>
</div>
</div>

>=IE6,FF,Chrome效果效果相同，此時(shí)inner01的margin-top:并沒(méi)有起作用，這就是為什么很多人在網(wǎng)上問(wèn)，我設(shè)置margin-top,margin-bottom不起作用的原因了！如下圖：

情形三：毗鄰的元素

代碼如下:

<style type="text/css">
.ulist{margin:0;padding-left:0;list-style:none;width:200px;margin:0 auto;border:1px solid #f00;}
.ulist li{padding-left:0;margin:10px;border:1px dotted #f00;}
</style>
<ul class="ulist">
<li>列表一</li>
<li>列表二</li>
<li>列表三</li>
</ul>

>=IE6,FF,Chrome效果效果相同,重疊部分的取值為margin-top,margin-bottom中的較大值。如下圖：

此時(shí)我們看到重疊也有重疊的好處

注：只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。

3.margin不起作用的情況？
行內(nèi)(inline)元素設(shè)置垂直margin不起作用，塊級(jí)元素的margin不好用時(shí)，建議使用padding來(lái)代替。

三、常見(jiàn)margin負(fù)值應(yīng)用

1.IE6背景半透明效果按鈕的制作
其就是使用margin負(fù)值定位實(shí)現(xiàn)按鈕下半部分的顏色

2.新聞列表(帶日期的)
這個(gè)是從新浪博客首頁(yè)看到的實(shí)現(xiàn)新聞列表

代碼如下:

<ul>
<li>new01<span class="date">2014-03-02</span></li>
<li>new02<span class="date">2014-03-02</span></li>
<li>new03<span class="date">2014-03-02</span></li>
<li>new04<span class="date">2014-03-02</span></li>
</ul>

ul li{height:24px;line-height:24px;}
設(shè)置.date{text-align:right;display:block;margin-top:-24px;},這時(shí)就不需要使用浮動(dòng)來(lái)布局了

3.在選項(xiàng)卡等邊框線的處理
當(dāng)前選中的選項(xiàng)卡下邊框顏色要設(shè)置選中色同時(shí)，內(nèi)容的div上邊框要設(shè)置margin-top:-1px;

4.圖片與文字對(duì)齊問(wèn)題
方法一：
vertical-align:text-bottom
方法二：
.img{margin:0 5px -2px 0;}
測(cè)試代碼：

代碼如下:

<style type="text/css">
body{margin:0;font-size:12px;font-family:arial;}
.out{width:400px;border:2px dotted #f00;margin:20px auto;
 }
.img{margin:0 5px -2px 0;}
</style>
<div class="out">
<img src="20.png" width="20" height="20" class="img">Benjamin=前端開(kāi)發(fā)
</div>

四、新聞列表邊框

當(dāng)我們使用ul>li寫(xiě)新聞列表需要給li設(shè)置下邊框時(shí)，是不是經(jīng)常困惑于最后一條會(huì)多出一個(gè)邊框。如果給最后一條單獨(dú)加個(gè)類.last{border-bottom:none;}
也能實(shí)現(xiàn)效果。但是這中寫(xiě)法會(huì)有兩個(gè)弊端，弊端一：?jiǎn)为?dú)定義一個(gè)css類；弊端二，當(dāng)我們使用服務(wù)器端語(yǔ)言輸出數(shù)據(jù)時(shí)，還需要單獨(dú)判斷最后一項(xiàng)，添加calss類。有沒(méi)有好的解決方法呢？當(dāng)然有，那就是margin負(fù)值！
看看下面實(shí)現(xiàn)實(shí)例：

代碼如下:

<style type="text/css">
.con{width:200px;border:1px solid #f00;}
.con ul{overflow:hidden;margin:0;padding-left:0;margin-bottom:-1px;}
.con ul li{line-height:24px;border-bottom:1px solid #f00;padding-left:10px;}
</style>
</head>
<body>
<div class="con">
<ul>
 <li>fdasfd</li>
 <li>fdasfd</li>
 <li>fdasfd</li>
 <li>fdasfd</li>
 <li>fdasfd</li>
</ul>
</div>

如圖：

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

新聞標(biāo)題：CSS中的margin屬性有什么功能-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://bm7419.com/article4/igjoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、小程序開(kāi)發(fā)、搜索引擎優(yōu)化、網(wǎng)站收錄、動(dòng)態(tài)網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)