getability eleven--for-end revie

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

把文本排列到中间。作用在block元素上，能让块级元素内的inline元素和inline-block元素水平居中。

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

盒模型

• W3C盒模型

  • 总宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

• IE盒模型

  • IE盒模型的计算方式和W3C的很相似，但有一点是非常不同的，这就是：填充和边框并不被包含在计算的范围内。

  • 总宽度 = margin-left + width + margin-right

  • 这就意味着一旦元素拥有横向的填充和/或边框，实际的内容区域（content area ）就要扩大来创造出他们占据的空间。

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

• box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
  例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

  
  

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

• 计算方法的区别。
  数值：继承的时候，浏览器会先将line-height这个属性继承给子元素，再由子元素计算。
  百分数：继承的时候，浏览器会先将行高对应的具体的数值计算出来以后再继承。

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

• inline-block是结合了inline和block两者的特性于一身，简单的说：设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。
• 缝隙是什么呢，它们是空白符。
• 要去除空白符产生的间隙，首先要理解空白符归根结底是个字符，通过设置font-size属性可以控制产生的间隙的大小。设置font-site属性为0px。
  高度不一样的inline-block元素默认基线对齐，设置vertical-align：top 实现顶端对齐。

CSS sprite 是什么?

雪碧图；把小图片整成大图，减少请求，减轻服务器压力；

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

• display:none;(脱离文档流 不占据位置)
• opacity:0，（透明但仍然在文档流中）。
• visibility:hidden,基本与opacity一致。
• text-indent:让某段文字彻底移走，表面上看不到，但是元素依旧在原地.
• z-index:设置为无限大的值如9999;或-9999让其覆盖或者被其他元素覆盖.(同级)
• 用一个<span>设置为inline-block，设置宽、高并让它移动到某个位置然后设置-背景色为白色，实现一个遮罩的方式。

实现雪碧图效果

• 使用 CSSsrpite 实现如下效果
  • 效果图

9/19/2017