css盒子模型

对象实际宽度=左侧外边距+左侧边框+左侧内边距+宽度+右侧内边距+右侧边框+右侧外边距

margin：

浮动元素不会发生外边距合并

1.解决包含式外间距合并问题：给父元素加边框

<div id="father">
   <div id="son"></div>
</div>

#father{
   width:500px;
   height:200px;
   border:1px solid red;//加一像素红色实线边框来解决外边距合并问题
   bgackground:green;
}
#son{
   width:200px;
   height:100px;
   bgackground:pink;
   margin-top:20px;//会出现外边距合并问题（父元素随着子元素一起向下）
}

2. 外间距合并：只有上下边距可以，左右边距不能合并

<div id="box1"></div>
<div id="box2"></div>


#box1{
   width:200px;
   height:200px;
   bgackground:green;
   margin-bottom:50px;
}
#box2{
   width:200px;
   height:200px;
   bgackground:pink;
   margin-top:20px;
}
//最终两个盒子之间的边距为50px而不是70px,因为进行了外间距合并

3.设置块状元素居中

<div id="box"></div>

#box{
   width:500px;
   height:100px;
   background:red;
   margin:10px auto;//auto实现让块状元素居中显示
}

border：

1.简写：border: 1px solid red;(分别为border-width ；border-style ；boredr-color的缩写，默认3px，黑色)  (不简写：border-right-style)

2.border-style:（为空时边框不出现）

dotted 点状

solid 实线

double 双线

dashed 虚线

none 无边框

padding:

内边距：不能为负数

box-sizing：

1.box-sizing:content-box;  ：标准盒模型：padding和boeder的宽高要记录在盒子模型的宽高之内，margin不需要，元素的实际大小为宽高+border+padding（border和padding不被包含在width和height内）

2.box-sizing:boreder-box;  ：怪异盒（IE盒）模型：padding和border被包含在定义的width和height之内，元素实际的大小即为定义的宽高的大小