[Css]弹性布局小结-想对值em和%
弹性布局一般使用em和%为单位，但是他们的属性和相对值却完全不一样。
首先是em字体高，继承父元素字体大小，但是本元素大部分数值属性（width，height，line-height，margin，border，padding等）都是参照本身字体大小。例如父元素font-size：1em=10px，子元素font-size：2em=20px，而子元素width：2em=40px。
一个小例子代码如下：
body {
font:62.5%/2em Microsoft YaHei, Arial, Tahoma, Helvetica, SimSun, san-serif;
height:100%;
position:relative;
text-align:center;
background:#A5CEEF;
}
.divEm{ width:10em; height:10em; border:1em solid #000; background-color:#999; font-size:1em;}
.div2Em{ width:2em; height:2em; border:1em solid #000; background-color:#666; font-size:2em; margin:1em; padding:1em}
<div class="divEm">dieEm测试
<div class="div2Em">die2Em测试</div>
</div>
- 转换成px值即divEm：font-size=1em=10em，width=10em=100px，height=10em=100px，
border=1em=10px，margin=1em=10px，padding=1em=10px； - div2Em：font-size=2em=20px，width=2em=40px，height=2em=40px，
border=1em=20px，margin=1em=20px，padding=1em=20px；效果如下图
em盒模型相对值
使用绝对定位的top，left，right，bottom值也是参考本身元素字体高度。
- 发表时间：
- 2010年7月29日
- 标签：
- 留言数：
- 抢沙发
[Css]margin值解析小结
在蓝色理想看到一篇帖子如何理解负边距，代码如下：
#mainer {
float:left;
width:100%;
margin-right:-300px;
background:silver;
}
#main {
margin-right:300px;
}
#sider {
float:right;
width:300px;
background:orange;
}
<div id="mainer">
<div id="main"><strong>main</strong></div>
</div>
<div id="sider"><strong>sider</strong></div>
实际效果如下：
margin值测试
- 发表时间：
- 2010年7月28日
- 标签：
- 留言数：
- 抢沙发
[Css]弹性布局小结-单位初始化
自从写了这个皮肤之后，总结一下关于弹性布局的一些注意事项。由于小弟是新手，而且很久没练习页面了，很多地方只是总结一下基础知识，希望大虾们不吝赐教。
由于弹性布局使用想对单位em或者%，都是比较难计算的，因为想对单位都比较难计算。所以这里使用单位初始化，主要是针对em的。
相对值对照表
根据漫谈font-size一文学习到了，基于windows的浏览器大部分默认的字体大小是medium，即 16ppem下显示为16px。根据前辈提供的转换表，在样式里加了body { font-size:62.5%}，这样有两个好处：
- 1em=10px计算宽度高度更加方便（针对body子元素，孙子元素另算，以这个为基础）
- font-size：1.2em计算字体大小更加方便，不用根据16px计算。不过设置字体大小后子元素的字体大小会继承父元素的，计算起来也挺麻烦的。
[Css]博客改版小结
有一年没有写博客了，现在想想还是应该继续写博客的。这次顺便练习了一下弹性布局，小巧，简单，灵活。
主要学习到了以下几点技术：
1，采用960网页栅格化布局，左右两栏采用黄金分割比例。960栅格，实际宽度是950. 对于 24 x 40 的情景，最接近黄金分割的两栏布局是 350 : 590, 栏数比例为 9 : 15。
2拦黄金分割栅格化
