VIP10-12月6日作业：CSS常见样式2

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

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

居中.png

问题二：IE 盒模型和W3C盒模型有什么区别?

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

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

• 如果该盒模型是W3C盒模型：
  设置的宽高=内容的宽高。

  
  
  

  盒模型.gif

问题三： *{ box-sizing: border-box;}的作用是什么？

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

问题四：写一个 btn 的class， 任何a，span,div, button添加此class后后变成如下按钮的样式(鼠标hover背景色#c14d21, 鼠标按下背景色#e25f31

效果

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

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

• 去除inline-block缝隙的方法有5种：
  1.html标签连写：

  
  
  

  html标签连写.png

2.设置浮动：

设置浮动.png

3.父元素字体设置font-size：0；然后在inline-block元素上再重新设置字体；

更改字体.png

4.inline-block元素设置负margin，会导致元素溢出父容器的问题：

inline-block元素设置负margin.png

• 高度不一样的inline-block元素如何顶端对齐?
  答：使用vertical-align样式，值设置为top（顶端对齐）
  
  

  值设置为top.png

问题六：CSS sprite 是什么?

答：CSS sprite是CSS雪碧图，是一种将多张小图片合成为一整张图的大图，也是一种网页图片的请求方式，使用CSS sprite有如下好处：
1.因为多图合成为了一张图，所以减少了网页图片的请求，加快了网页的加载速度；
2.重复使用率高；

问题七：让一个元素"看不见"有几种方式？有什么区别?

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