Firebug调试CSS布局

Firebug与CSS布局

 

 

译/raywill

 

 

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

 

 

Firebug调试CSS布局_第1张图片

 

 

 

盒模型阴影

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

Firebug调试CSS布局_第2张图片

 

 

 

 

测量每条边

 

 

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

Firebug调试CSS布局_第3张图片

 

 

参数可视化及在线修改

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

 

Firebug调试CSS布局_第4张图片

 

Firebug调试CSS布局_第5张图片

 

 

原文:http://getfirebug.com/layout (本译文有编辑)

 

 

你可能感兴趣的:(css,Firebug,layout,border)