标签：设置 over pad osi doc 渲染 char children type
在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>标签：设置 over pad osi doc 渲染 char children type
原文地址：http://www.cnblogs.com/zhangdecai/p/7990172.html
