盒子模型

1. 盒子模型

标准的盒子模型：

• 盒子模型有元素的内容、边框（border）、内边距（padding）以及外边距（margin）组成。
• 盒子里面的文字和图片等元素是内容区域
• 盒子的厚度称为盒子的边框
• 盒子内容与边框的距离称为内边距
• 盒子与盒子之间的距离称为外边距

2. 盒子边框

• 语法

border: border-width || border-style || border-color

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框样式
border-color	边框颜色

• 边框样式：none ：没有边框；solid：边框为单事线；dashed：边框为虚线；dotted：边框为虚线
• 边框综合设置

/*边框： 粗细 样式 颜色 ；*/
border: 1px solid red;

• 盒子边框写法总结表

上边框	下边框	左边框	右边框
border-top-style： 样式；	border-bottom-style	border-left-style：样式；	border-right-style：样式；
border-top-width ：宽度；	border-bottom-width：宽度；	border-left-width：宽度；	border-right-width：宽度；
border-top-color： 颜色；	border-bottom-color：颜色；	border-left-color：颜色；	border-right-color：颜色；
实际开发简写：border-top：宽度 样式 颜色；	实际开发简写：border-bottom：宽度 样式 颜色；	实际开发简写：border-left：宽度 样式 颜色；	实际开发简写：border-right：宽度 样式 颜色；

• 边框合并

  在设置表格边框样式时我们会发现：即使通过表格的cellspacing=“0”,将单元格与单元格之间的距离设置为0，但是两个单元格之间的边框会出现重叠，从而使边框变粗。
  解决这个问题，可以通过CSS属性：

border-collaspse: collaspse;/* 合并相临边框 */

3. 内边距（padding）

• 内边距
  padding属性用于设置内边距，是指边框与内容之间的距离

• 属性设置

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

• padding 简写

值的个数	含义
1	padding：上下左右内边距
2	padding：上下内边距 左右内边距
3	padding：上内边距 左右内边距 下内边距
4	padding：上内边距 右内边距 下内边距 左内边距（顺时针）

注意：当我们给盒子指定padding值后：盒子会被撑大。在实际开发中某些盒子的实际大小是固定的，不能改变，但若给了padding值，盒子就会被撑大，实际的盒子大小就发生了改变。但是如果这个盒子没有宽度，则padding不会撑开盒子。

解决办法：内边距是一定要给的，那么我能改变的就只能是内容宽度（width），让他减去多出来的内边距就可以了。

4. 外边距

• 外边距
  margin属性用于设置外边距，用于控制盒子与盒子之间的距离。
• 属性设置

属性	作用
margin-left	左内边距
margin-right	右内边距
margin-top	上内边距
margin-bottom	下内边距

• margin 简写与padding简写同理

5. 清除元素的默认内外边距

为了更灵活方便的控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除，代码如下：

*{
padding: 0;			/*清除内边距*/
margin: 0；		/*清除外边距*/
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。

6. 外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
（1）相临块元素垂直外边距合并

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

解决办法：尽量只给一个盒子添加margin

(2) 嵌套元素垂直外边距的合并（塌陷）

• 对于两个嵌套关系的块元素，如果父元素没有上内边距以及边框，父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大值。

解决办法：

• 给父元素定义上边框

border-top: 1px solid transparent;/*透明色*/

• 给父元素定义上内边距

padding-top:1px;

• 给父元素添加overflow：hidden；

overflow:hidden;