Firebug调试CSS布局

Firebug与CSS布局

 

 

译/raywill

 

 

当CSS盒子之间没有正确的对齐的时候，可能很难找到原因。这时候可以用Firebug来测量一下盒子的偏移、外边距（margin）、内边距（padding）以及大小（size）。玩CSS，离不开它！

 

 

 

 

 

盒模型阴影

在css中，所有元素都适用于盒模型，拥有margin、border、padding和具体内容几个属性。把鼠标移动到Firebug左栏中显示的元素标签上，就能在屏幕上看到对应元素的盒模型结构。

 

 

 

 

测量每条边

 

 

先点一下Firebug右侧栏的Layout（布局）Tab，然后点击元素，再把鼠标移动到屏幕上点击对应元素，就能看到屏幕上出现一个标尺（以pixel为单位）。这简直是太棒了！！快试试。

 

 

参数可视化及在线修改

你还可以在Firebug右侧的Layout（布局）选项卡中直接修改长宽高和padding等参数，效果立即可现。Cool！

 

 

 

 

原文：http://getfirebug.com/layout （本译文有编辑）