7-CSS盒模型

1 盒子组成

（1）外边距 margin

​ 代表盒子四周的区域。相邻元素的边距会合并（margin collapsing）

• 上外边距 margin-top、下外边距 margin-bottom、左外边距 margin-left、右外边距 margin-right

• 连写 margin: 上 右 下 左;

  （顺时针方向）

  margin: 10px 20px；（上下 左右 ）

  margin: 10px 20px 5px;（上 左右 下）

  注意：

  • 浏览器是默认左对齐的。看起来margin-right没有生效，其实有效果的，只是在默认即标准流的情况的下显示不出来效果，可以加右浮动脱离标准流。
  • 在默认(标准流)布局的垂直方向上, 默认情况下外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的。水平方向上的外边距会叠加。

（2）边框border

​ 设定介于padding的外边缘与margin的内边缘之间，默认值为0

• 边框宽度 border-width

• 边框样式 border-style

• 边框颜色 border-color

• 圆角边框 border-radious

• 连写 border: 边框的宽度 边框的样式 边框的颜色;

（3）内边距padding

​ 内间距 在任何定义的边界内的元素内容周围生成空间

• 上内边距 padding-top、下内边距 padding-bottom、左内边距 padding-left、右内边距 padding-right

• 连写 padding: 上 右 下 左;

（4）宽高width & height

​ 用于设置内容区的宽高，该片区域用于显示内容。盒子高度默认为内容的高度。

2 CSS盒模型

（1）内容盒子（W3C盒子）

- 内容区的宽	

	width 

- 内容区的高	

	height 

- 盒子的宽  

	width+paddingLeft+paddingRight+borderLeft+borderRight  

- 盒子的高  

	height+paddingTop+paddingBottom+borderTop+borderBottom 

- 所占屏幕空间的宽  

	width+paddingLeft+paddingRight+borderLeft+borderRight +marginLeft+marginRigh

- 所占屏幕空间的高

	height+paddingTop+paddingBottom+borderTop+borderBottom+marginTop+marginBottom

（2）IE盒子

、

- 内容区的宽	

	width-paddingLeft-paddingRight-borderLeft-borderRight

- 内容区的高	

	height-paddingTop-paddingBottom-borderTop-borderBottom 

- 盒子的宽  

	width

- 盒子的高  

	height

- 所占屏幕空间的宽  

	width+marginLeft+marginRigh

- 所占屏幕空间的高

	height+marginTop+marginBottom 

（3）切换盒模型

 /* 切换边框 */
box-sizing: border-box;
 /* 切换内容 */
box-sizing: content-box;

（4）为什么两个嵌套盒子，当给里面的盒子设置margin-top,外面一个盒子(父元素)也会被顶下来

原因：

• ​ 子元素和父元素上边框重合在一起

• ​ 因为父元素的第一个子元素的顶部外边距margin-top碰不到有效的border或者padding，就会不断一层一层的找自己父元素的麻烦

解决办法：

• 只要给父元素设置一个有效的border或padding就可以有效的管制这个margin-top，防止它越级

注意：当控制父子元素之间的距离应优先考虑padding，margin多用于兄弟元素之间的距离

（5）外边距合并问题

父子级：给父元素添加边框
给父元素清除浮动 overflow:hidden
给父子元素一方设置display:inline-block
兄弟级：将margin设置到一个元素上

3 盒子背景样式

（1）background-color 背景颜色

（2）background-image 背景图片

（3）background-repeat 背景平铺属性

repeat 默认, 在水平和垂直都需要平铺
no-repeat 在水平和垂直都不需要平铺
repeat-x 只在水平方向平铺
repeat-y 只在垂直方向平铺

（4）background-position 背景定位属性

格式：background-position: 水平方向 垂直方向;

background-position: left center;
background-position: 100px 10px;(常用于雪碧图)

（5）background

格式：background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;

background: url('./images/硬件1.png') no-repeat 100px 100px;
background-position: 100px 10px;(常用于雪碧图)

（5）background

格式：background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;

background: url('./images/硬件1.png') no-repeat 100px 100px;