盒模型

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

• W3C标准中padding、border所占的空间不在width、height范围内

• 而大家俗称的IE的盒模型width包括content加padding加上border

  
  1.png

CSS 的属性box-sizing有什么值？分别有什么作用?

1. box-sizing：content-box：w3c标准盒模型

• 这是由 CSS2.1 规定的宽度高度行为。
• 宽度和高度分别应用到元素的内容框。
• 在宽度和高度之外绘制元素的内边距和边框。

2. box-sizing：border-box：IE盒模型

• 为元素设定的宽度和高度决定了元素的边框盒。
• 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
• 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

3. box-sizing：inherit

• 规定应从父元素继承 box-sizing 属性的值。

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

• 父元素设置line-height: 200%;属性时 父元素设置这个属性后，其所有子元素的行高都是一个具体的值，即他们父元素字体大小的200%。下例可看出子元素的行高都一致，即父元素字体大小的2倍，32px。
• 父元素设置line-height: 2;属性时 父元素设置这个属性后，其所有子元素的行高都是自身字体大小的2倍。下例可看出子元素的行高都是不一致的。
  总结来看设置为2时，行高是相对的，是可变的
  而设置为200%时，行高是绝对的，不以字体的大小改变而改变

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

1. inline-block特性

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

2. 为什么会产生空隙

• inline 元素会产生空隙，block 元素不会产生空隙。
• 看看 inline 元素默认的表现情况如何？原来默认就有空隙存在！它们是谁？是空白符（white space）！

3. 去除空隙

• 把设置了inline-block元素的HTML代码前的空格删除
• 将设置了inline-block元素的HTML代码>符号换行
• 将设置了inline-block元素的父元素设置font-size:0;然后在给设置了inline-block的元素重新设置一个font-size

4. 高度不一样的inline-block元素如何顶端对齐

• 这是因为vertical-align的默认搞的鬼。
• 我们可以给这个元素设置vertical-align:top

CSS sprite （雪碧图/精灵图）是什么? 动手实现写一个使用图片sprite实现 icon 的Demo

雪碧图也叫CSS精灵， 是一CSS图像合成技术

• 原理就是只有一张大的合并图， 每个小图标节点如何显示单独的小图标呢？
• 其实就是截取大图一部分显示，而这部分就是一个小图标
  一个小例子
  代码地址
  预览地址

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

• display：none；消失，不占用位置
• visibility：hidden；和opacity类似
• background-color：rgba（0,0,0,0.2）只是背景色透明
• opacity：0；透明度为0，整体

字体图标的原理，一个使用 iconfont 实现字体图标的demo

• 使用浏览器打开页面时，浏览器会读取 HTML 文件进行解析渲染。当读到「饥饿的羔羊」五个字时会转换成对应的 unicode码（可以认为是世界上任意一种文字的特定编号）。再根据HTML 里设置的 font-family （如果没设置则使用浏览器默认设置）去查找电脑里（如果有自定义字体@font-face ，则加载对应字体文件）对应字体的字体文件。找到文件后根据 unicode 码去查找绘制外形，找到后绘制到页面上。 所以对于第二个范例， 「&#9965」是「饥」的 unicede 码，所以用户最终也能看到serf字体样式的「饥」字。
  那如何让页面展示一个图标呢？我们可以把图标当成文字来操作，步骤如下：

1. 在页面上放入该图标的 unicode 码 （可以自己创建一个）
2. 让该元素使用我们自定义的字体
3. 字体对应着我们自己创建的字体库文件
4. 字体库文件里有关于该 unicode 码的外形描述
   一个小demo
   代码地址
   预览地址