标签：

盒子模型 盒子模型

盒子模型有元素内容、边框（border）、内边距（padding）、外边距（margin）构成；

盒子里面的文字和图片等元素是内容区域；

盒子的厚度 我们称为 盒子的边框；

盒子内容与盒子之间的距离是内边距；

盒子与盒子之间的距离是外边距；

标准盒子模型

盒子边框（border） border: border-width || border-style || border-color 属性 感化
border-width   界说边框粗细，单位是 px  
border-style   边框的样式  
border-color   边框颜色  

border-style ：

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线；

dashed：边框为虚线；

dotted：边框为点线；

表格细线边框

通过表格的 cellspacing="0"，将单元格与单元格之间的距离设为 0

但是两个单元格之间的边框会呈现边框，从而使边框变粗；

通过设置 css 属性 table {border-collapse: collapse;} 暗示相邻边框合并在一起；

<style> table, th, td { border: 1px dashed #ccc; border-collapse: collspase; } </style> 内边距（padding） 属性 感化
padding-top   上内边距  
padding-bottom   下内边距  
padding-left   左内边距  
padding-right   右内边距  

当我们为盒子添加了内边距之后

内容和边框有了距离；

盒子变大了；

复合写法 padding: 10px 20px 30px 40px;

一个值 ： 上下摆布 10 px；

两个值 ： 上下10px，摆布20px；

三个值 ： 上10px，摆布20px，，下30px；

四个值 ： 上10px，右20px，下30px，左40px；顺时针

内盒尺寸计算 （元素实际巨细）

宽度：ElementHeight = content height + padding + border

高度：ElementWidth = content width + padding + border

盒子实际巨细 = 内容的宽度和高度 + 内边距 + 边框

padding不影响盒子巨细的情况

如果没有给一个盒子指定宽度，此时如果给这个盒子指定 padding，则不会撑开盒子。

外边距 属性 感化
margin-top   上外边距  
margin-bottom   下外边距  
margin-left   左外边距  
margin-right   右外边距  
复合写法

margin 值的简写代表含义，与 padding 值完全一致

块级盒子程度居中

让一个块级盒子实现程度居中，必需：

盒子必需指定宽度；

然后给摆布的外边距设置为 auto

实际事情中常用 .container {width: 960px; margin: 0 auto;}

常见的写法包罗：

margin-left：auto；margin-right：auto；

margin：auto；

margin：0 auto；

文字居中与盒子居中的区别

文字程度居中是 text-align: center;，而且还可以让行内元素和行内块元素居中对齐

盒子程度居中是 摆布 margin 改为 auto；

插入图片和配景图片区别

插入图片 用的最多的是好比产品类 移动位置只能靠盒模型 padding margin

配景图片我们一般用于小图标或者超大配景图片，配景图片只能通过 background-position

img { width: 200px; /* 变动插入图片的巨细 */ height: 210px; margin-top: 30px; /* 变动插入图片的位置 可以用 padding 或 margin 盒模型 */ margin-left: 50px; } div { width: 400px; height: 400px; border: 1px dashed #ccc; background: #fff url(image/image.png) no-repeat scroll; background-position: 30px 50px; /* 配景图片变动位置 */ } 断根元素默认的表里边距 * { margin: 0; padding: 0; }

注意：行内元素为了赐顾帮衬兼容性，尽量只设置摆布表里边距，不要设置上下表里边距；

外边距合并

使用 margin 界说块元素的垂直外边距时，可能会呈现外边距合并

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距 margin-bottom 下面的元素有上外边距 margin-top，则他们之间的垂直间距是取两者值中较大者，这种现象称为相邻块元素垂直外边距合并（也称外边距塌陷）

嵌套块元素垂直外边距合并（塌陷）

对付两个嵌套关系的块元素，如果父元素没有上边距及边框，父元素的上外边距会与子元素的上外边距产生合并；合并后取两者中较大者；

解决方案：

可以为父元素界说上边框

可以为父元素界说上内边距

可以为父元素添加overfolw：hidden