首页 > 代码库 > 【前端】牛客练题积累
【前端】牛客练题积累
HTML/CSS方面：
display属性 :block : CSS1 块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行 可以定义高度和宽度none : CSS1 隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间inline : CSS1 内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行inline-block : IE5.5 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内 inherit: 看display默认是不具备继承性的，使用inherit可以让其继承父对象的display属性。注：内联元素加上display：block;后被块级化，可以定义其宽度和高度。块级元素一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。
overflow属性定义溢出元素内容区的内容会如何处理
参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。
在HTML中，通过<a>标签打开一个新链接，而<a>标签的target属性是指打开的新链接是以什么样的形式打开的；target属性的值为：
_blank 在新窗口中打开被链接文档
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framname 在指定的框架中打开被链接文档。
若<form>和<a>标签同时出现该属性，form中的target起作用；
alt是html标签的属性，而title既是html标签，又是html属性。
title标签，网页的标题就是写在<title></title>这对标签之内的。
title作为属性时，用来为元素提供额外说明信息。例如，给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。
而alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。图片加载完成后看不到alt
HTML标签的使用：
<audio> 标签定义声音，比如音乐或其他音频流。
<canvas> 标签定义图形，比如图表和其他图像。<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
<menu> 标签定义命令的列表或菜单。<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。
command 元素表示用户能够调用的命令。<command> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。
CSS中Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。static元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。relative元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。absolute元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。fixed元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。相对于浏览器窗口进行定位。注，IE6不支持CSS中的position:fixed属性。
<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
当定义border:none时，表示无边框样式，浏览器并不会对边框进行渲染，也就没有实际的宽度；定义边框时，除了设置宽度外，还必须设置边框的样式才能显示出来。
CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。所以C错误
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
浏览器的内核引擎，基本上是四分天下：
1）Trident: IE 以Trident 作为内核引擎；
2)Gecko: Firefox 是基于 Gecko 开发；
3）WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器；
4）Presto: Opera的内核，但由于市场选择问题，主要应用在手机平台--Opera mini
注：2013年2月Opera宣布转向WebKit引擎注：2013年4月Opera宣布放弃WEBKIT，跟随GOOGLE的新开发的blink引擎
JavaScript方面：
jquery事件响应：onfocus 获得焦点 onblur 失去焦点
Flash提供了ExternalInterface接口与JavaScript通信两个方法：call和addCallback作用：call让Flash调用js里的方法，addCallback是用来注册flash函数让js调用。
js跨域问题：只要 协议 、 域名 、 端口 有任何一个 不同, 都被当作是不同的域。
call和apply：
相同点:两个方法产生的 作用是完全一样的
不同点:方法传递的参数不同
call, apply方法它们除了第一个参数,即执行时上下文对象相同外,call方法的其它参数将依次传递给借用的方法作参数,而apply就两个参数,第二个参数为一个数组传递。
单独说一下js跨域问题，因为之前也遇到过：
javascript出于安全方面的考虑，不允许跨域调用其他页面的对象。
跨域简单的理解就是因为javascript同源策略的限制，a.com域名下的js无法操作b.com 或者是c.a.com域名下的对象。
解决方案：
1.用过jsonp，原理是通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。
2.通过修改document.domain来跨子域，只适用于不同子域的框架间的交互，两个页面的document.domain都设成相同的域名就可以。但要注意的是，document.domain的设置是有限制的，只能把document.domain设置成自身或更高一级的父域，且主域必须相同。
domain+iframe
3.通过window.name来进行跨域
window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。
4.通过HTML5中的window.postMessage方法来跨域传送数据
window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
调用postMessage方法的window对象是指要接收消息的那一个window对象，该方法的第一个参数message为要发送的消息，类型只能为字符串；第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 * 。
需要接收消息的window对象，可是通过监听自身的message事件来获取传过来的消息，消息内容储存在该事件对象的data属性中。
【前端】牛客练题积累