10道css综合面试问题

更新日期: 2019-11-07 阅读: 2.5k 标签: 面试

1.css sprite是什么,有什么优缺点

将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需
要显示的背景图案。

减少 HTTP 请求数,极大地提高页面加载速度
增加图片信息重复度,提高压缩比,减少图片大小


2 display: none; 与 visibility: hidden; 的区别

联系:它们都能让元素不可用

display:none ;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;
visibility: hidden ;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见


3. 清除浮动的几种方式

父级 div 定义 height
结尾处加空 div 标签 clear:both
父级 div 定义伪类 :after 和 zoom
父级 div 定义 overflow:hidden
父级 div 也浮动,需要定义宽度


4. css3有哪些新特性

新增各种 css 选择器
圆角属性border-radius
多列布局
阴影和反射
文字特效 text-shadow
线性渐变
旋转 transform


5. position的值, relative和absolute定位原点是

absolute :生成绝对定位的元素,相对于 static 定位以外的第一个父元素进?定位
fixed :生成绝对定位的元素,相对于浏览器窗口进?定位
relative :生成相对定位的元素,相对于其正常位置进行定位


6.::before 和 :after中双冒号和单冒号 有什么区别?

单冒号( : )用于 CSS3 伪类,双冒号( :: )用于 CSS3 伪元素


7.可以改变页面布局的属性

position 、 display 、 float 、 width 、 height 、 margin 、 padding 、top 、 left 、 right


8.CSS在性能优化方面的实践

css 压缩与合并
css 文件放在 head 里、不要用 @import
尽量用缩写、合理使用选择器


9.CSS3动画

依靠 CSS3 中提出的三个属性: transition 、 transform 、 animation
transition :定义了元素在变化过程中是怎么样的,包含 transition-property 、
transition-duration 、 transition-timing-function 、 transition-delay 。
transform :定义元素的变化结果,包含 rotate 、 scale 、 skew 、 translate 。
animation :动画定义了动作的每一帧( @keyframes )有什么效果


10.gba()和opacity的透明效果有什么不同?

rgba() 和 opacity 都能实现透明效果,但 opacity 作用于元素,以及元
素内的所有内容的透明度,
而 rgba() 只作用于元素的颜色或其背景色。(设置 rgba 透明的元素的子元素不会继承
透明效果!)

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/6352

相关推荐

有趣的Js面试题_如何让 (a == 1 && a == 2 && a == 3) 返回 true

题目大意为:JS 环境下,如何让 a == 1 && a == 2 && a == 3 这个表达式返回 true ?这道题目乍看之下似乎不太可能,因为在正常情况下,一个变量的值如果没有手动修改,在一个表达式中是不会变化的。

前端面试之webpack面试常见问题

什么是webpack和grunt和gulp有什么不同?什么是bundle,什么是chunk,什么是module?什么是Loader?什么是Plugin?如何可以自动生成webpack配置?webpack-dev-server和http服务器如nginx有什么区别?

Web前端年后跳槽面试复习指南

很多童鞋可能年后有自己的一些计划,比如换份工作环境,比如对职业目标有了新的打算。当然面试这一关不得不过,大概又不可能系统性的复习,这里罗列一些 重点 面试的知识点和文章,

React常见面试题

React常见面试题:React中调用setState之后发生了什么事情?React中Element与Component的区别?优先选择使用ClassComponent而不是FunctionalComponent?React中的refs属性的作用是什么?React中keys的作用是什么?

毕业一年左右的前端妹子面试总结

把面试当做学习,这个过程你会收益很大。前端知识很杂,可能实际工作中用到的技术,像框架都是跟着公司的要求走的,像我最近也在看React啦,Vue和React都对比着再学习

js练习笔记:10道JavaScript题目

10道JavaScript题目:累加函数addNum、实现一个Person类、实现一个arrMerge 函数、实现一个toCamelStyle函数、setTimeout实现重复调用、实现一个bind函数、实现一个Utils模块、输出一个对象自身的属性

写给程序员的 HR 面试指南

首先,切记不要诋毁你的老东家。你应该把你的离职原因集中表述在“寻找新机会或新的平台”以及尝试在新的岗位上提升自己。当然,这样的回答对于一般职位的应聘者来说不会造成减分

一篇文章教会你面试中的小套路

面试,一个短时间内对某个人做出判断的测试。很多时候,工程师们只准备了相关的技术点,却没有对非技术的软实力部分做准备。而软实力的考察,不仅贯穿整个面试流程中,更在BOSS面和HR面中尤为关键。鉴于当前业界也没有特别契合的攻略文档,仅有有几篇文章还是HR写的,特有此文

CSS 面试知识点总结

最近在整理 CSS 的时候发现遇到了很多面试中常见的面试题,本部分主要原作者在 Github 等各大论坛收录的 CSS 相关知识和一些相关面试题时所做的笔记,分享这份总结给大家,对大家对 CSS 的可以来一次全方位的检漏和排查

vue面试时需要准备的知识点

vue上手可以说是比较轻松而且简单,如果你用过angular,react,你也会很喜欢vue。vue的核心思想依旧是:构建用户界面的渐进式框架,关注视图的变化。这也是为什么新建的文件是结构是template script style

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!