前端学习任务九

盒模型包括哪些属性？

盒子模型包括content，margin，border，padding属性。

text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中？

• 作用：使两端对齐
• 作用在块元素上
• 让块元素里的行内元素水平居中

如果遇到一个属性想知道兼容性，在哪查看?
在caniuse查看

IE 盒模型和W3C盒模型有什么区别?

• ie盒模型：在代码中写的宽度实际等于：border宽度+padding宽度+内容宽度
• w3c盒模型：在代码中写的宽度实际等于：内容宽度

以下代码的作用？兼容性？

*{
 box-sizing: border-box;
}

• 作用：一个块级元素实际所占宽高度=外边距（margin）+ 边界宽度(border-width) + 内边距（padding）+ 高度（height） / 宽度（width） 如果设置了border-box，实际所占宽高度 = 设置的高度（height）/ 设置的宽度（width）+ 外边距（margin）
• 兼容性

CSS Sprite(雪碧图|精灵图)指什么? 有什么作用

• Css Sprite是一种网页图片应用处理方式。
• 它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

img标签和CSS背景使用图片在使用场景上有何区别

• img标签适用于经常更换的图片
• Css背景适用于不经常更换的图片

title和 alt属性分别有什么作用？

• title是补充原来的内容，当鼠标悬停在链接的时候显示链接信息。
• alt是当图片不能显示的时候，代替图片内容。

background: url(abc.png) 0 0 no-repeat;这句话是什么意思？

• 用abc.png做背景图片，图片的位置就是（0,0），图片不重复显示。

background-size有什么作用? 兼容性如何? 常用的值是?

• 作用是设置背景图像的尺寸与显示效果，解决针对响应式布局的背景图片自适应。
• 兼容性

如何让一个div水平居中？如何让图片水平居中

• div水平居中设置margin:0 auto;
• 图片水平居中：text-align：center；

如何设置元素透明? 兼容性？
background-color:rgba()中的第四位值设置为0_{1的数字，或者opacity设置0}1的数字，但是这两种方法ie8及其之前的版本都不兼容，可以使用filter:alpha(opacity=50);兼容。

opacity 和 rgba都能设置透明，有什么区别?

• background-color:rgba()是针对背景颜色的，所以文字没有透明效果；
• 而opacity针对整个元素块，元素块中的文字也会变透明。

代码一
代码二&三