css中margin负值使用一例.docVIP

css中margin 负值使用一例 margin我很少会用到，一般用到也只是相对的去调整一个层的位置以达到一定效果。因为最近正在着手更新自己使用的主题，所以研究了一下各种布局的实现方法。发现使用margin负值形成的布局结构要比我们一般用层嵌套层再去分别左右浮动的方式要灵活很多。 margin 负值对文档流的影响 确切的说应该是margin负值对于层定位的影响， 没有浮动时 如果没有浮动的话，负的外边距会影响到各个层的高度、宽度，当然这要看你设定的是水平还是垂直的负边距。有兴趣的可以去建立一个demo实验一下。 有浮动时 有浮动时当然要复杂的多，本例以向左浮动（float:left;）为例。DEMO 地址：margin 负值布局演示 margin-demo 简单概括一下这个例子： 整个演示包括三个层 自左至右是 #gird-left、#main、#siderbar在文档流的先后顺序却是#main、#gird-left、#siderbar三个层的浮动都是向左（float:left;），而且三个层都在一个水平位置。比较通俗的讲法就是如果你想实现如上布局就要外边距的负值大于当前水平的所有宽度。css布局定义如下： #main{margin: 0 315px 0 160px;}以#main作为主要的文档流显示左右分别预留160像素和315像素来给剩下的两个层留出位置。 #gird-left{margin-left: -100%;} 左外边距-100%，可以将本层直接从文档流抽出直接显示在父级层最左上的位置。 #siderbar{margin-left: -300px;} 将#siderbar设定-300像素是因为本层有300像素宽，而上一个层宽度为100%； 这一个例子牵扯到了margin负值的多种综合应用，希望你能看懂。浮动的margin负值布局，同一水平位置是会层叠的，靠后的文档流会在上层，如果看不懂给一个增强理解的例子： margin-- margin负值布局的好处 从文档的先后顺序来看，我们不需要像传统布局那样，由上至下，由左至右的安排文档流代码的顺序。很明显，作为一个网页内容的重要先后顺序为#main、#gird-left、#siderbar，而我们阅读网页的习惯是将主要的东西放中间，其次左，最后右，使用负值外边距我们完美的做到了这一点，不但能优化有哪些信誉好的足球投注网站引擎而且还提高了阅读体验。 【案例解析】 一、三栏显示（无需浮动及额外标签）;列表过长时，我们一般都会考虑通过浮动来使之显示为多列，其实换个思路也可以实现。 !doctype htmlhtml lang=enhead??? meta charset=UTF-8??? titlenegative margin 之列表三栏显示/title??? style??? *{margin:0;padding:0;font-size: 14px;}??? .goback{clear:both;height:30px;line-height:30px;text-align: center;} ??? ul {list-style:none;}??? li {width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.3em;}??? .col2 {margin-left:120px;}??? .col3 {margin-left:240px;}??? .top {margin-top:-2.6em;}??? /style/headbody??? ul??????? li class=col110家国企年招待费超29亿 被指仅用于吃喝/li??????? li class=col1媒体称中国豪车市场因政府严控公车快速萎缩/li??????? li class=col2 top菲发言人笑答射杀台渔民事件/li??????? li class=col2情妇打越洋电话提供证据/li??????? li class=col3 top雷政富涉嫌受贿罪被检察机关提起公诉/li??????? li class=col3日称冲绳久米岛附近海域发现疑似中国海军潜艇/li??? /ul/body/html二、叠加效果； 最常见的选项卡，当前项选中状态； !doctype htmlhtml lang=enhead??? meta charset=UTF-8??? titlenegative margin 之叠加/title??? style??? *{list-style:none;margin:0;paddi