前端学习笔记
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