CSS特性探秘系列(6):margin

日期:2021-03-06 类型:科技新闻 

关键词:抠图换背景,免费的抠图软件,美图抠图,手机抠图软件哪个好,p图软件哪个好用

1、特性详细介绍

margin 特性接纳任何长度企业,能够是像素、英寸、毫米或 em。
可赋值:
auto 访问器测算外边距。
length 要求以实际企业计的外边距值,例如像素、厘米等。默认设置值是 0px。
% 要求根据父元素的宽度的百分比测算的外边距。
inherit 要求应当从父元素承继外边距。

2、普遍难题

1.IE6下波动元素双倍边距难题
处理方式:
IE6中设定block元素display:inline;
.l{margin-left:20px;float:left;display:inline;}
缘故:最先,inline元素和inline-block元素是沒有双倍边距的。对inline元素设定float后,会有个haslayout,使inline元素具备inline-block元素的特点,进而能够设定竖直margin、padding、width、height。

2.margin外边距合拼难题
外边距的合拼产生在下列3种情况:
情况1:空块元素
a)假如1个块级元素沒有border、padding、inline content、height、min-height来隔开,设定margin-top和margin-bottom特性后汇合并,

b)案例:


拷贝编码
编码以下:

<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检测实际效果同样。可是有个疑惑,去掉out的边框后,其高宽比测算为0,不知道道甚么缘故?

情况2:父元素与第1个或最终1个子元素
假如块元素的 margin-top 与它的第1个子元素之间沒有border, padding, inline content, 或 clearance 隔开,或块元素的 margin-bottom 与它的最终1个子元素之间沒有padding, inline content, height, min-height, or max-height 隔开,那末外边距汇合并。


拷贝编码
编码以下:

<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实际效果实际效果同样,此时inner01的margin-top:并沒有起功效,这便是为何许多人在网络上问,我设定margin-top,margin-bottom不起功效的缘故了!以下图:

情况3:紧邻的元素


拷贝编码
编码以下:

<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>目录1</li>
<li>目录2</li>
<li>目录3</li>
</ul>

>=IE6,FF,Chrome实际效果实际效果同样,重合一部分的赋值为margin-top,margin-bottom中的最大值。以下图:

此时大家看到重合也是有重合的益处

注:仅有一般文本文档流中块框的竖直外边距才会产生外边距合拼。行内框、波动框或肯定精准定位之间的外边距不容易合拼。

3.margin不起功效的状况?
行内(inline)元素设定竖直margin不起功效,块级元素的margin不太好用时,提议应用padding来替代。

3、普遍margin负值运用

1.IE6情况半全透明实际效果按钮的制做
其便是应用margin负值精准定位完成按钮下半一部分的色调

2.新闻目录(带时间的)
这个是重新浪blog主页看到的完成新闻目录


拷贝编码
编码以下:

<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;}
设定.date{text-align:right;display:block;margin-top:⑵4px;},这时候就不必须应用波动来合理布局了

3.在选项卡等边框线的解决
当今选定的选项卡下边框色调要设定选定色另外,內容的div上边框要设定margin-top:⑴px;

4.照片与文本对齐难题
方式1:
vertical-align:text-bottom
方式2:
.img{margin:0 5px ⑵px 0;}
检测编码:


拷贝编码
编码以下:

<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 ⑵px 0;}
</style>
<div class="out">
<img src="20.png" width="20" height="20" class="img">Benjamin=前端开发开发设计
</div>

4、新闻目录边框

当大家应用ul>li写新闻目录必须给li设定下边框时,是否常常疑惑于最终1条会多出1个边框。假如给最终1条独立加个类.last{border-bottom:none;}
也能完成实际效果。可是这中写法会有两个缺点,缺点1:独立界定1个css类;缺点2,当大家应用服务器端語言輸出数据信息时,还必须独立分辨最终1项,加上calss类。有木有好的处理方式呢?自然有,那便是margin负值!
看看下面完成案例:


拷贝编码
编码以下:

<style type="text/css">
.con{width:200px;border:1px solid #f00;}
.con ul{overflow:hidden;margin:0;padding-left:0;margin-bottom:⑴px;}
.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>

如图:

5、参照连接

http://www.w3school.com.cn/css/css_margin_collapsing.asp

上一篇:CSS访问器适配性Hack大全 返回下一篇:没有了