前端笔记

1：HTML+css1。文档类型？严格模式和混合模式——这两种模式如何触发，区分它们有什么意义？Doctype声明位于文档的前面，标签之前。此标记告诉浏览器文档使用哪种HTML或XHTML规范。此标记声明了三种DTD类型，分别表示严格的、临时的和基于框架的HTML文档。当浏览器制造商着手创建符合标准的浏览器时，他们希望确保向后兼容性。为此，他们创建了两种渲染模式：标准模式和怪异模式。在标准模式下，浏览器根据规范呈现页面；在混杂模式下，页面以更宽松的向后兼容方式显示。混杂模式通常模仿旧浏览器（如MicrosoftIE4和NetscapeNavigator4）的行为，以防止旧站点工作。浏览器根据DOCTYPE的存在与否以及使用的DTD选择使用哪种呈现方法。如果XHTML文档包含格式正确的DOCTYPE，它通常以标准模式呈现。对于HTML4.01文档，包含具有严格DTD的DOCTYPE通常会导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也会导致页面以标准模式呈现，但是具有不带URI的过渡DTD会导致页面以混杂模式呈现。缺少或格式不正确的DOCTYPE将导致HTML和XHTML文档以混杂模式呈现。2.什么是行内元素？什么是块级元素？CSS盒子模型？行内元素包括：abspanIbemimginputselectstrong块级元素包括：divulollidldtddh1h2h3h4…pw3c标准盒模型：marginborderpaddingcontentIE盒模型：IE的内容部分包含边框和padding3。引入CSS的方式有哪些？链接和@import有什么区别？link和@import的区别：1）：link属于xhtml标签，@import属于css标签；2）：兼容性问题链接没有问题但是@import并不是css2.1提出的所有旧浏览器都支持，只有IE5及以上支持；3）：js可以控制DOM改变样式，只能用link，@impor不行，因为@import不支持；4):页面加载链接比@import更快，使用链接浏览器会并行下载资源，不会停止当前文档的处理。@import需要在页面完全加载后加载；4、关于CSSspecificityCSS的特殊性特征或非凡性，是衡量CSS值优先级的标准。既然是标准，就有一套相关的判断规则和计算方法。Specificity用一个四位数的数字串来表示（CSS2是三位数），更像是四个等级！重要>inline(1000)>id(0100)>class(0010)>tag(0001)ps:inlineeg:

5.前端页面的三层是什么，分别是什么？作用是什么？网页分为三个层次，即：结构层、表现层和行为层。网页的结构层是由HTML或XHTML等标记语言创建的。标签，即出现在尖括号中的词，描述网页内容的语义，但这些标签不包含任何有关如何显示所讨论内容的信息。例如，P标签表达的语义是：“这是一个文本段落”。网页的表现层是由CSS创建的。CSS回答了如何显示相关内容的问题。网页的行为层负责回答内容应该如何响应事件的问题。这是Javascript语言和DOM占主导地位的领域。w3c-->1994年成立万维网联盟制定结构+性能标准ECMA-->欧洲计算机制造商协会制定行为标准6.css兼容性问题（都是IE的错，淘宝不兼容IE8，我只想tosayNiceJob)1):这是ie6中doublemargin的问题。在使用float的情况下，无论左还是右，都会出现double。最简单的解决方案是添加display:_inline;到CSS。也兼容IE6,7,8,9csswriting.bb{background-color:#f1ee18;/*全部识别*/.background-color:#00deff\9;/*IE6,7,8识别*/+background-color:#a200ff;/*IE6,7识别*/_background-color:#1e0bd1;/*IE6识别*/}.2）：文字本身的大小不兼容。同样的font-size：14px宋体文字，不同浏览器占用的空间不一样，ie下实际高度为16px，底部留空3px，ff下实际占用17px，处留空1px顶部，底部留白1px3px，在opera下更不一样。解决方案：将行高设置为文本。确保所有文本都有默认的行高值。这很重要，我们不能容忍1px的高度差异。3):ff下容器的高度是有限制的，即定义了容器高度后，容器边框的形状就确定了，不会被内容拉伸，而underie会被内容拉伸内容和高度限制将无效。所以不要轻易为容器定义高度。4):还讨论了内容水平打破容器的问题。如果float容器没有定义宽度，ff下的内容会尽可能的扩大容器的宽度，ie下的内容会优先包裹内容。因此，内容可能爆裂的浮动容器需要定义宽度。5）：清浮，ff下无法清浮，清浮方法，常用清浮：.clearfix:after{clear:both;内容：'。';显示：块；可见性：隐藏；高度：0；}6):mirrormarginbug，当外层元素内部有float元素时，如果外层元素定义了margin-top:14px，会自动生成margin-bottom:14px。padding也有类似的问题，是ie6下的特产。这类bug的发生比较复杂，远不是唯一的发生条件，也没有系统梳理。解决方案：在外部元素上设置边框或浮动。7）：吞咽现象，限于篇幅，就不展开了。还是在ie6中，顶部和底部有两个div。上面的div设置了背景，但是发现没有背景的下面的div也有背景。这就是吞咽现象。与上面的吞底现象相对应的，还有画卷下边框缺失的现象。解决方案：使用缩放：1。这个zoom好像是专门为了解决ie6的bug而生的。8）：评论也会出bug~~~“多出一头猪”。这是前辈们用来总结这个bug的文案。在ie6的这个bug下，你会看到pig这个词在页面出现了两次，重复内容的多少随着注释的多少而变化。解决办法：用“picRotatestart”方法写注释。9):

里加float

，这是一个典型的比较难的兼容性问题，希望大家注意，li的不同属性会有不同的解释效果，ff下的解释略懂，ie6下的解释看得你摸不着头脑。由于问题的复杂性，将另起一篇文章专门讨论这个问题。《ul使用心得》一文中有相关结果，但没有给出解题过程。10):img下的空白区域。解决方案：为img设置display:block。11):丢失行高。text

