css學習-理解負外邊距
阿新 • • 發佈：2017-12-06
list absolut 方向 top mar div 布局 height 定義
在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>
css學習-理解負外邊距