Web前端面试指导(十二):::before 和:before有什么区别?

题目点评

这个问题看来很简单,但如果之前没有琢磨这个问题,给人感觉也是门头一垂,听到这个题目就懵逼了,因为原来从来没有注意过这个问题,即便有注意这个问题也不能很好的回答清楚。回答的技巧就是从相同点和不同点,以及他们的作用,及注意事项上去回答。

解答要点

  •  相同点
  1. 都可以用来表示伪类对象,用来设置对象前的内容
  2. :befor和::before写法是等效的
  •  不同点
  1. :befor是Css2的写法,::before是Css3的写法
  2. :before的兼容性要比::before好 ,不过在H5开发中建议使用::before比较好

加分项

  1. 伪类对象要配合content属性一起使用
  2. 伪类对象不会出现在DOM中,所以不能通过js来操作,仅仅是在 CSS 渲染层加入
  3. 伪类对象的特效通常要使用:hover伪类样式来激活

    [css] view plain copy 

    1. .test:hover::before { /* 这时animation和transition才生效 */ }

--------------------------------------------------------------------------------------------------------------------

时间: 2024-08-26 00:12:48

Web前端面试指导(十二):::before 和:before有什么区别?的相关文章

Web前端面试指导(十):元素定位有哪些?

本题点评 在web前端中,元素定位是必须掌握的,是网页制作的必备技能,也是衡量是否为一个合格的web前端开发的标准之一,在网页设计中,很多地方都需要使用定位,例如菜单弹出,提示信息层等都需要定位.所以本题的难易程度为简单. 解题思路 position为元素定位属性,包含以下属性值 1. absolute绝对定位 相对位置为父元素为非static的第一个父元素进行定位. 2. fixed  固定定位(老IE6不支持) 相对于浏览器窗口进行定位. 3. relative相对定位 相对于其正常(默认布

Web前端面试指导(十四):如何居中一个元素(正常、绝对定位、浮动元素)?

题目点评 这道题目的提问比较多,连续问了三个问题,正常元素.绝对定位元素.互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且要分类的来回答,条理要清楚.可以先把水平居中各种情况说清楚,然后在把垂直居中说清楚. (一)元素水平居中的方式 1)行级元素水平居中对齐(父元素设置 text-align:center) [html] view plain copy <div style="width: 200px; height: 100px;b

Web前端面试指导(十九):CSS样式-如何清除元素浮动?

题目点评 本题属于比较常问的题目,也是在网页设计中经常遇到的问题,面试官希望通过这样的面试题来了解你对网页设计的基本功底,如果这样的题目答不出来,必会让面试官大失所望,面试成功的概率是非常小的. 答题思路 可以先回答在工作上常用的清除方法,并说明为什么使用它,然后在讲一些其它的清除方法来说明你的思维广阔,知识丰富的一面. 浮动的方式有以下4种. 1.使用clear:both清除浮动 示例1:使用div html代码 css代码 <div class="box"> <d

Web前端面试指导(十六):为什么要初始化CSS样式?

题目点评 这个题目乍一看感觉怪怪的,什么叫初始化样式了?如果换一句话你可能就理解了,就是通用样式.这道题目主要涉及的是理论方面的知识,不用写代码,只要描述清楚就可以了 初始化样式的原因 因为浏览器的兼容的问题,不同浏览器有些标签的默认值是不同的,如果没有CSS初始化往往会出现浏览器之间的页面显示差异.

Web前端面试指导(十五):CSS样式-display有哪些作用?

题目点评 其实就是要你说清楚该属性有哪些值,每个值都有什么作用,这个题目可以答得很简单,但要答全也并非是一件容易的事情. 元素默认的display值的情况如下(这个一般很少人注意这一点) block(块级元素) <div>.<p> <ul> <ol> <form> -- inline(内联元素) <span> <a> <img> <input> <select> <label>

Web前端面试指导(十八):用纯CSS创建一个三角形的原理是什么?

题目点评 三角形的图标在网页设计是很常见的,属于基本常识题,只要在练习做到过这个功能都能回答出来,可以把你做过的思路描述出来就可以了,本题的难易程度为简单 答题要点 1.采用的是均分原理 盒子都是一个矩形或正方形,从形状的中心,向4个角上下左右划分4个部 2.代码的实现 第一步 保证元素是块级元素 第二步 设置元素的边框 第三步 不需要显示的边框使用透明色 示例代码 [css] view plain copy .square{ width:0; height:0; margin:0 auto;

Web前端面试指导(二):编写简历,吃透简历内容

2.1 简历模板(仅供参考,不得千篇一律) ~~~~~~温馨提示~~~~~~简历模板文件在QQ群 490916635  2.2 吃透简历内容 2.2.1 吃透自己的简历 简历出现的名词术语要非常熟悉 简历出现的技术要熟练应用,不能熟练的死记硬背也要记下 对于项目要非常熟悉,非常清楚自己所负责的模块 对自己的学历.阅历要非常清楚,特别是那些虚构的,更要下功夫. 2.2.2  项目经验修 Web前端项目经验一般要求在2~3年 项目个数不能少于3个,最好在3~4个之间,也不要太多. 2.2.3 进行模

Web前端面试指导(二十):JavaScript中如何翻转一个字符串?

题目点评 字符串作在程序中是非常常见的,因为程序中绝大部分的数据都可以当作字符串来处理.需要对字符的处理方法比较熟悉,在回答的时候尽量能够说出多种解决方法更好! 字符串翻转的方法 1)使用字符串函数 [javascript] view plain copy //str=hello function reverseString(str) { var array = str.split('');//['h','e','l','l','o']; array = array.reverse();// [

Web前端面试指导(六):面试后需要总结和交流

总结自己面试不足的地方 ü  简历没有写好 ü  面试没有调整心态,过于紧张 ü  表达能力,没有很好的将自己想说的意思准确的表达出来 ü  对简历上的项目不清楚,没有描述好 ü  面试中提到的问题没有答上来.与老师和同学沟通交流解决办法 面试后和老师同学分享面试的心得,不断地在面试中成长 面试的建议 ü  对外包公司的偏见 有些同学觉得外包公司不能去,因为不稳定,干二三个月可能就会被辞. 其实这是一种误解,你在公司入职的时候,同样会签合同,如果公司要辞人的话,那就得按合同办事,额外支付二个月的