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