CSS属性12.06

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

text-align: center可以让父元素中的内容水平居中，作用在块元素上使行内内容水平居中。

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

IE 盒模型和W3C盒模型的区别在于计算盒模型宽高的方式不一样。给某一盒模型设置宽高：

• 如果该盒模型是W3C盒模型：
  设置的宽度=内容的宽度
  设置的高度=内容的高度
• 如果该盒模型是IE盒模型：
  设置的宽度=内容宽度+左右padding值+边框宽度
  设置的高度=内容高度+上下padding值+边框宽度

标准盒模型与IE盒模型

3. { box-sizing: border-box;}的作用是什么？

{ box-sizing: border-box;}的作用是让所有元素的盒模型宽高的计算方式都按照IE盒模型宽高的计算方式去计算。

4.写一个 btn 的class， 任何 a，span,div,button

代码
预览

)
添加此class后后变成如下按钮的样式(鼠标hover背景色#c14d21
, 鼠标按下背景色#e25f31

5. inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?

• inline-block的特性有以下几点：
• inline-block元素可以设置宽高和上下左右的padding和margin。
• inline-block元素并排排列
• inline-block元素默认宽高为内容宽高

方法一:标签连写(删除空格不换行)

方法一
方法二: 父级元素font-size 设为0,再重新给inline-block元素设置font-size
方法二
方法三:设置浮动
QQ截图20161208144028.png

高度不一样的inline-block元素顶端对齐

• 通过设置vertical-align:top;样式对齐

  
  未对齐

![设置vertical-align:top;样式后]
](https://img.haomeiwen.com/i3889793/c774050e34051562.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

6.CSS sprite

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片.
CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。

7. 让一个元素"看不见"有几种方式？有什么区别？

opacity: 0：元素透明度为0，还占有位置；
visibility: hidden：与opacity: 0类似；
display: none：元素消失，不占位置；
background-color: rgba(0,0,0,0.2)：背景色透明。