DIV教程之网页结构教程:边距和相对定位
提高易用性。使用CSS可以结构化HTML，例如：标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。网页制造Poluoluo文章简介：网页结构教程:边距和相对定位.
这篇文章持续后面倡议的关于主动定位的话题，先前在形貌关于主动定位的一些基础信息以后，我留下了一些大概用在结构中的办法，如今是时分会商元素定位的改善成绩了。
玩弄相对定位元素于股掌之间
起首，回想一下主动定位是怎样触发的，设置相对定位元素的left、top、right、bottom属性为默许的“auto”值，而不是给定长度值。当属性为“auto”值时，相对定位元素不会参考任何定位的先人元素，而是参照它作为静态活动元素应当安排的“static”地位。它占有着该地位，但仍坚持在一个独自的层上，也许会叠加在文本流上。
一样平常情形下会很好，但真正如许做会使我们得到对每个边距属性的把持，当我们必要将AP元素安排到幻想地位时，我们就必要一般的使用这些属性了。假如AP元素的静态地位可巧与我们想让其安排的地位纷歧致时，有一种大概的办法可使主动定位元素发射偏移—-margin。
划定规矩申明，margins在一切AP元素上都能事情，且不会与别的margin折叠，这年夜年夜简化了这类情况，可是，有一个成绩会招致搅浑——AP元素作为内联元素时，如span和link。
在起前一篇文章已经提到疏忽了边距和补白的一切top和bottom属性，可是，AP元素会实行一切的margins和paddings，实时他们是地道的span和link。这是由于，AP元素会将其转换成包括块，大概更详细些—块元素。
借助于margin使AP元素向周围挪动，这看起来不错，但当你参照前一篇文章中的主动定位演示页，你会有一点生疏，这是演示页：
viewsourceprint?01.<p>02.Vestibulumlacustellus,adipiscingin,volutpatsitamet,dictumac.03.Duiseuismod04.sapienquistellus.Vivamusaliquam,loremaaccumsanconsequat,dolor05.estiaculis06.est,necpulvinarmagnaipsumatlacus.Duisaliquam.Sedmattis.07.Morbiipsum08.ipsum,euismodut,scelerisquequis,faucibuset,tortor.Sedaliquam09.eratveljusto.10.Etiamlacinia,massaaultricespellentesque,11.<ahref="#"12.class="linkparent1">Linktext<span>Tooltiptext</span></a>13.dolorantesagittisnibh,egetinterdumantelectusnecest.Fusce14.rutrumfaucibus15.mauris.Aliquamcursusnislatdiam.Loremipsumdolorsitamet.16.</p>17.id="line17"18..linkparent1{19.color:#a00;20.}21..linkparent:hoverspan{22.left:auto;23.}/*thishoveronthelinkchangesthenestedspansleftvalueto24.auto*/25..linkparentspan{26.position:absolute;27.left:-999em;28.border:1pxsolidwhite;29.background:#446;30.color:white;31.font-weight:bold;32.padding:2px4px;33.text-decoration:none;34.}/*tooltipmaybecustomstyledasdesired*/35..linkparent:hover{36.background:url(bgfix.gif);37.}/*Applies1x1transparentbgfix.gifonhover-IEhoverbugfix*/当鼠标经由“link-text”时，AP呈现在窗口当中，主动定位将其放在一个内联span应当呈现的地位上，即便span是相对定位，而且是一个块元素，就扫瞄器而言，相对定位的span元素像内联元素那样，同时它又是具有诸如margin、padding和border等属性的块元素。
同时，回想一下第二个演示页，我给span特定的界说了“display：block”属性，那样，一切非IE扫瞄器将span安排到新一行上，而且是从段落的左边入手下手。如许，我们看到元素并没有多年夜改动，而是对其主动定位属性发生了影响。（IE除外）
这十分风趣，但一点也不影响我们的margin实行。我只是让你熟悉到这一点，由于偶然候，它会在你绝不知情的情形下使你狐疑。
Margins初探
我们想让APspan弹出框的地位呈现的第一点，更靠左一些，使其叠在父链接之上。如许看起来更酷，并且他们堆叠，确保用户往返挪动鼠标不会使弹出框消散。
这是一样的demo，可是其top边距向下移，right边距左移，如许就呈现在父链接之前，增添以下代码：
viewsourceprint?1..first-offset-testspan{2.margin-top:.8em;3.margin-right:50px;4.}
如今，鼠标经由链接文本时看到变更没有？弹出层较之前下移了一些。不错，但它并没有向左移！Right边距看来并未失效。让我们从分歧的偏向尝尝－－用负的left边距取代正的right边距。
viewsourceprint?1..second-offset-testspan{2.margin-top:.8em;3.margin-left:-50px;4.}
这是为何？负left边距失效而正的right边距属性不失效？一样为何top边距也能失效？我们必要更好的demo往切磋这个成绩，上面是一个绝对定位的盒子，四个相对定位的子div借助其left、top、right、bottom属性分离位于四个角落。
注重，因为存在四舍五进毛病，在一些扫瞄器中你会看到盒子的底部和右侧有1px的间隙，到今朝为止，统统一般，如今让我们增加一些边距。
鄙人面的示例中四个分歧的测试版本中，第一个box具有left、top边距，第二个具有bottom、right边距。剩下的两个与前两个不异但属性值为负。
剖析
你注重到这类形式没有？只要在相对定位元素的统一侧使用margin和定位属性值时margin才失效。实践上，在你界说了相对定位元素的left属性后，你能够界说margin-left属性，如许会失效，别的几边是一样。
你也许会问，为何是如许？一个有着严厉尺寸的相对定位box会经由过程两个相邻的属性(left、top、right、bottom)与其他元素相毗连。余下的将被疏忽或偏移你界说的尺寸巨细。
既然只要相对定位盒子的两侧与其他相接洽，当界说margin时，只要这两侧产生反响。其他的两侧被形貌为“半拉子”，它们不触及任何器材，在不搅扰盒子声明尺寸或已界说属性值的一侧的情形下，其margin属性不发生任何推拉效果。很分明，这类举动不是很好，如许，那些有关的margin将被疏忽。
当静态地位是在从左到右的流上钩算时，主动定位盒子看起来仿佛是由left和top属性来决意的。如许，在我们的演示页中，right属性不会失效，bottom也是一样。
相对定位盒子没有尺寸时也没甚么分歧（仅仅用两个相邻的属性来把持），由于在那种情形下，相对定位盒子会在垂直和程度偏向上压缩以合适内容，如许是的盒子看起来仿佛被界说了尺寸，尺寸巨细恰好与内容的巨细不异。独一的破例呈现在相对定位盒子由两个相反属性把持时。
尝尝半拉子
让我们看看，你设置相对定位盒子的left和right属性为0，但不界说任何宽度。如许盒子在其比来的定位的先人元素中舒展直到填满一切一切程度空间。如今，相对定位盒子的两侧与别的一个元素相干，如许，margin-left和margin-right将会失效，其值不管正负都无效，检察示例
正如你所看到的那样，正值挤压盒子的双方，而负值使盒子延长进来。
必要切记的是：IE6决不同意用两个相反的属性值来把持盒子的尺寸，如许margin也不会失效，除非给相对定位盒子界说尺寸。
总结
我但愿会商能打消相对定位盒子关于margin属性的疑虑，一旦这些成绩失掉了解，它就不会很庞大。除IE6的限定，但愿bug越少越好。
缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。 Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。 滚动条)层属性--溢出(visible/hidden/scroll/auto) 使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。
页:
[1]