负margin作用详细介绍及用法总结

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

关键词:小程序怎么做,凡科网小程序,微信小程序界面,线上报名小程序,微信小程序页面制作

早在1998年CSS2的提议中,table就逐渐淡出了舞台,慢慢被加载史册。也由于这般,CSS合理布局也变为了编号雅致的代名词。
在设计方案者用过的全部CSS定义中,负margin理应是至少被谈及的精准定位方式,这就像1种忌讳,每一个人都应用它,但没人去探讨它。
1、为负margin“平反”
大家在CSS中都会应用margin,但将margin设定成负数,那将会就不大益处理了。在网页页面设计方案中,人们对负margin用法的心态截然不同,有的人十分喜爱,而有的人则觉得这是魔鬼的工作中。
1个负margin应当是这样设定的:

拷贝编码
编码以下:

#content {margin-left:⑴00px;}

一般人们非常少应用负margin但接着你会掌握到,它能做的实际上有许多。下列是几条相关负margin必须留意的地区:
A、负margin是肯定规范的CSS
这并不是玩笑。W3C乃至标明过:针对margin特性来讲,负值是被容许的,这是Nuff说的
B、负maring并不是1种hack方式
千真万确,不可以由于欠缺对负marign的了解,或由于它长得像hack,就觉得它是1种hack方式。除非你是用来修补自身在别的地区导致的不正确。
C、不摆脱文本文档流
不应用float的话,负margin元素是不容易破坏网页页面的文本文档流。因此假如你应用负margin上移1个元素,全部追随的元素都会被上移。
D、彻底适配
全部当代访问器都彻底适用负margin(IE6在大多数数状况下也适用)。
E、波动会危害负margin的应用
负margin并不是你每日都用的CSS特性,运用时应当心慎重。
F、Dreamweaver不分析负margin
DW的设计方案主视图不容易分析负margin。但难题是你为何要在设计方案主视图中查验你的网站呢?
2、应用负margin
假如应用恰当,负margin是是非非常强劲的特性,下列是2种(负margin占主导部位)的情景。
功效于static元素上的负margin特性


Static元素是沒有设置成波动的元素,下图表明了负margin对static元素的功效
当static元素的margin-top/margin-left被授予负值时,元素将被拉进特定的方位。比如:

拷贝编码
编码以下:

/* 元素向上移10px*/
#mydiv1 {margin-top:⑴0px;}

但假如你设定margin-bottom/right为负数,元素其实不会如你所想的那样向下/右挪动,而是将后续的元素拖拖拉拉进来,遮盖原本的元素。

拷贝编码
编码以下:

/*
* #mydiv1后续元素向上移10px, #mydiv1 自身不挪动
*/
#mydiv1 {margin-bottom:⑴0px;}

假如沒有设置width特性,设置负margin-left/right会将元素拖向对应的方位,并提升宽度,此时的margin的功效就像padding1样。
3、波动元素上的负margin
考虑到下下列这类状况
HTML

拷贝编码
编码以下:

<div id="mydiv1">First</div>
<div id="mydiv2">Second</div>

假如给1个波动元素再加相反向的负margin,则会使行间隔为0且內容重合。这针对建立1列是100%宽度而别的列是固定不动宽度(例如100px)的自融入合理布局来讲是是非非常有效的方式。

拷贝编码
编码以下:

/* 运用在与波动相反向的负margin */
#mydiv1 {float:left; margin-right:⑴00px;}

若两个元素都为波动,且#mydiv1的元素设置margin-right为20px。这样#mydiv2会觉得#mydiv1的宽度比原先宽度减少了20px(因而会致使重合)。但成心思的是,#mydiv1的內容不会受到危害,维持原来的宽度。
假如负margin等于具体宽度,则元素会被彻底遮盖。这是由于元素的彻底宽度等于margin,padding,border,width相加而成,因此假如负margin等于余下3者的和,那元素的具体宽度也就变为了0px。
4、好用技能
自从了解应用负margin是合乎CSS2规范的编码后,大家运用这个特点建立了1些趣味的CSS技术性。
制做包括3列的单独<ul>


假如你有1列新项目过长而没法竖直显示信息时,为何不试试用分列的方法来替代它?负margin可让你在不加上任何波动元素或标识的状况下做到这类实际效果。以下,这般简易的实际操作便可以把结合分为3列,简直太让人惊叹了!
HTML

拷贝编码
编码以下:

<ul>
<li class="col1">Eggs</li>
<li class="col1">Ham</li>
<li class="col2 top">Bread</li>
<li class="col2">Butter</li>
<li class="col3 top">Flour</li>
<li class="col3">Cream</li>
</ul>

CSS

