入门9

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

• text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐，text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐
• 作用在block-level元素上（包括了block和inline-block）;
• text-align: center; 的意思是块级元素中的行内内容居中。
  • 能让block-level的元素中的行内元素，替换元素和 inline-block 元素居中。

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

• W3C标准中 padding、border 所占的空间不在 width，height 范围内，IE的盒模型width，height 包括 content 尺寸 + padding + border;
• 通常我们选择 标准W3C盒模型，在网页顶部加上

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

• * 是通用选择器，匹配所有的元素标签
• CSS3新增了一个盒模型属性 box-sizing，能够事先定义盒模型的尺寸解析方式（设置width、height指定的区域），此时给元素设置的宽度除了原先的内容 content，还包括填充 padding 以及边框 border

line-height: 2; 和 ling-height: 200%有什么区别？

• 计算标准：line-height: 2 根据自身元素的字体大小来计算。line-height: 200% 如果设置在父元素中，子元素中未设置行高，则子元素的行高根据父元素的字体大小来计算。
• 继承：line-height: 2 继承给子元素的是2这个缩放因子，line-height: 200% 继承给子元素的是200%计算后的值。

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

• inline-block 元素的特点：
  • 默认不占据一行
  • 设置的上下padding、margin、border占据文档空间
• inline-block 底部空隙
  • inline-block 元素在块级元素中留空隙就是因为图像的默认对齐垂直对齐方式是基线对齐（基线对齐在原理上图像底边与匿名文本大写英文字母 X 的底边对齐）；而匿名文本是有行高的，所以 X 的底边距离行框有一段距离，这段距离就是流出的空隙
  • 解决办法：
    • display: block; 因为垂直对齐方式只能作用于 inline 和 inline-block 元素，更改为 block 元素，会使垂直对齐方式失效
    • 父级的 line-height: 0;，这样使匿名文本与行框的距离为0
    • vertical-align: top/middle/bottom;
• 高度不一样的 inline-block 元素顶端对齐：设置 vertical-align: top;

CSS sprite 是什么？

• CSS sprite 又称之为精灵图
• 原理：把多个小icon合成一个大的图片，使用的时候，元素以这张合成后的大图为背景，通过设置 background-position 的属性来获取指定 icon
• 优点：合并原来图片的请求，减少http的性能消耗。 缺点：CSS sprite不能太大，不然下载图片的时间会过长
• 应用：
  • 制作一张网页的图标
  • 制作动画
• 使用 CSS sprite 可以减少网络请求，提高网页加载性能

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

• 常规：
  • display: none;
  • visibility: hidden;
  • opacity: 0;
• 其他（以下消失都是有前提条件的）：（注：这里 etc 的意思是 等等）
  • height: 0; width: 0; padding: 0; margin: 0; border: 0; ... etc
  • position: absolute; left: 1000000px; top: 100000px; ...etc;
  • z-index: -1000; ...etc
  • background-color: rgba(0, 0, 0, 0);
• 总结：元素“看不见”的方式主要方式让元素用户在当前页面展示的视口里看不见。
• 区别：
  • display: none; 从文档流消失，不占据文档空间，但是还存在DOM树中
  • visibility: hidden; 和 opacity: 0; 还是会占据文档空间
  • display: none; 和 visibility: hidden; 绑定的事件不会触发
  • opacity: 0; 的元素绑定的事件还是会触发事件
• 更多可查看：元素的显示与隐藏

代码

• 代码1
• 代码2