CSS2-盒模型、背景图片

原文链接

盒模型属性

margin外边距（top,right,bottom,left）
border边框(top,right,bottom,left)
padding内边距(top,right,bottom,left)
content内容区(width,height)
margin,border,padding值的书写方法：
margin-top/-right/-bottom/-left
margin:10px 11px 12px 13px;  上右下左的顺序
margin:10px 12px;简写即上下10px,左右12px;
margin:10px; 即4个方向都是10px

关于margin的合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

IE 盒模型和W3C盒模型的区别

W3C盒模型（box-sizing:content-box）,宽度width=内容区content的宽度

IE盒模型（box-sizing:border-box）,宽度width=border+padding+content内容宽度

没有DOCTYPE的怪异模式，IE浏览器默认使用“IE盒模型”，IE8及以下也使用IE盒模型。

CSS Sprite(雪碧图|精灵图)

CSS Sprite图是把多个icon图标图片或页面会重复用到的小图片合并放在一张图里面，通过background-position这个属性调整背景图片的位置来显示合并大图中的某个局部图像区域。
作用是减少网络请求，让页面加载更快，图片只需请求一次，以后使用都调用缓存内的图片。与此类似减少请求另一种方法是把图片（只适用于很小的图标例如icon）转换成base64的编码，url直接引用这个编码就能看见图片。base64适用在图标加载响应要求较高的场景下使用。
雪碧图的使用：背景图与元素的原点重合。好比把床单的左上角与桌子的左上角对齐，多余的部分不要。（0，0）坐标原点位置，即外层块元素的左上角，background-position位置设定是指图片与坐标原点的偏移量。白色框是元素，绿色框是背景图片。X坐标值为正则图片左上角向右平移，为负则图片左上角向左平移，Y坐标值为正则图片左上角向下平移，为负则图片左上角向上平移。

背景小技巧：在开发过程中用图片做背景的同时，往往还要用图片的主色调来作用元素的背景色，目的是背景图片丢失的时候防止视觉效果变化太大。

img标签和CSS背景使用图片的区别

页面上固定不变的东西如图标icon、logo等用CSS背景图片
对于经常会改变的内容（图片是和内容相关的），用户img标签图片，比如VIP会员头像等。

background: url(abc.png) 0 0 no-repeat;

background-image:url(http://xxx.jpg) 这里是url引用，而不是src引入要引号
background-position:0px 0px; 图片偏移位置水平垂直均为0
background-repeat:repeat-x/repeat-y/no-repeat(水平重复/垂直重复/不重复)

background-size的作用

background-size指定背景图片实际显示区域大小。
属性值：像素值/百分比/cover/contain
cover图片会覆盖整个背景区域,不会留下边白,即小于背景区域的图片会放大充满整个背景区域。contain图片自适应最好的显示效果并被包裹在背景区域里，有可能会留下空白。

div元素水平居中，img图片水平居中

块级元素水平居中：margin：0 auto; 不考虑上下margin值时而直接使用:
margin-left:auto;
margin-right:auto;
图片水平居中：对img标签先包裹一个块级父容器，再对块级父容器使用text-align:center实现居中。text-align:center;设置元素内的文本水平居中对齐。只对块级元素里面的行内元素生效（a,img,input,span）,注意这里居中是参照该行内元素的父容器元素生效。text-align有5个值：left/right/center/justify/inherit，左对齐/右对齐/居中对齐/两端对齐/继承父元素align值。justify两端对齐的时候，每行中的字间距可能不一致。

设置元素透明

使用opacity属性来设置元素的透明度，值从 0.0 （完全透明）到 1.0（完全不透明）。兼容性

opacity和 rgba设置透明的区别

opacity:0.5;（0～1）使元素内所有内容透明度为0就像消失，但是所占据的空间还在，不会改变页面布局,opacity属性可继承。
background-color: rgba(0,0,0,0.5); 这种加alpha通道值设透明度只能对元素的颜色或者背景色设置透明度，rgba设置的透明属性无法继承。

title和 alt属性的区别

title是补充的额外信息即鼠标悬停标签上的额外说明信息。alt则是替代信息而不是提供额外说明，alt可以用来替换说明加载失败时的img或a链接。