Firebug使用详解(9)

　　页面设计中，

　　我们有时候最头疼的是什么?

　　是盒子模型!

　　为了调整一个Element的margin、border、padding和相对位置，

　　我们往往需要花很多工夫去修改源代码，

　　然后刷新页面查看效果。

　　有了Firebug，

　　你就可以轻松应对了。

　　我们将右边的区域切换到“Layout”标签(图5-16)，

　　你会看到一个盒子模型，

　　里面从外到里通过不同的线和颜色划分出了offset、margin、border、padding和内容五个区域，

　　里面4个区域在每个边上都有1个数值，

　　表示该方向上的调整值。

　　我们先在左边选择“div2”，

　　然后把鼠标分别移动到“Layout”里的不同区域(图5-17)，

　　然后留意一下页面，

　　页面在顶部多了一条水平标尺，

　　在左边多一条垂直标尺，

　　而4条实线指示出了当前鼠标指示的区域实际位置，

　　通过与标尺的交点可以知道该区域离页面显示区域左上角的偏移量(单位是px)，

　　当然我们也可以通过layout中的数字计算出这些偏移量。

　　在图中，

　　我们还可以看到，

　　在内容区域的外面还有3个不同颜色的区域，

　　它们从里到外用不同颜色表示了padding、border、margin的位置和偏移量。

　　只要将鼠标移动到不同区域，

　　页面中的4条实线也会改变位置，

　　指示出页面中相应的区域。

　　我们还可以通过修改Layout中的数值，

　　对显示效果进行调整。

　　例如我们要将“div2”的内容显示区域扩大到200×200，

　　将鼠标移动最左边的100上，

　　光标变成“I”后，

　　单击鼠标，

　　然后在输入框中输入200，

　　按回车可继续修改高度值，

　　输入200，

　　回车后完成修改。

　　页面中的“div2”区域已经扩展到200×200了，

　　而源代码也增加了“style="width: 200px; height: 200px;"”(图5-18)。

　　我们切换标签到“Style”，

　　会发现多了“element.style {height:200px;width:200px;}”(图5-19)，

　　而CSS定义里面的高度和宽度都划了横线，

　　表示不起作用了，

　　“element.style”表示直接定义在Element源代码上的CSS属性。

　　有时候某些Element会有相同的属性，

　　也有自己特殊的属性，

　　而特殊的属性想写在Element的源代码上，

　　就可以在Style里单击鼠标右键选择“Edit Element Style..”进行添加。

　　如果有兴趣的话，

　　大家可以尝试修改“Layout”里的其它属性值，

　　看看页面的变化，

　　这里我就不再一一说明了。

　　如果不想在页面中显示标尺和4条实线，

　　可以不选择“Options”菜单里的“Show Rules and Guides”。

原文转自：http://www.cnblogs.com/xiachufeng/archive/2010/08/02/1790411.html