CSS中边框应用负边距值的奇技淫巧

2020-10-18 16:29 jianzhan

自从1998年CSS2做为强烈推荐以来,报表的应用逐渐退去,变成历史时间。正由于此,从那之后CSS合理布局变成了雅致编码的代名词。

针对全部设计方案师应用过的CSS定义,负边距做为至少探讨到的精准定位方法要记上1功。这就好像线上纹身-每一个人都会做,可是沒有人会讨论它。(It’s like an online taboo—everyone’s doing it, yet no one wants to talk about it.)

为其正名

大家都应用过CSS得外边距,可是当谈到负边距的情况下,大家仿佛往差的方位发展趋势啦。在网页页面设计方案中负边距的应用出現了两种极端化,1种非常喜爱它,也是有1些人觉得这彻底便是魔鬼的著作。

负边距的应用以下:

CSS Code拷贝內容到剪贴板
  1. #content {margin-left:-100px; }  

负边距一般在小范畴应用。可是接下来你会看到,它能做的事儿许多。下面是1些你应当了解的有关负边距的事儿:

她们是彻底合理的CSS
这并不是在跟你玩笑。W3C乃至都说,出外边框中应用负边距是容许的。
负边距并不是在hack
这是特别正确的。更是由于沒有很好地掌握负边距才是致使各种各样怪异的难题。仅有在被用来处理别的地区的bug的情况下才是hack
它合乎一切正常的文本文档流
当负边距应用在沒有波动的元素上时其实不会破坏一切正常的文本文档流。因此付过你应用负边距把元素向上微调的话,全部后边的元素也会向上微调。
它是非常好的适配性
负边距基础上被全部当代的访问器适用(IE6的绝大多数状况也是)
当应用了float以后,会有不一样的主要表现
负边距并不是你平时应用的特性,因此应用的情况下要分外当心。
Dreamweaver没理解它
负边距不容易在DW的设计方案对话框展现出实际效果。那你为何还用DW的设计方案对话框查询实际效果呢?
与其相处

负边距假如能够正确的应用的话它的作用是很强劲的。有两种情景负边距是很关键的。

在static元素中应用负边距

1个static元素是1个沒有应用过float的元素。上面的照片展现了1个static的元素应用负边距以后的状况。

当1个static元素在top/left应用负边距时,它把元素向这个特殊的方位拉,例如

CSS Code拷贝內容到剪贴板
  1. /* Moves the element 10px upwards */  
  2. #mydiv1 {margin-top:-10px;}  

可是当你将负边距设定为相对性bottom/right时,它其实不会把元素向下或右拉,相反,它会把后边的元素往里边拉,从而遮盖自身。

CSS Code拷贝內容到剪贴板
  1. /*  
  2.  全部在#mydiv1后边的元素都会向上  
  3.  挪动10px,而#mydiv11点都不容易挪动  
  4. */  
  5. #mydiv1{margin-bottom:-10px;}  

假如宽度沒有设定,上下负边距会把元素向两个方位拉以提升宽度。在这里margin的功效非常于padding
在波动中应用负边距

添加下面便是大家的html编码:

XML/HTML Code拷贝內容到剪贴板
  1. <div id="mydiv1">First</div>  
  2. <div id="mydiv2">Second</div>  

假如对1个波动的元素应用负边距,它会造成1个空白,别的元素便可以遮盖这1一部分。这个技能能够很好地客户流式的合理布局。例如有1列宽度100%,另外一列有固定不动的宽度,例如说100px。

CSS Code拷贝內容到剪贴板
  1. /*   
  2. A negative margin is applied opposite the float   
  3. */  
  4. #mydiv1 {float:leftmargin-right:-100px;}  

假如两个元素都应用了左波动而且设定margin-right:⑵0px。#mydiv2会把#mydiv1当做宽度变小20px(因此会遮盖1一部分),可是趣味的是#mydiv1其实不会有任何转变,而是仍然维持本来的宽度。
假如负边距和宽度1样大的话,它就会被彻底遮盖掉。由于外边距,内边距,边框和內容加起来等于元素的宽度。假如负外边距等于元素的宽度的话,那末该元素的宽度就会变为0px。
学以至用

