MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Examine and edit the box model

Viewing the box model 查看盒子模型

查看盒子模型内容

点击Select Element button 选择元素的按钮之后,当鼠标悬停在页面的某个元素的时候,该元素的box model盒子模型将在页面显示。

当鼠标悬停在HTML区中的元素,元素的盒子模型也会显示。

From Firefox 39, if the element is inline and is split over multiple line boxes, the highlighter shows each individual line box that together make up the element:

The Box Model view 盒子模型视图

当选中一个页面元素的时候,可以在Box Model view盒子模型视图看到该元素详细的盒子模型信息。

从Firefox 40开始,当鼠标悬停在一个盒子模型的值上方,就可以看到一个弹框提示这个值来自哪个CSS样式。

Editing the box model 编辑盒子模型

可以编辑Box Model view盒子模型视图里的变量,并可以在页面立刻看到修改的效果。

文档标签和贡献者

 此页面的贡献者: webery, c_king
 最后编辑者: webery,