查看元素样式的盒模型

在前端开发中,经常需要查看或修改元素的盒模型数据,它包含了最外层的margin、边框border、内边距padding以及对应元素的宽width和高height所对应值。

依然是Element面板上选中元素后,在右侧的Styles下面拉倒最下面找到它。

查看盒模型的目的更可能的是要修改盒模型的相关属性。

  1. 鼠标悬停在盒模型对应的属性上,元素对应的会有高亮显示

  2. 双击盒模型对应的属性,可以输入值或者鼠标上下键修改对应的值

与修改元素的值不同的是,通过盒模型的修改只会修改当前选中的盒模型元素的值,以style属性保存在元素上。