既然大家了解应用负边距在CSS2中是合理的,应用它能够给大家出示1些十分趣味的CSS技能。

把单独目录变为3列

假如你有1个目录竖直方位过长了,为何不把它分为几列呢?负边距可让你在不提升任何波动和标识的状况下进行。你会发现用负边距完成这个是多么的地简易,就像下面:

HTML

XML/HTML Code拷贝內容到剪贴板
  1. <ul>    
  2.     <li class="col1">Eggs</li>  
  3.     <li class="col1">Ham<li>    
  4.     <li class="col2 top">Bread<li>    
  5.     <li class="col2">Butter<li>    
  6.     <li class="col3 top">Flour<li>    
  7.     <li class="col3">Cream</li>    
  8. </ul>  

CSS

CSS Code拷贝內容到剪贴板
  1. ul {list-style:none;}   
  2. li {line-height:1.3em;}   
  3. .col2 {margin-left:100px;}   
  4. .col3 {margin-left:200px;}   
  5. .top {margin-top:⑵.6em;} /* the clincher */  

根据对.top的加上margin-top:⑵.6em。全部的元素会完善的对齐好。应用负边距会比应用相对性精准定位好许多,由于你只必须给新的1列的第1个元素加上负边距便可。酷吧,哈哈哈

重合来强调

有意重合元素也是1种很好地设计方案隐喻。重合实际效果能够提高深层感从而为突显特殊元素。1个很好地事例就像上图1样,根据重合来吸引住留意力。只必须应用z-index特性和1点小艺术创意你便可以保证。

震撼的三d文字实际效果

这是1个精美的技能。根据应用两个主视图的两种色调建立safari1样有点歪斜的实际效果。随后根据负边距来把在其中1个叠加到另外一个上面,维持1到2像素的偏位。这样你便可以2道可选的,设备友善的歪斜字体样式。就不必须消耗许多借款来载入大的照片来完成这个实际效果啦

简易的多列合理布局

负边距也是在流式的合理布局中建立简易1列宽度固定不动,1列內容为宽度的100%的多列合理布局的好方式。

HTML

XML/HTML Code拷贝內容到剪贴板
  1. <div id="content"> <p>Main content in here</p> </div>    
  2. <div id="sidebar"> <p>I’m the Sidebar! </p> </div>  

CSS

CSS Code拷贝內容到剪贴板
  1. #content {width:100%; float:leftmargin-right:-200px;}   
  2. #sidebar {width:200pxfloat:left;}  

哈哈,这样你就获得了1个简易的多列合理布局。它也能在IE6完善的3D渲染出来。如今以便让#sidebar不必被#content给遮盖,要是简易的再加:


CSS Code拷贝內容到剪贴板
  1. /* Prevent text from being overlapped */  
  2.   
  3. #content p {margin-right:210px;}   
  4.   
  5. /* It’s 200px + 10px, the 10px being an additional margin.*/  

当适度的应用的情况下,负外边距可以出示1个灵便的文本文档构造,完爆table的合理布局。灵便的文本文档合理布局是1种可浏览性和SEO的技能,根据它可以让你依据你的关心点以随意次序机构你的html编码。这里有1个文章内容探讨了负边距在两列合理布局中的运用。

微调元素

这是负外边距最常也是最简易的应用方法。倘若你把第10个div插进到9个别的的div中,不知道道甚么缘故沒有正确的排序,应用负边距来调剂这个div就不必须更改别的9个div了,很便捷。

处理bug

文字和连接难题

在float中应用负边距将会会在旧的访问器导致1些难题,例如下面的这些:

让连接不能点一下
文字变得很难挑选
丧失聚焦点的情况下按tab键无效
处理方式:要是加上position:relative,便可以啦。

照片被裁切啦

假如你运势不太好恰好在办公室应用IE6,当遇到遮盖和波动的情况下內容一些情况下回忽然被裁切掉。

处理方式:一样的要是给波动元素再加position:relative,全部的难题就处理啦。

结果

负外边距可以在不应用任何附加标识的状况下精准定位元素让它在如今网页页面设计方案中占据1席的地方。伴随着更多的客户应用升级的访问器(包含IE8),将来应用这些技能的网站会变得更为有市场前景。