，遗憾的是，单行文字line-height效果在ie6下消失了。..，原因是inline-block元素是和inline元素一起写的。解决办法：让img和text都浮动。12):链接的悬停状态。a:hoverimg{width:300px}我们希望链接中包含的图像的宽度在鼠标悬停时发生变化。可惜在ie6下无效，在ie7和ff下有效。13):非联动悬停状态。div:hover{}的样式是ie6不识别的，只在ie7和ff下有效。14):overflow:hiddenunderie对其下的absolutelayerposition:absolute或relativelayerposition:relative无效。解决方法：给overflow:hidden加上position:relative或position:absolute。另外ie6支持overflow-x或者overflow-y特性，而ie7和ff不支持。15):ie6下严重bug，如果float元素没有定义宽度，如果里面有div定义了高度或者zoom:1，div会占满整行，即使你给了宽度。如果浮动元素用作布局或复杂容器，则必须给出宽度。16):ie6下的bug，绝对定位div包含相对定位div，如果给内层相对定位div高度指定具体值，内层相对层的宽度值为100%，外层绝对层将舒展。解决方法是给内层一个相对于层的浮动属性。17):ie6下的Bug，当中有时，无法选中position:relative层下float层的文字。18）：终于来了ff的一个缺点。width:100%在ie中使用很方便，会逐层搜索width值，忽略浮层的影响，在ff下搜索到浮层末尾，所以只加width:100就可以了%到中间的所有浮层就这样了，累死了。Opera吸取了这一点并效仿了IE。19):默认情况下，Chrome中文界面会强制小于12px的文字以12px显示，可以通过添加CSS属性-webkit-text-size-adjust:none来实现；20):超链接被访问后，hover样式不会出现，会被点击被访问的超链接样式不再有hover和active解决方法是改变CSS属性的顺序：L-V-H-A:a:link（不是visited){}a:visited（已访问）{}a:hover{}a:active{}8.如何让浮动元素居中？div{位置：相对/绝对；边距：-150px00-250px；左：50%；顶部：50%；宽度：500px；高度：300px；}9.清晰浏览设备默认样式-->网上的reset.css大多是10，如果父子框有透明度，则透明度值乘以2。2.JS兼容性1.获取外部属性1>兼容性问题getComputedStyle(label)["attribute"]//Firefox,Google,Safari都可以，IE不支持box.currentStyle["attribute"]//IE支持2>SolutionfunctiongetStyle(elem,property){//判断浏览器中是否存在currentStyle方法，存在则使用IE浏览器获取，否则使用其他浏览器获取。返回elem.currentStyle？elem.currentStyle[属性]:getComputedStyle(elem)[属性];}2。事件参数1>兼容性问题even//IE不兼容window.event//IE识别2>解决方案vare=even||窗口事件；3.清除Event冒泡1>兼容性问题e.cancelBubble();//IEe.stopPropagation();//存在低版本IE兼容问题。其他浏览器支持它。2>解决window.event?e.cancelBubble=true:e.stopPropagation();//通过window.event判断当前浏览器是否为IE4。获取事件中的当前对象1>兼容性问题e.srcElement//IEe.target//IE不兼容（这里的IE也不兼容）2>解决window.event?e.srcElement:e.target;5、兼容性问题（cookie）IEFirefox支持本地缓存；Google不支持本地缓存，只支持服务器缓存；6.兼容性问题（添加监听器）addEventListener()（IE8及以下不支持）；7.防止浏览器默认行为preventDefault();//w3c防止浏览器默认行为window.event.returnValue=true;//IE的阻止浏览器默认行为；如果（e.preventDefault）{e.preventDefault（）;}else{e.returnValue=false;}9.获取浏览器滚动高度varscroll=document.body.scrollTop||document.documentElement.scrollTop;