HTML CSS 盒模型 DOM元素布局 调试神器 padding border margin outline

outline

开发环境中，在页面中引入以下一句CSS。

  <style>
    * {
      outline: auto;
    }
  </style>

如果是单个HTML测试，在body>head>style中写属性即可
如果是React项目(或其他)，可以在入口jsx中引入这个样式规则。
功能：自动显示所有DOM元素的外边框，可用于元素块布局调整阶段的开发。

页面会发生的变化(以百度为例)：
该样式应用前：

该样式应用后：

知乎：

padding border margin outline

从DOM元素的内容(content)向外，依次是：
content 内容
padding 内衬
border 边界
marign 外衬(页变空白)
outline 外轮廓

样例：

* {
  padding:10px 5px 15px 20px;
  border:3px solid red;
  margin:10px 5px 15px 20px;
  outline:green solid medium;
}

值规则及链接依次如下：
padding: padding-top padding-right padding-left padding-bottom
border: border-width border-style border-color
margin: margin-top margin-right margin-left margin-bottom
outline: outline-color, outline-style, outline-width

如何修改已上线的网站源码，启用该CSS功能？

F12打开 element/Inspector ，找到 html>head>style节点，双击可编辑该部分代码。
在第一行加入：* { outline: auto; }

然后鼠标点击其他地方可以保存这些改动，保存之后：

每个DOM元素的外边界outline清晰可见。