路遥
有些东西哪怕不属于自己，遇见也好。
毕业证到手已经4天了，不知不觉大学生活已离我而去，各奔东西。一直想毕业后写点博客，前端也好（当然是小白了），生活也罢，却一直拖拉着。近一年来的学习也是这般拖拉，仿佛没了那般冲劲，那股热爱，直到今天经历的面试，发现自己欠了自己太多的承诺和目标，欠了太多是时候一点一点偿还了。还记得初识前端时，那时喜欢叫H5,反正当时傻傻的分不清楚，现在才知道原来是因为当时HTML5标准正火热，许多页面制作和网站开发都是使用HTML5标准完成的。HTML5只是属于前端的一部分技术，而前端开发包括的范围更广，如三大框架vue、react、angular和npm，node等。那时学习前端应该是为了给朋友做一个生日礼物（那个朋友当然是女的啊），因为它可以把我设计的flash、ps图片和视频完美展示，特别那个时候看到了一些js特效，贼酷的那种，所以就想弄个网站把它们整合在一起，就慢慢接触啊，学习啊，就在前端路上边走边停，一回头发现还是个小白，还能清晰的看到自己的起跑线（胖揍自己一下，突然记起有人叫我小胖，果然岁月是把杀猪刀，我变成了别人口中的小胖了。）
扯扯闲话，记录生活点滴也不错嘛。到深圳待了也有大半个月了，前几天回了下学校给大学画上了个句号，大学的结束，社会的开始。这2天开始投递简历和准备面试，昨天约好了今天上午和下午去面试，烈日炎炎坐地铁去面试，跟着导航转悠转悠找公司位置，果然到了附近位置应该多问问人，不然有时跟着导航找个入口左转右转找好久，到了准确楼层都没找到位置，只能说该公司入口设计太巧妙了，还是打电话才知道，所以还是要果断点多问人和打电话交流。面试接待的是该公司的项目经理，十分友善和交谈都给人一种很舒服的感觉，首先直接在电脑上回答css和js题目，然后技术人员问些问题，最后又是与项目经理交谈，他还提了一点小建议，也许平时自己没怎么注意，十分感谢，还谈及到效率问题，代码量太少，敲写代码还总要时不时的看键盘，唉，果然自己还是太渣，这个问题需要自己多积累点代码量和多实践。离开到外面却持续下了一个小时的雨，还是那种啪啪响的，果然深圳的雨说来就来。下午的面试是在腾讯大厦（面试的公司是外包驻扎在腾讯动漫部门），心里还是有点期待的，毕竟进去都需要来访预约码证明，我是抱着能够参观体验一下的心态进去的，至于面试心里还是有底的，毕竟水平不到家嘛。这里就要提及到和我交流的总监助理柯姐，从交流中可以感受到浓浓的诚意，十分关心面试者，弄得我以为是培训机构的错觉，以前投简历投到培训机构（毕竟经历少，太年轻，哈哈），hr就是十分快速回复和各种关心，所以十分感谢小姐姐的理解和支持。从踏入腾讯大厦中，能够感受到十分舒适，进到公司就在那坐等面试官超哥面试，超哥打了个招呼便带着我逛悠的去了面试位置，虽然不远，然后开始看简历提问题，许多问题都是放在一定的场景中，让我能够充分的理解题目意思，而且还各种耐心的与我讲解不懂的地方，还谈到了爱好啊，大学啊，火影啊，哈哈，十分愉快，让我梳理和学习了知识，更加让彼此十分轻松愉快、不压抑，还是直接水平有点差劲不然就能侃侃而谈了，后面超哥问我有什么问题，我提问了下公司驻扎和前端业务团队等问题，才从中了解到原来他是腾讯的员工，棒棒的，他还详细的回答了公司的业务和团队，第一次面试官这么耐心详细的回答，而且超哥十分主动的交流，朋友师生般的体验，十分有感触，这次面试十分享受和愉快，十分感谢超哥和柯姐的招待，让我这次面试十分有意义，我在想以后能当个超哥这样的技术者就棒棒了。
面试体验完之后就该记录点面试题目了（不然会被骂惨去^_^），面试时应该要把可以想到的解决方法都表现出来，一方面是可以向面试官展现自己，另一方面也是对知识的一种梳理和总结。
HTML+CSS：
一、如何在页面上实现一个圆形的可点击区域？
html标签实现：
html标签实现
CSS实现和js实现：主要是把正方形的border-radius设置为50%，然后绑定click事件或者获取鼠标点击位置坐标，判断其到圆点的距离是否不大于圆的半径，来判断点击位置是否在圆内。
二、link与@import的区别？
强烈建议使用link标签，慎用@import方式。
a、link属于html标签，除了引入css样式外还可以定义RSS等其他事务，@import是css提供的，只能引入css。
b、link在页面加载的时候会同时加载，@import引用的css会等到页面加载结束后再加载。
c、link是html标签，没有兼容性，@import只要ie5以上才能识别。
d、link支持使用js控制DOM改变样式，@import不支持。
三、使用纯css创建一个三角形？
border创建
HTML字符创建
CSS3旋转创建
带缺口的三角形或空心三角形创建：
1.、两个三角形的位置、大小要一致。
2、里面三角形的底边框颜色为黑色（也可以为其它颜色），外面三角形边框颜色为白色的背景。
3、白色三角形要定位覆盖黑色三角形大部分来形成。
四、box-sizing和position有哪些属性值，默认值是什么？
position：static（默认值，遵循基本的定位规定，不能通过z-index进行层次分级和left等位移）
relative（相对定位，对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级）
absolute（绝对定位，脱离文档流，通过top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级）
fixed（固定定位，这里所固定的参照对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级）、inherit（从父元素继承）
box-sizing：content-box（默认值，W3C盒子模型，不包含padding和border）、border-box（IE盒子模型，包含padding和border）、inherit。
五、CSS选择器关于性能方面问题？
css选择符匹配元素是从右往左判断，首先由最后的css选择器产生一个集合，然后向上匹配，不存在的则从该集合中删除，一直到整个选择器都匹配完，还在集合里面的就是所匹配的选择器，如div>p，先产生p集合，然后向上匹配父元素是否是div。
从右向左的匹配在第一步就筛选掉了大量的不符合条件的元素，而从左向右的匹配规则的性能会浪费许多在失败的查找上面，因为从左到右会遍历查找所有的子节点，而从右到左直接寻找父节点。
a、避免使用通配规则 * ，通配符的计算次数过于庞大，reset.css对页面进行初始化便只对需要用到的元素进行选择，而不是通过通配符设置magin和padding等。
b、尽量少的去对标签进行选择，而是用class，一般标签重复率都比较高。
c、尽量少的去使用后代选择器，可以多使用子代选择器，降低查找开销和避免后代元素无必要的增加属性样式而覆盖原有样式。尽量将选择器的深度降到最低，最高不要超过四层，更多的使用类来关联每一个标签元素，虽然id选择器的渲染速度最快、高效，但是语义极差，权重高，后期比较难维护，所以不提倡给id选择器添加样式。
d、考虑继承，了解哪些属性是可以通过继承而来的（font,text-align,line-heigh,tcolor等），然后避免对这些属性重复添加样式。
六、CSS选择器的妙用？
能用css代替的地方尽量不要用js，使用css有更快的开发速度和更小的维护成本，而使用js会频繁的操作 DOM的CSS样式，浏览器会不停的执行重排和重绘，动画尽量用css3代替js也是因为性能性能上会稍微好一些、代码相对简单和可对动画做加速和优化，不过在动画控制上不够灵活，动画效果没有js实现那么丰富。
a、X + Y: 相邻兄弟选择器，紧接在另一个元素后的元素、并且这两个元素都有同样的父元素，实现导航左边框，可利用li+li来排除第一个li元素，如果相邻之间插入其它标签则无法实现效果，所以使用时布局需要注意相邻，X~Y则是匹配X后面的所有兄弟元素。当然也可以使用X:first-child或X:nth-of-type单独去掉第一个的左边框样式。
相邻兄弟选择器
b、使用:hover::after和attr获得data属性值来实现鼠标悬停而悬浮提示，::before和::after伪元素用于在css渲染中向元素逻辑上的头部或尾部添加内容,这些添加不会出现在DOM中,所以使用它们显示修饰性内容，例如图标，清除浮动十分合适。
伪元素
c、通过:checked选中状态来使紧邻的兄弟元素label（label伪装自定义形状）实现效果切换。
checked选择器
d、根据div个数显示不同样式，有1~3个div显示在同一行，而div的个数不一定，如果1个，那这个div占宽400px，2个时每一个300px，3个时每一个200px，用纯CSS实现。:first-child选择了第一个子元素，:nth-last-child(N)匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。li:first-child:nth-last-child(2)即选择属于倒数第2个li的同时还是第一个元素的情况，即共 2个子元素时的第一个。如果只是1个div时宽为400px,依次增加div则宽全部为200px时，可以使用:only-child选取属于其父元素的唯一子元素。
nth-last-child选择器
only-child选择器
e、:target选择器指向文档内被链接的元素，用于当前活动的target元素的样式，使用:target可以实现tab切换功能。
:target选择器
七、实现水平居中和垂直居中的方式？
a、固定宽高：margin:0 auto，实现水平居中，line-height等于父元素高度为垂直居中，行内元素或文本居中需要给父元素设置text-align:center。
b、固定宽高：给元素position设置relative或absolute（注意子绝父相，使用absolute需要父元素使用relative，不然会一直往上寻找）,left和top为50%，margin-left为负宽的一半和margin-top为负高的一半。
c、可不定宽高水平居中：给父元素设置float:left;position:relative;left:50%;子元素设置position:relative;left:-50%;来实现居中。
d、可不定宽高居中：给父元素设置display:table;子元素设置display:table-cell;来以表格形式居中。
e、可不定宽高居中：给元素position设置relative或absolute,left和top为50%，transform: translate(-50%,-50%)实现居中。
e、可不定宽高居中：flex弹性布局display: flex（设置为弹性盒模型），align-items:center（水平居中），justify-content:center（垂直居中）。
f、可不定宽高居中：grid网格布局display:grid，也可以使用align-items和justify-content的居中方式或者子元素使用margin:auto。
八、html5对input新增了哪些高级属性？
a、autocomplete 属性规定form 或 input 域应该拥有自动完成功能。
b、autofocus 属性规定在页面加载时，域自动地获得焦点。
c、height 和 width 属性规定用于 image 类型的 input 标签的图像高度和宽度。
d、min、max 和 step （输入域规定合法的数字间隔）属性用于为包含数字或日期的 input 类型规定限定
e、multiple 属性规定输入域中可选择多个值，适用于以下<input>类型的标签：email 和 file。
f、novalidate 属性规定在提交表单时不应该验证，禁止执行原生的校验，执行你自己JavaScript的校验方法。
g、pattern （正则表达式）属性规定用于验证 input 域的模式。
h、placeholder 属性提供一种提示，描述输入域所期待的值。
i、required 属性规定必须在提交之前填写输入域（不能为空）。
一些html5的表单元素email，url，number，range，color，date。
八、列举几种常用的清理浮动的css样式？
浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷，即子元素脱离文档流无法撑开父元素高度）
a、万能清除法after伪类 清浮动.clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}.clear{zoom:1;}
b、给父级添加overflow:hidden 清浮动，BFC（块级格式化上下文，可消除margin合并），BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；外面的元素也不会影响到容器里面的子元素，计算BFC的高度时，浮动元素也参与计算，所以父元素在计算其高度时，加入了浮动元素的高度达到清除浮动的效果。
c、给浮动元素父级设置高度，高度塌陷是因为给浮动元素的父级高度是自适应导致的，那么我们给它的设置适当的高度就可以解决这个问题了。
d、clear清除浮动（添加空div法）{clear:both;height:0;overflow:hidden;}
e、给父元素设置display:inline-block属性，也是BFC原理。
BFC的生成:
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
九、css3 transform, transition, animation区别和使用场景？
transform：css3引入了一些可以对网页元素进行变换的属性，比如旋转，缩放，移动，或者沿着水平或者垂直方向扭曲（斜切变换）等等，这些的基础都是transform属性， 描述的是元素的静态样式，而transition 和 animation 却都能实现动画效果，所以三者之中transform 常常配合后两者使用。
transition：可以实现动态效果，实际上是一定时间之内，一组css属性变换到另一组属性的动画展示过程，用于平滑过渡，在hover或者click的时候，改变各种css属性时，实现平滑过渡，而不是瞬间改变，从而达到动画的效果。
animation：通过控制关键帧来控制动画的每一步，强调流程与控制。
transition（补间动画）和animation（帧动画）不同点：
a、 触发条件不同，transition通常和hover等事件配合使用，由事件触发。animation则和gif动态图差不多，可以在页面加载完成的时候自动触发或使用触发器。
b、 循环次数， animation可以设定循环次数。
c、 精确性，animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性， transition中所有样式属性都要一起变化。
d、与javascript的交互，animation与js的交互不是很紧密，tranistion和js的结合更强大，js设定要变化的样式，transition负责动画效果。
结论：
1. 如果要灵活定制多个帧以及循环，用animation
2. 如果要简单的from to 效果，用 transition
3. 如果要使用js灵活设定动画属性，用transition
更新中……
网友评论