IE 盒模型和W3C盒模型有什么区别?
区别：W3C标准中padding、border所占的空间不在width、height范围内，大家俗称的IE的盒模型width包括content尺寸＋padding＋border。
CSS 的属性box-sizing有什么值？分别有什么作用?
box-sizing有三个值，默认为content-box。
box-sizing: content-box ：w3c标准盒模型
box-sizing: border-box ：“IE盒模型”
box-sizing：inherit ：指定box-sizing属性的值，应该从父元素继承
line-height: 2和line-height: 200%有什么区别?
两者均表示行高为字体大小的两倍。区别在于：
父容器使用line-height: 2时，子元素的行高为子元素自身字体大小的两倍，随着子元素字体大小不同，各自行高也不同；
父容器使用line-height: 200%时，所有子元素的行高为固定值——父元素字体大小的两倍。
inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?
特性：
既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)
又呈现 block 特性 (可设置宽高，内外边距)
缝隙去除：
缝隙本质上是因为中间有字符占据位置（包含回车、空格等等），消除中间的字符即可去除掉缝隙
1.元素中间没有任何字符
2.给父元素设置```font-size: 0;``
顶端对齐：
inline-block默认是以元素的基线对齐，要让顶端对齐在CSS中添加vertical-align:top;
CSS sprite （雪碧图/精灵图）是什么? 动手实现写一个使用图片sprite实现 icon 的Demo
CSS sprite是一种网页图片应用处理方式，是将需要分别显示的多张图像集成为单一图像，然后分别定位显示各部分图，以减少下载图像数量，减少文件体积和服务器请求次数，提高网页显示性能。
缺点：无法缩放，不好修改;图像过多时，sprite图会很大，加载速度慢
让一个元素"看不见"有几种方式？有什么区别?
opacity: 0 ; 元素变成透明的我们肉眼就看不到了，所以原本占据的空间还在。仍然占据空间
visibility: hidden ;和opacity:0 类似。元素会从页面中消失，它原本占据的空间会被保留，会造成浏览器的重绘，适用于希望元素隐藏又不影响页面布局的场景。
display:none;元素会从页面中彻底消失，它原本占据的空间会被其他元素占有，会造成浏览器的回流与重绘。
background-color: rgba(0，0，0，0.2) 只是更改背景色透明度。
简述字体图标的原理，动手实现使用 iconfont 实现字体图标的 demo，回复预览地址
原理：可以理解为，自己制作了一个“字体库”，只不过这个“字体库”对应的不是字体，而是图标，当需要使用指定图标时，在代码中让浏览器先先导入字体库，然后用unicode码或类进行查找并引用即可。
步骤为：
- 在页面上放入该图标的 unicode 码 （可以自己创建一个）
- 让该元素使用我们自定义的字体
- 字体对应着我们自己创建的字体库文件
- 字体库文件里有关于该 unicode 码的外形描述
https://f0rl.github.io/resume/projects/p2/D6-iconfont.html
网友评论