任务9.CSS常见样式2

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

• 作用：让块级元素内部内容水平居中，也就是文字、图片和行内元素，对块级元素设置，并不能让块级元素居中。同时，text-align具有继承性，其下的子块级元素也会继承，但子块级元素并不会居中，而是它内部的文字和图片。

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

标准盒模型

IE盒模型

区别

• 对标准盒模型设置width和height时，指的是content的宽高；对于IE盒模型，width和height要加上padding和border
• IE6/7/8在不添加doctype的情况下即（怪异模式）会使用IE盒模型；IE6、7、8在添加doctype的情况下，IE9以上和chrome使用w3c盒模型

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

这是CSS3的新样式，表示使用IE盒模型

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

• line-height: 2：表示行高是当前文字高度的两倍
• line-height:200%：相对于行高是父容器字体的两倍

2倍

200%效果

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

• inline-block特性

  • 既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)
  • 又呈现 block 特性 (可设置宽高，内外边距)

• 去除缝隙

• 缝隙的产生是因为两个元素之间有回车，这会被当做空白字符，将其删除即可

• 将回车这个空白符当做一个字符，将其字体大小设置为0

  
  
  

  消除缝隙

• inline-block以文字底部基线对其，当两个inline-block高度不同时，若要两个元素顶端对其，设置vertical-align:top可实现

6.CSS sprite 是什么?

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

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

• opacity: 0 ; 透明度为0，对选中元素进行整体的透明度设置，取值可从0（完全透明）到1.0（不透明），元素仍占据空间
• visibility: hidden ;和opacity:0 类似，也是对选中元素的整体进行透明度设置，元素仍占据空间
• display:none;直接让元素消失，不占用位置
• background-color: rgba(0，0，0，0.2) 只是针对背景色透明