CSS面试题汇总(三)
往期点这里:↓
CSS面试题汇总(一)
CSS面试题汇总(二)
21. li 与 li 之间有看不见的空白间隔是什么原因引起的?有什么解决办法?
参考答案:浏览器的默认行为是把 inline 元素间的空白字符(空格换行 tab)渲染成一个空格,也就是我们上面的代码<li>
换行后会产生换行字符,而它会变成一个空格,当然空格就占用一个字符的宽度。
解决方案:
方法一:既然是因为 <li>
换行导致的,那就可以将 <li>
代码全部写在一排,如下
<div class="wrap"><h3>li标签空白测试</h3><ul><li class="part1"></li><li class="part2"></li><li class="part3"></li><li class="part4"></li></ul>
</div>
方法二:我们为了代码美观以及方便修改,很多时候我们不可能将 <li>
全部写在一排,那怎么办?既然是空格占一个字符的宽度,那我们索性就将 <ul>
内的字符尺寸直接设为 0,将下面样式放入样式表,问题解决。
.wrap ul {font-size: 0px;
}
但随着而来的就是 <ul>
中的其他文字就不见了,因为其尺寸被设为 0px 了,我们只好将他们重新设定字符尺寸。
方法三:本来以为方法二能够完全解决问题,但经测试,将 li 父级标签字符设置为 0 在 Safari 浏览器依然出现间隔空白;既然设置字符大小为 0 不行,那咱就将间隔消除了,将下面代码替换方法二的代码,目前测试完美解决。同样随来而来的问题是 li 内的字符间隔也被设置了,我们需要将 li 内的字符间隔设为默认。
.wrap ul {letter-spacing: -5px;
}
之后记得设置 li 内字符间隔
.wrap ul li {letter-spacing: normal;
}
22. 设置元素浮动后,该元素的 display 值是多少?
参考答案:
自动变成 display:block
23. 怎么让 Chrome 支持小于 12px 的文字?
参考答案:
css3 的 transform 属性,设置值为 scale(x, y) 定义 2D 缩放转换
示例:
-webkit-transform: scale(0. 50);
24. display:inline-block 什么时候会显示间隙?
参考答案:
间隙产生的原因是因为,换行或空格会占据一定的位置
推荐解决方法:
父元素中设置
font-size:0; letter-spaceing:-4px;
25.png、jpg、gif 这些图片格式解释一下,分别什么时候用?,webp 呢
参考答案:
gif 图形交换格式,索引颜色格式,颜色少的情况下,产生的文件极小,支持背景透明,动画,图形渐进,无损压缩(适合线条,图标等),缺点只有 256 种颜色
jpg 支持上百万种颜色,有损压缩,压缩比可达 180:1,而且质量受损不明显,不支持图形渐进与背景透明,不支持动画
png 为替代 gif 产生的,位图文件,支持透明,半透明,不透明。不支持动画,无损图像格式。Png8 简单说是静态 gif,也只有 256 色,png24 不透明,但不止 256 色。
webp 谷歌开发的旨在加快图片加载速度的图片格式,图片压缩体积是 jpeg 的 2/3,有损压缩。高版本的 W3C 浏览器才支持,google39+,safari7+
26. style 标签写在 body 后与 body 前有什么区别?
参考答案:
从上向下加载,加载顺序不同
27. 超链接访问过后 hover 样式就不出现的问题是什么?如何解决?
参考答案:
被点击访问过的超链接样式不在具有 hover 和 active 了, 解决方法是改变 CSS 属性的排列顺序: L-V-H-A(link, visited, hover, active)
28. 什么是 Css Hack?ie6, 7, 8 的 hack 分别是什么?
参考答案:
针对不同的浏览器写不同的 CSS code 的过程,就是 CSS hack。
示例如下:
#test {width: 300px;height: 300px;background-color: blue;/_firefox_/ background-color: red\9;/_all ie_/ background-color: yellow;/_ie8_/+background-color: pink;/_ie7_/ \_background-color: orange;/_ie6_/
}:root #test {background-color: purple\9;
}/*ie9*/@media all and (min-width:0px) {#test {background-color: black;}
}/*opera*/@media screen and (-webkit-min-device-pixel-ratio:0) {#test {background-color: gray;}
}/*chrome and safari*/
29. 重置(resetting)CSS 和 标准化(normalizing)CSS 的区别是什么?你会选择哪种方式,为什么?
参考答案:
- 重置(Resetting): 重置意味着除去所有的浏览器默认样式。对于页面所有的元素,像
margin
、padding
、font-size
这些样式全部置成一样。你将必须重新定义各种元素的样式。 - 标准化(Normalizing): 标准化没有去掉所有的默认样式,而是保留了有用的一部分,同时还纠正了一些常见错误。
当需要实现非常个性化的网页设计时,我会选择重置的方式,因为我要写很多自定义的样式以满足设计需求,这时候就不再需要标准化的默认样式了。
解析:参考
30. css sprite 是什么, 有什么优缺点
参考答案:
概念:将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。
优点:
- 减少 HTTP 请求数,极大地提高页面加载速度。
- 增加图片信息重复度,提高压缩比,减少图片大小。
- 更换风格方便,只需在一张或几张图片上修改颜色或样式即可实现。
缺点:
- 图片合并麻烦。
- 维护麻烦,修改一个图片可能需要从新布局整个图片,样式。
CSS面试题汇总(三)相关推荐
- CSS面试题汇总(二)
往期点这里→CSS面试题汇总(一) 11. css 中可以让文字在垂直和水平方向上重叠的两个属性是什么? 参考答案: 垂直方向:line-height 水平方向:letter-spacing 那么问题 ...
- 百度糯米android面试题,前端面试—CSS面试题汇总
前端面试-CSS面试题汇总 博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 1.flex常见面试题 Flex 是 Flexible ...
- 【2022前端面试】CSS面试题汇总(加紧收藏)
[2022前端面试]CSS面试题汇总(加紧收藏) 更新时间:2022年3月2日. 本文致力于建设前端面试题库,欢迎兄弟们投稿哈! 大纲 CSS整体的在上次的篇幅上有了较大的变化,画一个思维导图及时更新 ...
- 前端HTML+CSS面试题汇总一
目录 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? Quirks模式是什么?它和Standards模式有什么区别 Doctype作用? 严格模式与混杂模式-如何触发这两种模式,区分它们有 ...
- CSS面试题汇总(一)
1. 实现不使用 border 画出 1px 高的线,在不同浏览器的标准模式与怪异模式下都能保持一致的效果. 参考答案: <div style="height:1px;overflow ...
- NLP实习笔试面试题汇总三
一.如何对中文分词问题用隐马尔可夫模型进行建模和训练? 二.最大熵隐马尔可夫模型为什么会产生标注偏置问题,如何解决? 三.常见的概率图模型中,哪些是生成式模型,哪些是判别式模型? 四.使用PyTorc ...
- 【2022前端面试】CSS手写面试题汇总(加紧收藏)
[2022前端面试]CSS手写面试题汇总(加紧收藏) 更新时间:2022年3月3日 把答案一起写上,但是希望大家在看之前思考一下,如果有好的建议,跪求改正! 本文致力于建设前端面试题库,欢迎兄弟们投稿 ...
- 2023前端面试题汇总
今天想把近期看的面试题汇总一下,项目空档期,看的面试题比较多,但没有整理,导致回忆的时候,想不起来的还要重新查找.包括身边朋友面试遇到的题目也总结了进去. 总结的都是前端基础(初级)面试题. 三月份我 ...
- 面试题汇总二 Java 多线程篇
前言 题目汇总来源 史上最全各类面试题汇总,没有之一,不接受反驳 面试题汇总一 Java 语言基础篇 面试题汇总二 Java 多线程篇 面试题汇总三 Java 集合篇 面试题汇总四 JVM 篇 面试题 ...
- 力扣高频|算法面试题汇总(七):树
力扣高频|算法面试题汇总(一):开始之前 力扣高频|算法面试题汇总(二):字符串 力扣高频|算法面试题汇总(三):数组 力扣高频|算法面试题汇总(四):堆.栈与队列 力扣高频|算法面试题汇总(五):链 ...
最新文章
- apt-get常用命令
- 手机1像素线粗_豪威推出4800万像素手机传感器:1/2大底
- java spring 服务器关闭_通过springboot怎么停止服务器??
- Python 基础篇-python3安装pyHook和pywin32库
- 大会直击|微软亚洲研究院刘铁岩:深度学习成功的秘密
- cap流程图_源码阅读笔记 BiLSTM+CRF做NER任务(二)
- APUS 朱辉:移动应用出海的大数据建设挑战
- linux 文件打开数设置, too ma
- 干货 | 深度学习名词表:57个专业术语加相关资料解析(附论文)
- Springboot系列之Shiro、JWT、Redis 进行认证鉴权
- 计算机网络模拟校园,计算机网络课程设计-模拟校园网组网实验
- SQLAlchemy 教程 —— 进阶篇
- 华为云GaussDB:发挥生态优势,培养应用型DBA
- 低格硬盘用什么软件_迟来的评测:用了三年后的固态硬盘会变成什么样呢?
- HTML5再曝漏洞 安全性遭质疑
- img标签过滤加fs模块实现图片文件缓存
- 卧槽!火爆GitHub的算法电子书开放下载了!
- linux学习笔记1(第一本笔记)
- 真么找计算机用户密码,如何查找电脑的用户名和密码
- pdf合并成一个文件,pdf合并方法