拷贝编码
编码以下:

ul {list-style:none;}
li {line-height:1.3em;}
.col2 {margin-left:100px;}
.col3 {margin-left:200px;}
.top {margin-top:⑵.6em;} /* the clincher */

根据在类top中设定margin-top:⑵.6em(<li>标识的2倍行高),全部元素都完善的对齐了。你只必须将负margin运用到每列的第1个标识上,而并不是设定每一个<li>的相对性部位,这样用起来汇合适许多,很酷吧?
应用重合造成强调


有意重合元素也是1种很好的设计方案比喻,这样能造成1种深层幻觉,从而突显特殊的元素。Phlashers.com的评价控制模块便是1个很好的事例,应用了重合技术性突显了评价数目。运用负margin和z-index 特性,外加1点点艺术创意,你还可以保证。
出色的三d文本殊效


这是1种建立相近于Safari字体样式的恰当方式:应用2种色调建立两版同样,稍微歪斜的文本,随后应用负margin将1版文本遮盖到另外一版上,并 留出1⑵像素的差别。这样你就得到了具备可选性,并且对设备人爬虫友善的文本!从此不再必须那臃肿又耗费带宽的jpeg和gif了。
简易2列合理布局
负margin也是1种建立简易2列自融入合理布局的好方式。2列自融入合理布局是1种有着1个自融入宽度(liquid width)为100%的內容列和1个固定不动宽度侧面栏的合理布局。
HTML

拷贝编码
编码以下:

<div id="content"> <p>Main content in here</p> </div>
<div id="sidebar"> <p>I’m the Sidebar! </p> </div>

CSS

拷贝编码
编码以下:

#content {width:100%; float:left; margin-right:⑵00px;}
#sidebar {width:200px; float:left;}

这样你就有着了1个简易的多列合理布局,即便在IE6下也能无错的运作。如今,以便防止#sidebar被#content中的文本遮盖,再加

拷贝编码
编码以下:

/* 避免文字被重合 */
#content p {margin-right:210px;}
/* 它是 200px + 10px, 10px是她们的间隔*/

假如应用恰当,负margin还可以彻底替代table标识,来组成灵便文本文档构造。这类构造是1种具备可浏览性的SEO技术性,能够彻底依照你的意向按基本上任何次序来排序标识。
微调元素部位
这是负margin最常见,也是最简易的方式。假如你在9个div中插进第10个div,有时将会由于一些缘故没法对齐,应用负margin能够仅对第10个开展微调,而无需务必去改动别的9个元素。
5、Bug修补
文本和连接的难题
当波动元素应用负margin时,在1些旧的访问器中将会会出現难题,难题状况包含:
连接没法点一下;
文本无法选定;
丧失聚焦点后,tab任何连接都会消退;
处理方式:给元素加上position:relative,便能一切正常运作!
照片被断开
假如你悲剧在办公室应用IE6的话,有时会发现重合和波动的元素中內容会被忽然断开。
处理方式:一样,给波动元素再加position:relative,1切可能修复一切正常。
6、总结
负margin因其本身不加上附加标识就可以精准定位元素的工作能力在当代网页页面设计方案中占据1席的地方。伴随着更多的客户升級访问器(包含IE8), 这项技术性的发展前途看起来会十分光辉,更多的网站也会依靠于它。
假如你对负margin有任何独到的亲身经历,欢迎留言告知我。

1.负margin在Tab选项卡中的运用
2.负margin负位移技术性运用:
3.运用负margin制做自融入上下合理布局:这类合理布局实际效果(左侧1个固定不动照片,右侧为內容),负margin可以取代float波动合理布局,开展上下合理布局整体规划,而且有着float所沒有的自融入实际效果。你能够尝试点一下变宽和变窄按钮来查询本例。你也许也发现了第3个“不设定最少宽度”按钮,这个是做甚么用的呢?你可使用规范访问器查询上方事例,先后点一下变宽按钮至宽度最大,再点一下不设定最少宽度按钮,你会发现出現了1个Bug。负margin用作合理布局实际效果确实有其独到的地方,但本身也是有1个小的缺点,即假如內部最终1个子元素应用负margin上移后,因为父元素是其边距元素,实际上际高宽比因为內部子元素上移也会跟随缩小。处理方法便是设定1个最少高宽比,最少高宽比值为较小的固定不动元素高宽比(此例即为左侧固定不动的照片高宽比),便可完全处理负margin上移危害父元素高宽比Bug。
4. 完成照片,运用负margin块元素竖直垂直居中
总结:负的margin值不容易危害box具体尺寸,假如是负的top或left值会引发box的向上或向左部位的挪动,假如是bottom或right只会危害下面box的显示信息的参照线。