CSS 绝对定位学习
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<meta name="description" content=" ">
<meta name="keywords" content=" ">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<link href="css/basic.css?ver=01" mce_href="css/basic.css?ver=01" rel="stylesheet" type="text/css" />
<mce:script type="text/javascript" src="js/util.js" mce_src="js/util.js"></mce:script>
</head>
<body>
<mce:style type="text/css"><!--
.r{position:relative;width:300px;height:300px;border:1px solid #ccc;}
.a{background-color:red;height:25px;} /*普通div,按文档流*/
.a1, .a2, .a3, .a4{position:absolute; width:100px;height:100px;} /*设置绝对定位后，会寻找position设置为relative的祖先元素，然后以它为参照物，设置偏移位置，此处为他们的父元素class=r。如果向上寻找祖先元素，没有position设置为relative的元素，则以body元素为参照物*/
.a1{left:10px;top:30px;background-color:yellow;z-index:1} /*偏移位置,左10px ，上30px z-index为z轴的索引，即如果位置重叠，则z-index数量越大，在第三维位置越大*/
.a2{left:20px;top:40px;background-color:green;z-index:2}
.a3{left:30px;top:50px;background-color:blue;z-index:3}
.a4{right:-50px;bottom:-50px;background-color:purple;} /*设为绝对定位后，可以处以祖先元素之外*/
--></mce:style><style type="text/css" mce_bogus="1"> .r{position:relative;width:300px;height:300px;border:1px solid #ccc;}
.a{background-color:red;height:25px;} /*普通div,按文档流*/
.a1, .a2, .a3, .a4{position:absolute; width:100px;height:100px;} /*设置绝对定位后
相关文档：
首先感谢“丸子
”提供的这个
IE8的css hack；
关注过IE8的css hack的人相信大家都在使用这个hack，就是“\9”的css hack：
.test{
color:#000000; /* FF,OP支持 */
color:#0000FF\9;&n ......
Firefox hr
兼容问题，在ie中正常显示的hr属性设置，在Firefox里面不管怎么弄都是他妈的不出来，改了不少属性，调整了位置，同时搜索了不少文章，仍然不
行，最后看到一篇文章说ff中必须设置背景颜色才有效果的，真是xxx的，这种问题自己闭门造车的话整上个三天三夜都找不到解决办法啊！
把代码贴出来分享下：
hr {
......
CSS 盒模型
网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的，请看下图：
如果是 Firebug 用户的话(基本和前端有关的都会用到 Firebug 吧 – 糖伴西红柿)，就会很熟悉下面的图表了。
这个图表很好地展示了作用于页面上任意盒子的数值。
注意以上两个例子中，margi ......
查看原文：http://www.csswang.com/css/110.html
导航结构在网站设计中是起到决定性作用的，导航菜单/栏常常通过颜色、排版、形状和一些图片来帮助网站创造更好的视觉和感受，它是网页设计的关键元素。
虽然网站导航菜单的外观是网页设计中关系到整个设计成败与否的关键，但视觉效果也不能影响到网站可用性。最理想的 ......
本文将讲述HTML和CSS的关键—盒子模型(Box model). 理解Box model的关键便是margin和padding属性, 而正确理解这两个属性也是学习用css布局的关键.
注: 为什么不翻译margin和padding? 原因一, 在汉语中并没有与之相对应的词语; 原因二: 即使有这样的词语, 由于在编写css代码时, 必须使用margin和padding, 如果我们总用 ......
