三、css背景图片和盒子模型，背景

三、css背景图片和盒子模型

1、背景图片

在给元素设置背景图片的时候一定要注意元素是否宽高。

（1）背景图片我们一般用于 小图标背景 或者超大背景图片；

（2）背景图片位置只能通过：background-position；

background-position：方位词 方位词；（无顺序要求）

background-position：数字 数字；（可以是具体整数，也可以是百 分数。x，y）

background-position：数字 方位；（第一个x，第二个y）

background-position：数字；（一个数字表示x，默认垂直居中）

（3）背景图片固定：background-attachment：fixed | scroll

background-attachment：scroll；背景图片随对象内容滚动

background-attachment：fixed；背景图像固定

（4）背景透明：background：rgba（0，0，0，0.3）

（5）背景合写：

background：颜色 图片地址 是否平铺 背景滚动 背景位置（这些数值 没有先后顺序）

2、盒子模型：

内容+边框（border）+内边距（padding）+外边距（margin）

盒子真实大小：内容 + 边框 + 内边距

3、内外边距：

（1）padding特点：会撑开有宽度的盒子  

box-sizing:border-box; 内减盒子模型：不需要手动用盒子宽减去内 边距

（2）行内元素内外边距：建议不要设置上下内外边距，可以设置左右内外 边距

（3）外边距合并

①外边距合并：垂直相邻的两个元素，一个设置下，一个上外边距，会 选择大的合并

解决方法：其中一个设置外边距即可

（4）外边距塌陷

父子结构，子元素设置了一个上外间距，父盒子会塌陷，两者共同使用 上外边距。

解决方法：

①给父元素设置上边框

②给父元素设置内边距

③给父元素设置overflow：hidden

（5）盒子模型布局稳定性： width > padding > margin

4、圆角border-radius

border-top-left-radius,方位词顺序，先写垂直，再写水平

5、阴影-缩放-过渡

（1）盒子阴影

box-shadow: 数字1(x轴) 数字2(y轴) 数字3(模糊度) 数字4(阴影 宽) 颜色；

（2）文字阴影

text-shadow: 数字1(x轴) 数字2(y轴) 数字3(模糊度) 颜色；

（3）过渡（transition）

transition：属性（或者all）  时间；

（4）缩放（transform）

transform：scale（数字）；（缩放倍数）