前端学习笔记

前端学习笔记

1.Doctype作用？严格模式和混杂模式有什么区别？他们有什么意义？

1). Doctype声明位于文档的最前面，位于html前面,告知浏览器的解析器用那种方式的文档规范来解析这个文档。

2).严格模式下的排版和JS的运作方式是以游览器支持的最高标准来运行的。

3).混杂模式下，页面以宽松的向后兼容的方式显示。模拟老式浏览器的的行为以防止站点无法工作。

4).Doctype不存在或不正确会导致文档以混在模式运行。

注:”use strict”为js的严格模式。

2.行内元素有哪些？块级元素有哪些？空(void)元素有哪些？

1).css规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认类型。例如:div - block -块级元素 span - inline - 行内元素。

2).块级元素有: div ul ol li dl dt dd h1–h4… p，行内元素有:a b span img input select strong 。

3).知名的控元素:br hr meta 等，鲜为人知的:area base col 等。

3.link与@import的区别是？

1).link是XHTML提供的，而@import是css提供的；

2).页面加载时link同时被加载，而@import会等到页面加载完才会被加载。

3).import只有ie5才会被识别，link无兼容问题。

4).link样式的权重高于import的权重。

5).ink支持使用Javascript控制DOM去改变样式,import不支持。

4.浏览器的内核分别是什么?

Mozilla的Gecko、Chrome的Blink,微软的Edge。

5.常见兼容性问题？

png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.

* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}

这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

渐进识别的方式，从总体中逐渐排除局部。

首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

css
.bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}

*  IE下,可以使用获取常规属性的方法来获取自定义属性,
也可以使用getAttribute()获取自定义属性;
Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.

* IE下,even对象有x,y属性,但是没有pageX,pageY属性;
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

* 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,
可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

6.html5有哪些新特性，移除了哪些元素？如何处理H5新标签和浏览器兼容问题？如何区分html和html5？

*html5 现在已经不是SGML( 标记通用语言)的子集，主要是关于图像，位置，存储，多任务等功能的增加。

*绘画 canvas

用于媒介回放的video和audio元素。

本地离线存储localStorage长期存储数据，浏览器关闭后不会消失。

sessionStorage关闭后会自动删除。

语义化更好的元素：article footer header nav section

表单控件：calendar date time email url search

新的技术：webworker websocket Geolocation

移除的元素：basefont big center font s strike tt u

对可用性产生负面影响的元素：frame frameset noframes

支持新标签：

*IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签。浏览器支持新标签后，还需要添加标签默认的样式。

*当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架。

如何区分： DOCTYPE声明\新增的结构元素\功能元素

7.语义化的理解？

用正确的标签做正确的事。html语义化就是让页面的内容结构化，便已对浏览器，搜索引擎解析：在没有css的情况下也已一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重。利于SEO(搜索引擎的优化)。让阅读源代码的人更容易将网站分块，便于阅读理解维护。

8.iframe有哪些缺点？

*会阻塞主页面的onload事件

*和主页面共享连接池，而浏览器相同域的连接有限制，所以会影响页面的并行加载。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以可以绕开以上两个问题。

9.描述下cookie，localstorage，sessionstorage的区别？

cookie是在游览器与服务之间来回传递的。后面的两个不会。

localstorage和sessionstorage有更大的存储空间，各自有独立存储空间。

10.如何实现两个标签页之间的通信？

调用localstorge、cookies等本地存储方式。

11.websocket如何兼容低版本浏览器？

AdobeFlashSocket,ActiveX HTMLFile (IE),基于 multipart 编码发送 XHR,基于长轮询的 XHR。

12.介绍下css的盒子模型？

1).用两种：IE盒子模型，标准w3c盒子模型：IE的contant包含了border和padding，标准的包含了contant(内容)，padding(填充)，margin(边界),border(边框)。

13.css选择符有哪些，哪些属性可以继承，优先级如何计算，css3新增的伪类有哪些？

*

1).id选择器(#myid);

2).类选择器(.classname);

3). 标签选择器(div p);

3).相邻选择器(h1 + p);

4).子选择器(ul > li);

5).后代选择器(li a);

6).通配符选择器(*);

7).属性选择器(input[name=”age”]);

8).伪类选择器(a:hover);

*可继承的样式

font-size font-family color ,ul li dl dd dt

*不可继承的样式

border padding margin width height

*优先级
4000

就近原则，同权重下后定义的样式会覆盖前面定义的;

!important > 内联(1000) > id(100) > class(10) >tag(1);

css3新增伪类：

p:first-of-type 选择属于其父元素的首个p元素的每个 p 元素。

p:end-of-type 选择属于其父元素的最后个p元素的每个p元素。

p:only-of-type 选择属于其父元素唯一的p元素的每个p元素。

p:only-child 选择属于其父元素的唯一子元素的每个p元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个p元素。

:enabled :disabled 控制表单控件的禁用状态。

