CSS常见样式2（task9）

问答

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

1. 作用：设置内部文本、图片 和 设置display:inline-block的子元素的位置
2. 可以作用在：块级元素（display:block）或者设置display:inline-block的元素上
3. 让这些元素水平居中：文本、图片、行内元素（display:inline）或者设置display:inline-block的元素

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

• IE盒模型：width=content(内容宽度)+padding(左右边距之和)+border(左右边框宽度之和) ,高度同理,设置
• W3C盒模型（标准盒模型）：width=content(内容宽度)，高度同理
• 区别：IE盒模型中padding和border所在控件在width和height之内，而W3C盒模型的width和height不包括padding和border
• 设置box-sizing:border-box的元素可以使用IE盒模型，设置box-sizing:content-box(默认值)即为W3C盒模型

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

设置元素使用IE盒模型，即宽度和高度包含padding和border

4.line-height: 2和line-height: 200%有什么区别?

• line-height: 2

文本行高为当前元素字体大小的2倍

• line-height: 200%

文本行高为当前文本所在块级元素的父元素的font-size的2倍（若是行内元素的文本，则会是行内元素所在块级元素的父元素的font-size的2倍）

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

1. inline-block：让元素即呈现inline特征（不占据一整行，宽度缺省时由内容宽度决定），又有block特性（可设置宽高、内外边距）
2. 设置父元素的字体大小为0

    111111111111111
    2222
 

span{
  border:1px solid;
  display:inline-block;
  vertical-align:top;
  font-size:16px;
}
.wrap{
  font-size:0;
}

3.设置vertical-align:top即可

6.CSS sprite 是什么?

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

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

• opacity:0，设置整体透明度为0
• visibility:hidden，设置隐藏，和opacity类似
• display:none，设置消失，不占空间
• background-color:rgba(0,0,0,0)，设置背景透明度为0

区别：display:none彻底消失，不占位置，而其他只是透明度为0，隐藏但仍占位置；background-color的透明度只是背景的透明度

代码

1.使用 CSSsrpite 实现如下效果【效果范例8】. ps: 图片下载地址3

代码链接

2.在iconfont上搜索"饥人谷"5， 使用字体图标实现代码1中的效果

1. 下载图片，让入项目中
2. 代码：

3.结果：

• 鼠标不在图片上时：

  
  
  

  Paste_Image.png

• 鼠标在图片上时：

  
  
  

  Paste_Image.png