在css盒模型定义中，外边距指的是元素距离相邻元素的距离，也就是元素的边界。布局中，正的外边距能拉开元素之间的距离，这个很好理解，但是设置负的外边距会产生意想不到的渲染结果，一些理解笔记整理如下：
- 总的来说，从文档流位置的角度看，设置了负外边距的元素相当于边界往里缩，结果其相邻其他元素会沿着文档流的反方向流动。（这对于正常的文档流和浮动的元素影响是一样的）
- 设置负外边距可以增加元素的宽度，这个作用能实现的前提是该元素是一个包含在给定宽度的父元素但没有设定width属性的元素，下面是实例代码：
<style> body,ul,li{ padding:0; margin:0;} ul,li{ list-style:none;} .container{ height:210px; width:460px; border:5px solid #000;} ul{ height:210px; overflow:hidden; margin-right:-20px;}/*一个负的margin-right,相当于把ul的宽度增加了20px*/ li{ height:100px; width:100px; background:#09F; float:left; margin-right:20px; margin-bottom:10px;} </style> <div class="container"> <ul> <li>子元素1</li> <li>子元素2</li> <li>子元素3</li> <li>子元素4</li> <li>子元素5</li> <li>子元素6</li> <li>子元素7</li> <li>子元素8</li> </ul> </div> - 对于绝对定位的元素，设置负外边距可以实现元素 元素相对父元素水平（垂直）居中显示--首先设置left: 50%（或top: 50%），再设置margin-left（或margin-right）为自身宽（或高）的一半，即可实现居中显示，下面是实例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0s; } .father { margin: 100px ; width: 200px; height: 200px; border: 1px solid #000; position: relative; } .children { width: 50px; height: 50px; background: #f60; position: absolute; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; } </style> </head> <body> <div class="father"> <div class="children"></div> </div> </body> </html>
时间： 2024-10-03 22:29:25