:checked 单选框或复选框被选中。

14.如何居中div?如何居中一个浮动元素？

*给div设一个width,然后设置margin:0 auto;

* 居中一个浮动元素，首先确定容器的宽和高，设置层的外边距margin

例：500*300 px

.div {

width:500px ;

height:300px;//高度可以不设

Margin: -150px 0 0 -250px;

position:relative;相对定位

background-color:pink;//方便看效果

left:50%;

top:50%;

}

15.列出display，position的值，说出它们的作用?

*

block像块元素一样显示。

none 缺省值，像行内元素一样显示。

inline-block像行内元素一样显示，但内容像块元素显示。

list-item像块元素一样显示，并添加样式列表标记。

*

absolute：生成绝对定位的元素，相对于static外的第一个父元素进行定位。

fixed(旧IE不支持)：生成固定定位元素，相对与浏览器窗口进行定位。

relative：生成相对定位元素，相对于其正常位置进行定位。

static：默认值。没有定位，元素出现在正常的流中(忽略top,bottom,left,right,z-index 声明)。

inherit：规定从父元素继承position属性的值。

16.经常遇到css兼容性有哪些？原因，解决方法？

第一类是精确按照设计图开发的前端开发人员，可以说是精确到1px的，并且在很少的情况下会碰到浏览器的兼容性问题，而这些问题往往都是浏览器的bug。第二类是基本按照设计图来开发的前端开发人员，很多细枝末节差距很大，不如间距，行高，图片位置等等经常会差几px。某种效果的实现也是反复调试得到，具体为什么出现这种效果还模模糊糊，整体布局十分脆弱。稍有改动就乱七八糟。这种问题是各个浏览器的默认值不同。

17.为什么要初始化css样式？

因为浏览器兼容性问题，不同的浏览器对有些标签的默认值不同，如果没有初始化往往会出现各个游览器之间显示差异。

最简单的初始化方法是*{padding:0;margin:0}(不建议)

淘宝的样式初始化：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }

body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }

h1, h2, h3, h4, h5, h6{ font-size:100%; }

address, cite, dfn, em, var { font-style:normal; }

code, kbd, pre, samp { font-family:couriernew, courier, monospace; }

small{ font-size:12px; }

ul, ol { list-style:none; }

a { text-decoration:none; }

a:hover { text-decoration:underline; }

sup { vertical-align:text-top; }

sub{ vertical-align:text-bottom; }

legend { color:#000; }

fieldset, img { border:0; }

button, input, select, textarea { font-size:100%; }

table { border-collapse:collapse; border-spacing:0; }

18.如何寻找一个元素的容器块(containingblock)?

1). static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）;

2). absolute: 向上找最近的定位为absolute/relative的元素;

3). fixed: 它的containing block一律为根元素(html/body)，根元素也是initial containing block;

19.对BFC规范的理解？

W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关 系和相互作用。

20.解释下浮动和它的工作原理？清除浮动的技巧

浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到 块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。

正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。

清除浮动的原理:

1).通过在浮动元素末尾添加一个空的标签例如 div style=”clear:both”，其他标签br等亦可。

优点：通俗易懂，容易掌握

缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦，这是坚决不能忍受的，所以你看了这篇文章之后还是建议不要用了吧。

2).父元素设置 overflow：hidden

优点：不存在结构和语义化问题，代码量极少

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；04年POPO就发现overflow:hidden会导致中键失效，这是我作为一个多标签浏览控所不能接受的。所以还是不要使用了。

3).使用:after 伪元素

.clearfix:after {content:”.”; display:block; height:0; visibility:hidden; clear:both; }

.clearfix { *zoom:1; }

display:block 使生成的元素以块级元素显示,占满剩余空间; height:0 避免生成内容破坏原有布局的高度。visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互; 通过 content:”.”生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:”XXXXXXXXX”,有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”” 仍然会产生额外的空隙；zoom：1 触发IE hasLayout。

优点：结构和语义化完全正确,代码量居中

缺点：复用方式不当会造成代码量增加

更进一步还可以：

/* For modern browsers */

.cf:before,.cf:after {

content:”“;

display:table;

}

.cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */

.cf { zoom:1; }

21.用过媒体查询?

现今每天都有更多的手机和平板电脑问市。消费者能够拥有可想象到的各种规格和形状的设备，但是网站开发人员却面临一个挑战：如何使他们的网站在传统浏览器、手机和平板电脑浏览器上有很好的效果，如何在各种大小的屏幕上提供一流的用户体验,答案是：采用响应式设计。响应式设计可以随所显示的屏幕大小而改变。实现响应式设计的主要方法是使用 CSS 媒体查询。

22.使用 CSS 预处理器吗？

SASS:SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

23.如果需要手动写动画，你认为最小时间间隔是多久，为什么？

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

24.display:inline-block 什么时候会显示间隙？

移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing