标准盒模型

标准盒模型：

1. 组成部分：content+padding+border+margin

               内容    内边距  边框   外边距

               玻璃杯   泡沫   快递盒 快递盒之间距离

content 内容区域

width；；元素的宽度

height: ；元素的高度

min-width：；最小宽度  max-width: ； min-height：；max=height：；

border边框

border-style:solid(实线）|dashed（虚线）|dotted（点线）|double（双实线，边框要求最少为3px）|none（不显示）；必须属性默认边框为黑色 3px

border-color

boeder-width

简写：border:边框宽度 边框样式 边框的颜色  ；

例子：border：1px solid red；

border-top: 1px solid  red;

border-bottom: 1px solid red;

border-right：1px solid  red；

padding:内边距  不可以取负值和auto

设置内容距边框的距离

语法：padding：value；   四周

padding: value value;   上下   左右

padding: value  value value; 上  左右   下

padding: value value value value; 上 右 下 左（顺时针）

单边的内边距：

padding-left: ；

padding-right: ；

padding-top: ；   上边内距

padding-bottom: ;  下内边距

padding会撑大容器常用与网页导航栏

margin：外边距 可以取正负、auto 设置元素间距离  margin透明的

margin：；             上左下右（顺时针）

单边的内边距：margin-left    margin-right   margin-top   margin-bottom

让块级元素水平居中：margin：0 auto；

外边距合并问题：当垂直方向上外边距相撞时，取最大值，浮动元素不合并

margin-top 问题：设置margin-top父元素跟着一起下来

解决办法：（1）父元素加over-flow：hidden；

1. 父元素或者子元素加浮动
2. 父元素加border：1px solid transparent；
3. 父元素加padding-top：1px；