十步掌握CSS布局定位译

　　编程之家 jb51.cc 无意中看到此文，因作者强调其中避开了浏览器bug/分歧，所以个人认为值得借鉴。不才仔细看了此文，自觉受益匪浅，屡试不爽，佩服作者对css布局的精炼总结，顺便小译了一段，英文水平有限，且个人通常写写PHP，对css了解不深却有点兴趣，错误之处还请指正。

　　个人没有空间，代码中的css文件和js保留了完整路径：http://www.barelyfitz.com/screencast/html-training/css/positioning/

　　原文地址：http://www.barelyfitz.com/screencast/html-training/css/positioning/

　　如有转载，请注明原文出处，译过的就在这里了。

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd><html xmlns=http://www.w3.org/1999/xhtml xml:lang=en lang=en><head><<a href="https://www.jb51.cc/tag/Meta/" target="_blank" class="keywords">Meta</a> http-equiv=Content-Type content=text/html; charset=gb2312 /><title>10步掌握CSS定位: position static relative absolute float - LIEHUO.NET</title><link rel=stylesheet href=http://www.barelyfitz.com/screencast/html-training/css/positioning/tabber.css type=text/css media=screen /><link rel=stylesheet href=http://www.barelyfitz.com/screencast/html-training/css/positioning/tabber-print.css type=text/css media=print /><style type=text/css media=screen>#example {float:right;}#example div {}#div-before,#div-after {background-color:#eee;color:#000;}#div-1 {width:400px;background-color:#000;color:#fff;}#div-1-padding {padding:10px;}#div-1a {background-color:#888;color:#fff;}#div-1b {background-color:#666;color:#fff;}#div-1c {background-color:#aaa;color:#fff;}#example div p {margin:0 .25em;padding:.25em 0;}#description {float:left;width:40%;}pre {padding:1em;border:1px dashed #aaa;background:#fafafa;}p {margin:0.5em 0;}h3 {color:#999;}</style><link rel=alternate stylesheet href=http://www.barelyfitz.com/screencast/html-training/css/positioning/1.css type=text/css title=1 media=screen /><link rel=alternate stylesheet href=http://www.barelyfitz.com/screencast/html-training/css/positioning/2.css type=text/css title=2 media=screen /><link rel=alternate stylesheet href=http://www.barelyfitz.com/screencast/html-training/css/positioning/3.css type=text/css title=3 media=screen /><link rel=alternate stylesheet href=http://www.barelyfitz.com/screencast/html-training/css/positioning/4.css type=text/css title=4 media=screen /><link rel=alternate stylesheet href=http://www.barelyfitz.com/screencast/html-training/css/positioning/5.css type=text/css title=5 media=screen /><link rel=alternate stylesheet href=http://www.barelyfitz.com/screencast/html-training/css/positioning/6.css type=text/css title=6 media=screen /><link rel=alternate stylesheet href=http://www.barelyfitz.com/screencast/html-training/css/positioning/7.css type=text/css title=7 media=screen /><link rel=alternate stylesheet href=http://www.barelyfitz.com/screencast/html-training/css/positioning/8.css type=text/css title=8 media=screen /><link rel=alternate stylesheet href=http://www.barelyfitz.com/screencast/html-training/css/positioning/9.css type=text/css title=9 media=screen /><link rel=alternate stylesheet href=http://www.barelyfitz.com/screencast/html-training/css/positioning/10.css type=text/css title=10 media=screen /><script type="text/javascript">function chooseStyle(title){ setActiveStyleSheet(title);}var tabberOptions = { onTabClick: function(tabIndex) { chooseStyle(tabIndex+1); }};</script><script type="text/javascript" src="http://www.barelyfitz.com/screencast/html-training/css/positioning/styleswitcher.js"></script><script type="text/javascript" src="http://www.barelyfitz.com/screencast/html-training/css/positioning/tabber.js"></script><script type="text/javascript">/* If the user has javascript,temporarily set the .tabber class to <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play:none *///document.write(u<a href="https://www.jb51.cc/tag/nes/" target="_blank" class="keywords">nes</a>cape('%3Cstyle%20type%3D%22text/css%22%3E%0A.tabber%20%7B%20<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play%3Anone%3B%20%7D%0A%3C/style%3E%0A'));</script></head><body ><table id=layout_table cellpadding=0 cellspacing=0 border=0 width=100%><tr valign=top><td id=block_left_kludge></td><td id=block_middle width=100% rowspan=2><div id=content><h1>10步掌握CSS定位: position static relative absolute float</h1><div id=description><div class=tabber><div id=text-1 class=tabbertab title=1><h2>1. position:static</h2><p>元素的 position <a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a><a href="https://www.jb51.cc/tag/mo/" target="_blank" class="keywords">默</a>认值为:<em>static</em>，即该元素出现在文档的常规位置，不会重新定位。</p><p>通常此<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>值可以不设置，除非是要覆盖之前的定义。</p><pre>#div-1 {position:static;}</pre></div><div id=text-2 class=tabbertab title=2><h2>2. position:relative</h2><p>设置了 <em>position:relative</em>，便可以结合<em>top</em> 、 <em>b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om</em>、 <em>left</em> 、 <em>right</em> 的<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>来偏移其文档的常规位置。</p><p>例如将 div-1 向下移动 20 像素、向左移动 40 像素:</p><pre>#div-1 {position:relative;top:20px;left:-40px;}</pre><p>注意 div-1 未被移动之前的地方，现在多了一点空隙，紧接着 div-1 的元素(div-after)却没有被移动，事实上即便 div-1 被移动了，<strong>它仍占据原始位置</strong>。</p><p>貌似 <em>position:relative</em> 用处不大(我到觉得这点很有用)，但在后面的<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>中显得尤为重要。</p></div><div id=text-3 class=tabbertab title=3><h2>3. position:absolute</h2><p>设置了 <em>position:absolute</em>，即绝对定位，便可以将元素放在文档中任何想放的位置。</p><p>例如将 div-1a 放置到右上角：</p><pre>#div-1a {position:absolute;top:0;right:0;width:200px;}</pre><p>注意！由于 div-1a 被移走,<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>中的其他元素位置也变了： div-1b,div-1c,div-after 都因此上移了。</p><p>div-1a 被放置在<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>的右上角。能直接地定位元素很方便，但作用也不大。</p><p>这里真正<a href="https://www.jb51.cc/tag/yaozuo/" target="_blank" class="keywords">要做</a>的是将 div-1a <em>相对于</em> div-1 定位，这就又要讲到 relative <a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a>了。</p><h3>注</h3><ul><li>IE浏览器Bug：设置了相对宽度(如 width:50%)，该宽度将基于父元素而非自身。</li></ul></div><div id=text-4 class=tabbertab title=4><h2>4. position:relative + position:absolute</h2><p>设置div-1的位置为 <em>relative</em> ， div-1中元素的定位都将相对于div-1。现将div-1a的position设为:absolute，可以实现将其置于div-1的右上角：</p><pre>#div-1 {position:relative;}#div-1a {position:absolute;top:0;right:0;width:200px;}</pre></div><div id=text-5 class=tabbertab title=5><h2>5. 两列绝对定位</h2><p>接下来使用relative 和absolute 实现两列的绝对定位：</p><pre>#div-1 {position:relative;}#div-1a {position:absolute;top:0;right:0;width:200px;}#div-1b {position:absolute;top:0;left:0;width:200px;}</pre><p>使用绝对定位(absolute positioning)的优点就是不需考虑元素在html中的位置，可以对元素任意放置，此处故意将div-1b放到div-1a之前；</p><p>注意，还有个元素被绝对定位的元素遮住了，怎么办？</p></div><div id=text-6 class=tabbertab title=6><h2>6. two column absolute height</h2><p>一种办法是设置固定高度。</p><p>但不是万全之策，因为元素的高度、字体的大小并不总是确定的。</p><pre>#div-1 {position:relative;height:250px;}#div-1a {position:absolute;top:0;right:0;width:200px;}#div-1b {position:absolute;top:0;left:0;width:200px;}</pre></div><div id=text-7 class=tabbertab title=7><h2>7. float(浮动)</h2><p>针对高度不定的情况，绝对定位不好用，于是想到另一方案。</p><p>可以尽量使用向左或向右浮动来实现<a href="https://www.jb51.cc/tag/wenzi/" target="_blank" class="keywords">文字</a>环绕，特别是环绕<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>，此处用于更复杂的布局工作(也只有用这种<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>)。</p><pre>#div-1a {float:left;width:200px;}</pre></div><div id=text-8 class=tabbertab title=8><h2>8. 多列浮动</h2><p>将两列都像左浮动，可以实现两列并列。</p><pre>#div-1a {float:left;width:150px;}#div-1b {float:left;width:150px;}</pre></div><div id=text-9 class=tabbertab title=9><h2>9. 多列浮动后清除浮动</h2><p>将元素浮动后，再使用clear 清除浮动，后面<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>拉向下。</p><pre>#div-1a {float:left;width:190px;}#div-1b {float:left;width:190px;}#div-1c {clear:both;}</pre></div><div id=text-10 class=tabbertab title=10><h2>10. <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>cl<a href="https://www.jb51.cc/tag/aim/" target="_blank" class="keywords">aim</a>er & Resources</h2><p>These examples are extremely simplified and do not trigger some of the CSS bugs in the Windows IE <a href="https://www.jb51.cc/tag/bro/" target="_blank" class="keywords">bro</a>wser (of which there are <em>many</em>).</p><p>The following page was invaluable:<br /><a href=http://www.autisticcuckoo.net/archive.<a href="https://www.jb51.cc/tag/PHP/" target="_blank" class="keywords">PHP</a>?id=2004/12/07/relatively-absolute _fcksavedurl=http://www.autisticcuckoo.net/archive.<a href="https://www.jb51.cc/tag/PHP/" target="_blank" class="keywords">PHP</a>?id=2004/12/07/relatively-absolute>Relatively Absolute</a></p><p>While you're here check out the following:</p><ul><li><a href=http://www.barelyfitz.com/projects/ _fcksavedurl=http://www.barelyfitz.com/projects/>BarelyFitz Designs Open-Source Software Projects</a></li><li><a href=http://www.barelyfitz.com/screencast/ _fcksavedurl=http://www.barelyfitz.com/screencast/>BarelyFitz Designs Screencasts</a></li></ul></div></div></div><div id=example><div id=div-before><p>id = div-before</p></div><div id=div-1><div id=div-1-padding><p>id = div-1</p><div id=div-1a><p>id = div-1a</p><p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p></div><div id=div-1b><p>id = div-1b</p><p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis,arcu ut bibendum comm<a href="https://www.jb51.cc/tag/odo/" target="_blank" class="keywords">odo</a>,magna nisi tincidunt tortor,quis accumsan augue ipsum id lorem.</p></div><div id=div-1c><p>id = div-1c</p></div></div></div><div id=div-after><p>id = div-after</p></div></div></div></td></tr><tr><td></td></tr><tr valign=top><td colspan=3></td></tr></table></body></html>
提示：可修改后代码再运行!

十步掌握CSS布局定位译

相关推荐