前端学习笔记

前端学习笔记

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
*优先级
就近原则，同权重下后定义的样式会覆盖前面定义的;
!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