盒子模型

• 盒子模型
• padding 内边距
• border 边框
• margin 外边距
• • margin 塌陷问题
  • overflow

盒子模型

div {width: 400px;height: 400px;padding: 20px;border: 10px solid black;margin: 50px;background-color: gray;
}

border，padding 同样会被赋背景颜色，而margin不会被赋背景颜色；

盒子大小 = padding + border + content

padding 内边距

.xhd {/* 分别设定每个边距 */padding-top:  ;padding-bottom:  ;padding-left:  ;padding-right:  ;/* 同时设定四个编剧 */padding: 20px;/* 上下为10，左右为20 */padding: 10px 20px;/* 上10，左右20，下30 */padding: 10px 20px 30px;/* 上右下左 10 20 30 40 */padding: 10px 20px 30px 40px;
}

border 边框

.xhd {border-width: 10px;border-color: blue;border-style: solid;/* 复合 */border: 10px solid blue;/* 边框宽度 */border-left-width:  ;border-right-width:  ;border-top-width:  ;border-bottom-width:  ;/* 边框颜色 */border-left-color:  ;border-right-color:  ;border-top-color:  ;border-bottom-color:  ;/* 边框风格 */border-left-style: solid;border-right-style: dashed;border-top-style: double;border-bottom-style: dotted;/* 分侧设置 */border-left: 10px purple solid;border-right: 20px blue dashed;border-top: 30px black double;border-bottom: 22px green dotted;
}

margin 外边距

.xhd {/* 分别设定每个外边距 */margin-top:  ;margin-bottom:  ;margin-left:  ;margin-right:  ;/* 同时设定四个编剧 */margin: 20px;/* 上下为10，左右为20 */margin: 10px 20px;/* 上10，左右20，下30 */margin: 10px 20px 30px;/* 上右下左 10 20 30 40 */margin: 10px 20px 30px 40px;
}

行内元素 无法设置上下 margin，只能设置左右 margin，块和行内块元素可以设置四外边 margin；

块级元素 行内块元素 实现左右居中效果：

.xhd {margin: 0px auto;
}

margin 塌陷问题

在父元素中，给第一个子元素赋 margin-top 以及最后一个子元素 margin-bottom 值都会被父元素 ”抢走“ ；

解决办法：

解决方案一：（不推荐）

给父元素加一个边框；

解决方案二：（不推荐）

给父元素加一个padding；

解决方案三：（推荐）

overflow: hidden;

overflow

.xhd {/* 横向纵向都隐藏截断超出的部分 */overflow: hidden;/* 默认值，显示 */overflow: visiable;/* 滚动条 */overflow: scroll;/* auto 字体不溢出不产生滚动条 */overflow: auto;/* 还可以对overflow-x, -y 单独设定 */overflow-x: ;overflow-y: ;
}