首页 面试笔试题_前端_html+css简答_专项练习(2)

面试笔试题_前端_html+css简答_专项练习(2)

举报
开通vip

面试笔试题_前端_html+css简答_专项练习(2)天津丁未春风科技有限公司试卷部分1、media属性?screen?All?max-width?min-width?2、一般做手机页面切图有几种方式?3、px/em/rem有什么区别?为什么通常给font-size设置的字体为5%4、em会继承父级元素的字体大小。使用rem为元素设定字体大小时,仍然是相对大5、sass和scss有什么区别?sass一般怎么样编译的6、如果对css进行优化如何处理?7、如何对css文件进行压缩合并?gulp?8、组件?模块化编程?9、图片和文字在同一行显示?10、禁止事件冒泡11、禁止...

面试笔试题_前端_html+css简答_专项练习(2)
天津丁未春风科技有限公司试卷部分1、media属性?screen?All?max-width?min-width?2、一般做手机页面切图有几种方式?3、px/em/rem有什么区别?为什么通常给font-size设置的字体为5%4、em会继承父级元素的字体大小。使用rem为元素设定字体大小时,仍然是相对大5、sass和scss有什么区别?sass一般怎么样编译的6、如果对css进行优化如何处理?7、如何对css文件进行压缩合并?gulp?8、组件?模块化编程?9、图片和文字在同一行显示?10、禁止事件冒泡11、禁止默认事件12、a标签中activehoverlinkvisited正确的设置顺序是什么?13、a标签中如何禁用href跳转页面或定位链接14、手机端上图片长时间点击会选中图片,如何处理?15、video标签的几个个属性方法16、常见的视频编码格式有几种?视频格式有几种?17、canvas在标签上设置宽高和在style中设置宽高有什么区别?18、border-image?box-sizing?19、渐进增强和优雅降级20、解释在ie低版本下的怪异盒模型和c3的怪异盒模型和弹性盒模型?丁未春风,伴你成功!更多资料关注公众号天津丁未春风科技有限公司答案部分1、media属性?screen?All?max-width?min-width?media属性规定被链接文档将显示在什么设备上。media属性用于为不同的媒介类型规定不同的样式。Screen计算机默认屏幕,all适用于所有设备,max-width超过最大宽度就不执行,min-width必须大于最小宽度才执行。2、一般做手机页面切图有几种方式?响应式布局,弹性布局display:flex,利用js编写设定比例,给根元素设定丁未春风,伴你成功!更多资料关注公众号天津丁未春风科技有限公司像素,使用rem为单位。3、px/em/rem有什么区别?为什么通常给font-size设置的字体为5%相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。4、em会继承父级元素的字体大小。使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。rem是相对于浏览器进行缩放的。1rem默认是16px,在响应式布局中,一个个除来转换成rem,太麻烦,所以重置rembody{font-size=62.5%}此时1rem=10px;若是12px则是1.2rem.5、sass和scss有什么区别?sass一般怎么样编译的文件扩展名不同,Sass是以“.sass”后缀为扩展名,而SCSS是以“.scss”后缀为扩展名;语法 关于书的成语关于读书的排比句社区图书漂流公约怎么写关于读书的小报汉书pdf 写方式不同,Sass是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而SCSS的语法书写和我们的CSS语法书写方式非常类似。6、如果对css进行优化如何处理?压缩打包,图片整合,避免使用Hack,解决兼容问 快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题 ,使用简写,让CSS能保证日后的维护。7、如何对css文件进行压缩合并?gulp?使用gulp,首页全局安装gulp。npminstall--globalgulp其次局部安装gulp。npminstallgulp--save-dev丁未春风,伴你成功!更多资料关注公众号天津丁未春风科技有限公司在项目根目录下创建一个名为gulpfile.js的文件vargulp=require('gulp');gulp.task('default',function(){//将你的默认的任务代码放在这});运行gulp。(默认的名为default的任务(task)将会被运行,想要单独执行特定的任务(task),请输入gulp)gulp合并和压缩JS、CSS文件压缩JS,CSS文件需要引用如下组件:gulp-minify-css:压缩css8、组件?模块化编程?组件化编程:将jscsshtml包装一起提供方法和效果;模块化化:将相同的功能抽取出来存放在一个位置进行编程9、图片和文字在同一行显示?1在css中给div添加上“vertical-align:middle”属性。2分别把图片和文字放入不同的div中,然后用“margin”属性进行定位,就可以使他们显示在同一行。3把图片设置为背景图片。10、禁止事件冒泡event.stopPropagation()11、禁止默认事件event.preventDefault()12、a标签中activehoverlinkvisited正确的设置顺序是什么?a标签的link、visited、hover、active是有一定顺序的a:linka:visiteda:hovera:active丁未春风,伴你成功!更多资料关注公众号天津丁未春风科技有限公司13、a标签中如何禁用href跳转页面或定位链接e.preventDefault();href="javascript:void(0);14、手机端上图片长时间点击会选中图片,如何处理?onselect=function(){returnfalse}15、video标签的几个个属性方法src:视频的URLposter:视频封面,没有播放时显示的图片preload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条width:视频宽度height:视频高度16、常见的视频编码格式有几种?视频格式有几种?视频格式:MPEG-1、MPEG-2和MPEG4、AVI、RM、ASF和WMV格式视频编码格式:H.264、MPEG-4、MPEG-2、WMA-HD以及VC-117、canvas在标签上设置宽高和在style中设置宽高有什么区别?canvas标签的width和height是画布实际宽度和高度,绘制的图形都是在这个上面。而style的width和height是canvas在浏览器中被渲染的高度和宽度。如果canvas的width和height没指定或值不正确,就被设置成默认值。18、border-image?box-sizing?Border-image:图形化边框Box-sizing:属性允许您以特定的方式定义匹配某个区域的特定元素。语法:box-sizing:content-box|border-boxContent-box:padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和,即(Elementwidth=width+border+padding)此属性 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 现为标准模式下的盒模型.丁未春风,伴你成功!更多资料关注公众号天津丁未春风科技有限公司Border-box:padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,即使定义有border和padding也不会改变对象的实际宽度,即(Elementwidth=width)此属性表现为怪异模式下的盒模型。19、渐进增强和优雅降级渐进增强progressiveenhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级gracefuldegradation:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。“优雅降级”观点“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段,并把测试对象限定为主流浏览器(如IE、Mozilla等)的前一个版本。在这种设计范例下,旧版的浏览器被认为仅能提供“简陋却无妨(poor,butpassable)”的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点,因此除了修复较大的错误之外,其它的差异将被直接忽略。“渐进增强”观点“渐进增强”观点则认为应关注于 内容 财务内部控制制度的内容财务内部控制制度的内容人员招聘与配置的内容项目成本控制的内容消防安全演练内容 本身。内容是我们建立网站的诱因。有的网站展示它,有的则收集它,有的寻求,有的操作,还有的网站甚至会包含以上的种种,但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被Yahoo!所采纳并用以构建其“分级式浏览器支持(GradedBrowserSupport)”策略的原因所在。那么问题来了。现在产品经理看到IE6,7,8网页效果相对高版本现代浏览器少了很多圆角,阴影(CSS3),要求兼容(使用图片背景,放弃CSS3),你会如何说服他?20、解释在ie低版本下的怪异盒模型和c3的怪异盒模型和弹性盒模型?IE当padding+border的值小于width或者height:盒模型的宽度=margin(左右)+width(width已经包含了padding和border的值)盒模型的高度=margin(上下)+height(height已经包含了padding和border的值)当padding+border的值大于width或者height:盒模型的宽度=margin(左右)+padding(左右)+border(左右)盒模型的高度=margin(上下)+padding(上下)+border(上下)+19px(加一个默认行高19px)所以相当于是padding+border和width或者height比大小,谁大取谁。丁未春风,伴你成功!更多资料关注公众号天津丁未春风科技有限公司以上几种DOCTYPE都是标准的文档类型,无论使用哪种模式完整定义DOCTYPE,都会触发标准模式,而如果DOCTYPE缺失则在ie6,ie7,ie8下将会触发怪异模式(quirks模式)CSS3box-sizing有两个值一个是content-box,另一个是border-box。当设置为box-sizing:content-box时,将采用标准模式解析计算,也是默认模式;当设置为box-sizing:border-box时,将采用怪异模式解析计算;Css3弹性盒模型引入了新的盒子模型—弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。丁未春风,伴你成功!更多资料关注公众号
本文档为【面试笔试题_前端_html+css简答_专项练习(2)】,请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑, 图片更改请在作品中右键图片并更换,文字修改请直接点击文字进行修改,也可以新增和删除文档中的内容。
该文档来自用户分享,如有侵权行为请发邮件ishare@vip.sina.com联系网站客服,我们会及时删除。
[版权声明] 本站所有资料为用户分享产生,若发现您的权利被侵害,请联系客服邮件isharekefu@iask.cn,我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
下载需要: 免费 已有0 人下载
最新资料
资料动态
专题动态
机构认证用户
天津丁未春风
天津丁未春风科技有限公司成立于2021年05月31日,注册地位于天津市武清区大良镇兴良道10号226室,法定代表人为王晓见。经营范围包括一般项目:技术服务、技术开发、技术咨询、技术交流、技术转让、技术推广;教育咨询服务(不含涉许可审批的教育培训活动);企业管理咨询;企业形象策划;市场营销策划;旅行社服务网点旅游招徕、咨询服务;信息咨询服务(不含许可类信息咨询服务);会议及展览服务;
格式:pdf
大小:240KB
软件:PDF阅读器
页数:7
分类:计算机考试
上传时间:2022-11-07
浏览量:0