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

女爷i 2023-01-01 07:53 108阅读 0赞

### 文章目录 ###

*   *  outline
     *  padding border margin outline

## outline ##

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

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

页面会发生的变化(以百度为例)：  
该样式应用前：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70]

该样式应用后：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70 1]

知乎：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70 2]

## 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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70]: /images/20221120/48b4a052c7c74686a3d3a8014f2b7cde.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210101083843911.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210101084701271.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3,size_16,color_FFFFFF,t_70
[padding]: https://www.runoob.com/css/css-padding.html
[border]: https://www.runoob.com/cssref/pr-border.html
[margin]: https://www.runoob.com/cssref/pr-margin.html
[outline]: https://www.runoob.com/cssref/pr-outline.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20210101141740563.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXVqaW4xOTk3,size_16,color_FFFFFF,t_70#pic_center