9

屏幕快照 2017-05-14 下午10.05.01.png �x=10px,y=10px 往右移动了10px,往下移动了10px 又有背景图片又有背景色的场景：图片比较小的情况下，没被图片遮盖的部分就是背景色显示；背景图片部分是透明的，可以显示出背景色

背景图片相当于：图片相当于风景，元素相当于窗口。所以要展示风景，首先必须要有窗口，就是窗口元素得有宽度、高度等

屏幕快照 2017-05-21 上午9.44.25.png 屏幕快照 2017-05-21 上午9.52.00.png 既有行内的特性：使用text-align:center；同时有块级特性，可以使用宽度、高度、margin、padding 如何去掉两个span之间的空隙，用一个div包裹住，设置font-size:0;然后再把box里的font-size:14px;

background-attachment 属性:fixed 固定背景图片，只有内容滚动/scroll (默认)
http://www.w3school.com.cn/cssref/pr_background-attachment.asp

如何让并排按钮居中呢？
两种方法：
所有元素display:inline-block,，然后父容器text-align：center；
第二种方法：一个div包裹住这个元素，这些元素本身又是浮动的，水平排列，div设置一个宽度，margin：auto

background-position:设置背景图片的起始位置：

• x y(像素单位，针对左上角做一个位置偏移；)
• x% y%
• [top|center|bottom]垂直方向+[left|center|right]水平方向

background-repeat:

• no-repeat;
• repeat-x
• repeat-y;
• repeat

background-size:拉伸图片size至固定大小

• contain:正好图片可以塞进去的尺寸
• cover：上下撑满，水平只展现一部分，当宽度变化，展现部分随之变化。

单行文本行高

line-height:2 等于本身文本高度的2倍
line-height:200% 父容器文字高度的2倍

屏幕快照 2017-05-21 上午10.44.50.png 屏幕快照 2017-05-21 上午10.53.27.png 兼容性完美 兼容性完美，所有浏览器支持 如果是html实体，所有浏览器兼容；如果是css.before IE6不兼容 IE不支持 IE9支持，移动端首选

作业：

• text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
  text-align: center 作用于行内元素上；
  能让这行内的内容水平居中。

IE 盒模型和W3C盒模型有什么区别?
IE盒模型width包括content 尺寸+padding+border;
而W3C标准中的padding、border所占的空间不在width、height范围内。

61f9aa591ab7c4488811c92dd165f9d99ec7ab27_1_690x420.jpg cff16bdcbda1aaa917bea9d2cac762d03f31e7cb_1_690x403.jpg

*{ box-sizing: border-box;}的作用是什么？
即为IE 盒模型，当设置了box-sizing: border-box之后，元素的border 和 padding 就不再增加content的size了。

line-height: 2和line-height: 200%有什么区别?
line-height: 2 等于本身文本高度的2倍
而line-height: 200%则是父容器文字高度的2倍

inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
inline-block 既有inline的特性，不占据整行，宽度由内容的宽度决定；
又有block的特性，可以设置宽高，但有缝隙问题；
去除缝隙有两种方法：第一种是直接把两个元素之间的空白字符去掉；第二种方式是把所有元素装在一个div元素中，把div元素的font-size设置为0，然后再把单个inline-block元素设置自己的font-size；
行内元素默认对齐方式是基于字体底部基线对齐的，可以vertical-align:top来实现顶端对齐。

CSS sprite 是什么?
是CSS精灵图，通过把网页需要用到的多个图标整合到一张图片上，然后通过CSS背景定位展示其中需要用到的图片部分，这样做可以减少向服务器请求此时，提升网站加载速度，减少服务器开启的线程，从而减轻服务器压力。

让一个元素"看不见"有几种方式？有什么区别?
可以设置透明度为0，opacity:0
visibility:hidden
display:none;消失，不占用位置

代码1：http://js.jirengu.com/zoda/1/edit?html,css
代码2：http://js.jirengu.com/misel/1/edit?html,css,output