Firebug调试CSS布局

    技术2022-05-17  35

    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 (本译文有编辑)

     

     


    最新回复(0)