css-背景 - 《前端技术》

版心

安全宽度：指的是大部分用户的屏幕可以看到的区域，没有规范的值，取决于我们应该去适配多少用户的电脑，不同的网站选择的安全也不是一样的，具体用多少看设计师的
版心核心代码：

.wrap{
    width:版心宽度;
    margin:0 auto;
}

重叠问题
当两个相邻的块元素同时拥有一个相反的margin值时（上面的元素有一个margin-bottom值，下面的元素有一个margin-top值），两个margin值会产生重叠，会取其中最大的margin值，这叫margin的重叠问题
解决方法：尽量给块元素设置同一方向的margin值
穿透问题
在普通流中，当给子元素设置一个margin-top值时，福元素会随着子元素一块移动，这就叫margin的穿透问题
解决办法：

overflow:解决文本溢出
hidden：溢出的部分截断隐藏
scroll：不管文本有没有溢出都会在右边和下面产生一个滚动条
auto：只有在某个方向上溢出的时候才会在哪个方向产生一个滚动条

标准盒模型：
实际的宽：设置的width+左边的padding值+右边的padding值+左边的border值+右边的border值
实际的高：设置的height+上面的padding值+下面的padding值+上面的border值+下面的border值

可用的内容区域：设置的width和height区域

IE盒模型：
实际的宽：设置的宽度width
实际的高度：设置的高度height

可用的内容区域：设置的宽高-padding_2-border_2

box-sizing：
content-box：标准盒模型
border-box：ie盒模型

background-color背景颜色，颜色三中取值，（十六进制，关键字，igb)
background-image:设置背景图片
url()引入背景图片的路径
background-repeat设置背景图片的平铺方式
repeat:平铺(默认属性)，水平和垂直方向都平铺
no-repeat：不平铺
repeat-x：在水平方向上平铺
repeat-y：在垂直方向上平铺
background-position:设置背景图片的位置
两个取值：（背景图片默认位置在图片的左上角也就是0,0）
第一个：代表水平方向上的位置
第二个：代表垂直方向上的位置

固定值：正值是右下方向，负值是左上方向
关键字：
水平：左left 中center 右right
垂直：上top 中center 下 bottom

background-attachment:用来设置背景相对于窗口的的固定定位
fixed设置这个属性使背景图片相对于浏览器窗口进行定位，此时添加background-attachment: fixed;的元素相当于一个视口，只有当这个元素到达设置背景图片的位置的时候才能看到图片
background：background-color background-image background-repeat background-position background-attachment

精灵图的好处:

打开ps建立一个画布（ctrl+n），新建之后，需要定义画布的大小，单位需要改为px，定义画布的宽高，背景一定要选择透明，然后点击确定
截取想要的精灵图（复制psd文件里面的图层）放在我们建立的画布中，图与图之间要有一定的间距，这个间距不能太小，也不能太大，最后保存图片为png格式放在项目文件夹下
在需要使用精灵图的位置建立一个专门存放精灵图标的一个空间，通过background-image引入精灵图，然后通过background-position定位想要的精灵图的位置即可