网页布局的核心 —— 就是用 CSS 来摆放盒子位置。
CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流、浮动和定位,其中:
思考一下用标准流或浮动能否实现类似的效果?
(之前学的内容,是压不住后面的图片和文字的)
一个完整的网页,有标准流 、 浮动 、 定位 一起完成布局的。每个都有自己的专门用法。
可以让盒子上下排列 或者 左右排列的
可以让多个块级元素一行显示 或者 左右对齐盒子 浮动的盒子就是按照顺序左右排列
注意:定位也可做出以下效果,但它有很大的缺陷,每个盒子都需要测量数值。
定位最大的特点是有层叠的概念,就是可以让多个盒子 前后 叠压来显示。 但是每个盒子需要测量数值。
考虑到在blog中不好体现代码更改的位置,小迪才用github托管代码,大家可以查看github,看到详细版本修改过程,搭配博客学习。
从IE6开始,引入了Standards模式,标准模式中,浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。
在IE6之前CSS还不够成熟,所以IE5等之前的浏览器对CSS的支持很差, IE6将对CSS提供更好的支持,然而这时的问题就来了,因为有很多页面是基于旧的布局方式写的,而如果IE6 支持CSS则将令这些页面显示不正常,如何在即保证不破坏现有页面,又提供新的渲染机制呢?
在写程序时我们也会经常遇到这样的问题,如何保证原来的接口不变,又提供更强大的功能,尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支,即当某个参数为真时,我们就使用新功能,而如果这个参数 不为真时,就使用旧功能,这样就能不破坏原有的程序,又提供新功能。IE6也是类似这样做的,它将DTD当成了这个“参数”,因为以前的页面大家都不会去写DTD,所以IE6就假定 如果写了DTD,就意味着这个页面将采用对CSS支持更好的布局,而如果没有,则采用兼容之前的布局方式。这就是Quirks模式(怪癖模式,诡异模式,怪异模式)。
总体会有布局、样式解析和脚本执行三个方面的区别。
盒模型:在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks 模式下,IE的宽度和高度还包含了padding和border。
设置行内元素的高宽:在Standards模式下,给<span>等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效。
设置百分比的高度:在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中:使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效。
(还有很多,答出什么不重要,关键是看他答出的这些是不是自己经验遇到的,还是说都是看文章看的,甚至完全不知道。)
改版的时候更方便 只要改css文件。
页面加载速度更快、结构化清晰、页面显示简洁。
易于优化(seo)搜索引擎更友好,排名更容易靠前。
strong:粗体强调标签,强调,表示内容的重要性
em:斜体强调标签,更强烈强调,表示内容的强调点
渐进增强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的工作安排在开发周期的最后阶段,并把测试对象限定为主流浏览器(如 IE、Mozilla 等)的前一个版本。
在这种设计范例下,旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点,因此除了修复较大的错误之外,其它的差异将被直接忽略。
“渐进增强”观点则认为应关注于内容本身。
内容是我们建立网站的诱因。有的网站展示它,有的则收集它,有的寻求,有的操作,还有的网站甚至会包含以上的种种,但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。
那么问题来了。现在产品经理看到IE6,7,8网页效果相对高版本现代浏览器少了很多圆角,阴影(),要求兼容(使用图片背景,放弃CSS3),你会如何说服他?
节约主域名的连接数,优化页面响应速度
网页标准和标准制定机构都是为了能让web发展的更‘健康’,开发者遵循统一的标准,降低开发难度,开发成本,SEO也会更好做,也不会因为滥用代码导致各种BUG、安全问题,最终提高网站易用性。
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。
src用于替换当前元素,href用于在当前文档和引用资源之间确立联系。
src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。
设置宽高为0,设置透明度为0,设置z-index位置在-1000
答案:知道是要用css3。使用animation动画实现一个简单的幻灯片效果。
闭包就是能够读取其他函数内部变量的函数。
/",但实际结果却仍是"/"。事实是这样的:在函数内部修改了引用类型值的参数,该参数值的原始引用保持不变。我们可以把参数想象成局部变量,当参数被重写时,这个变量引用的就是一个局部变量,局部变量的生存期仅限于函数执行的过程中,函数执行完毕,局部变量即被销毁以释放内存。
(补充:内部环境可以通过作用域链访问所有的外部环境中的变量对象,但外部环境无法访问内部环境。每个环境都可以向上搜索作用域链,以查询变量和函数名,反之向下则不能。)
因为var a = 666;定义了局部变量a,并且赋值为666,根据变量作用域链,
全局变量处在作用域末端,优先访问了局部变量,从而覆盖了全局变量 。
因为var a = 666;定义了局部变量a,同样覆盖了全局变量,但是在alert(a);之前
记住: 异步处理,一切OK 声明提前
答案:访函数的作用是使用format函数将函数的参数替换掉{0}这样的内容,返回一个格式化后的结果:
理解变量和函数的访问范围和生命周期,全局作用域与局部作用域的区别,JavaScript中没有块作用域,函数的嵌套形成不同层次的作用域,嵌套的层次形成链式形式,通过作用域链查找属性的规则需要深入理解。
理解不同形式的函数调用方式下的this指向,理解事件函数、定时函数中的this指向,函数的调用形式决定了this的指向。
它的功能是把对应的字符串解析成JS代码并运行;应该避免使用eval,不安全,非常耗性能(2个步骤,一次解析成js语句,一次执行)
[1].在IE中,事件对象是作为一个全局变量来保存和维护的.所有的浏览器事件,不管是用户触发的,还是其他事件,都会更新/markyun
将它用script标签引入页面(该库支持AMD,于是你也可以按照AMD规范,用诸如require.js的模块加载器引入),并且在dom ready时初始化在body上,
2.根据分析,如果不引入其它类库,也不想自己按照上述fastclcik的思路再开发一套东西,需要1.一个优先于下面的“divClickUnder”捕获的事件;2.并且通过这个事件阻止掉默认行为(下面的“divClickUnder”对click事件的捕获,在的safari,click的捕获被认为和滚屏、点击输入框弹起键盘等一样,是一种浏览器默认行为,即可以被event.preventDefault()阻止的行为)。
知识面的宽度,流行框架要多多熟悉
currency,是什么过滤器——格式化数字为货币格式,单位是$符。
移动端的点击事件的有延迟,时间是多久,为什么会有? 怎么解决这个延时?(click 有 300ms 延迟,为了实现safari的双击事件的设计,浏览器要知道你是不是要双击操作。)
*(优点)因为Node是基于事件驱动和无阻塞的,所以非常适合处理并发请求,
因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。
此外,与Node代理服务器交互的客户端代码是由javascript语言编写的,
因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情。
*(缺点)Node是一个相对新的开源项目,所以不太稳定,它总是一直在变,
而且缺少足够多的第三方库支持。看起来,就像是Ruby/Rails当年的样子。
至少给出自己的思路(url-hash,可以使用已有的一些框架history.js等)
1)、实时应用:如在线聊天,实时通知推送等等(如socket.io)
2)、分布式应用:通过高效的并行I/O使用已有的数据
3)、工具类应用:海量的工具,小到前端压缩部署(如grunt),大到桌面图形界面应用程序
4)、游戏类应用:游戏领域对实时和并发有很高的要求(如网易的pomelo框架)
5)、利用稳定接口提升Web渲染能力
6)、前后端编程语言环境统一:前端开发人员可以非常快速地切入到服务器端的开发(如著名的纯Javascript全栈式MEAN)
Nodejs相关概念的理解程度
熟悉前后端通信相关知识
1. 因为Node是基于事件驱动和无阻塞的,所以非常适合处理并发请求,因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。
2. 与Node代理服务器交互的客户端代码是由javascript语言编写的,因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情。
1. Node是一个相对新的开源项目,所以不太稳定,它总是一直在变。
2. 缺少足够多的第三方库支持。看起来,就像是Ruby/Rails当年的样子(第三方库现在已经很丰富了,所以这个缺点可以说不存在了)。
开发过的插件:城市选择插件,汽车型号选择插件、幻灯片插件。弹出层。(写过开源程序,加载器,js引擎更好)
Formatting Context:指页面中的一个渲染区域,并且拥有一套渲染规则,他决定了其子元素如何定位,以及与其他元素的相互关系和作用。
网站重构:应用web标准进行设计(第2版)
加班就像借钱,原则应当是------救急不救穷
先期团队必须确定好全局样式(globe.css),编码模式(utf-8) 等
编写习惯必须一致(例如都是采用继承式的写法,单样式都写成一行);
标注样式编写人,各模块都及时标注(标注关键样式调用的地方);
页面进行标注(例如 页面 模块 开始和结束);
CSS跟HTML 分文件夹并行存放,命名都得统一(例如style.css)
JS 分文件夹存放 命民以该JS 功能为准英文翻译;
图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。
setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。
闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)
因为我想去阿里,所以我针对阿里的说
最羡慕就是在双十一购物节,350.19亿元,每分钟支付79万笔。海量数据,居然无一漏单、无一故障。太厉害了。
融入自己的设计理念,注重用户体验,选择合适的技术
压缩、合并,减少请求,代码层析优化。。。
知识面宽度,最好熟悉一些后台语言,比如php,展现出自己的技术两点
考虑问题的深入,不仅仅停留在完成任务上,要精益求精
表现出对前端的认同与兴趣,关注相关技术前沿
C.有权限的任何文件夹都可以删除 D.有权限的空文件夹可以删除
用途:检测变量是否为空
判断:如果 var 是非空或非零的值,则 empty() 返回 FALSE。换句话说,""、0、"0"、NULL、FALSE、array()、var $var; 以及没有任何属性的对象都将被认为是空的,如果 var 为空,则返回 TRUE。注意:empty() 只检测变量,检测任何非变量的东西都将导致解析错误。换句话说,后边的语句将不会起作用;
用途:检测变量是否设置
判断:检测变量是否设置,并且不是 NULL。如果已经使用 unset() 释放了一个变量之后,它将不再是 isset()。若使用 isset() 测试一个被设置成 NULL 的变量,将返回 FALSE。同时要注意的是一个NULL 字节("\0")并不等同于 PHP 的 NULL 常数。
1.减少css,js文件数量及大小(减少重复性代码,代码重复利用),压缩CSS和Js代码
熟悉相关设计规范,自己总结的一些经验
团队协作,个人能力。实践经验
前端是最贴近用户的程序员,比后端、数据库、产品经理、运营、安全都近。
前端是最贴近用户的程序员,前端的能力就是能让产品从 90分进化到 100 分,甚至更好,
参与项目,快速高质量完成实现效果图,精确到1px;
与团队成员,UI设计,产品经理的沟通;
做好的页面结构,页面重构和用户体验;
处理hack,兼容、写出优美的代码格式;
针对服务器的优化、拥抱最新前端技术。
1. 都使用和了解过哪些编辑器?都使用和了解过哪些日常工具?
2. 都知道有哪些浏览器内核?开发过的项目都兼容哪些浏览器?
3. 瀑布流布局或者流式布局是否有了解
5. 都用过什么代码调试工具?
6. 是否有接触过或者了解过重构。
7.你遇到过比较难的技术问题是?你是如何解决的?
需求:点击搜索框跳转新页面然后自动获取焦点弹起键盘。 遇到的问题: input的autofocus属性在android上可以,在ios上不兼容,ios为了安全起见,禁掉了。 解决方案: 使用子路由做新页面 子页面撑满全屏,看起来是...
需求:点击button按钮,录入成功后,页面上的input框自动聚焦,快速进行下一次录入,提高效率开始尝试了几种方法都没有成功一、首先想到的用vue指令 v-focus,然而没有成功v-model="book.isbnOrIssn"@change.native=...
在js中我们要获取一个按键的编码通常需要通过(keydown/keyup)去绑定一个事件,再通过默认参数event中的keyCode属性去取得编码。如果我们要实现按固定的键才能触发事件时就需要在事件中进行不断的判断,这样会显的很...
在测试中这个input框可以显示,调用该组件时手动点击获取焦点即可,但是上线后这个输入框时要定位到屏幕外的就算是可以显示在屏幕中肯定不能要求用户去点击,故而若能找到一个方法可以在调用时就使其获取到焦点,不...
今天小编就为大家分享一篇解决vue js IOS H5focus无法自动弹出键盘的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
input标签获取焦点事件 2、onblur(常用) input失去焦点事件(触发条件:先获取焦点,再失去焦点触发) 3、onchange input失去焦点并且它的value值发生变化时触发 4、oninput input框输入过程中value值改变时实时...
vue方向键插件,适合键盘的快捷键操作,通过键盘在input间切换,应用在后台系统开单,财务等等的快速输入和保存上,使用简单,配置方便 使用方法 安装npm install --save vue-direction-key 使用 在入口文件中...
在移动端开发的表单页面当中,在android手机上,当点击表单页面的输入框以后,获取焦点,软键盘弹出,会覆盖住表单页面的输入框,会出现这样的问题。 二、需求分析 这种问题出现在android手机上,当输入框在可视区域...
目录常用按键别名未提供别名的键系统修饰键自定义按键别名总结在js中我们要获取一个按键的编码通常需要通过(keydown/keyup)去绑定一个事件,再通过默认参数event中的keyCode属性去取得编码。如果我们要实现按固定的...
上回书说到怎么在vue.js中添加bootstrap样式,这次来写一下键盘按键指令吧~ 一、先来说一下vue.js本来就有的按键指令吧~ 这个就灰常的简单和方便啦~ 1、随便找一个vue页面文件,在<template>标签里写一个...
因为element-ui把input进行了封装,原事件就不起作用了,代码如下: 现在发现这个键盘事件好像对input框支持比较好,其他的元素多少会有点问题,或者直接无效,究其原因是其他的元素没有获取焦点或者没有键盘事件。...