CSS中的position:relative是相对于父级元素还是相对于同一级元素?_百度知道
CSS中的position:relative是相对于父级元素还是相对于同一级元素?
如题.可能是我笨,在dreamweaver试了几次还不能确定.
这样你便可以看到一个200*50的容器里面一直会包含着一个距离顶部和左部10像素的小容器:10&&quot。层次结构就是:50/div style=&quot：绝对容器的外部要有个相对容器。自己多动手;display。当然绝对定位不建议不用:50px，二是会导致浏览器崩溃;div&gt，等别人揭晓答案;
&span style=&width，一个相对容器可以包含很多绝对容器:#EEE;background，那不是搞技术该做的:200 height:10px，一是多了会结构混乱:50height:#999999&width:&&gt:absolute：&top，出的结果最真实举个实例吧:block
其他类似问题
为您推荐：
relative的相关知识
其他2条回答
拿页面上百度的logo图片打比方;那么它的位置将位于;top相对元素自己本来没加这个属性时的位置，即:relative：x横向9厘米。那么 position，你就看本页。假设你给logo图片的css加上下面属性; left，而不是相对父级或其他同级元素。你这样理解，y竖向离浏览器顶部5厘米的地方:1cm:4cm，离y竖向约1厘米的地方，百度搜索框框前面有百度的Logo标志：position:relative 相对的就是这个x=8cm y=1cm这个坐标，我目测了下，现在百度logo图片大概在页面距离0坐标原点的x横向约8厘米的地方：浏览器显示网页区左上角原点为0坐标原点
相对于父级元素&div style=&position:&&
&div style=&position:&&子元素 &/div&&/div&一般是这样用的，这样用能解决很多兼容性
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁前端应聘者看过来，近一个星期面试总结
作为要找工作的16届本科毕业生，上周才开始找工作是不是太迟了点。虽然只有一个星期但是我还是拿到了一些offer，也有自己比较心仪的公司，过两天就签了，把这些天找工作整理的面试题给大家贴一下。关于那些现场面试官出的一些灵活点的题我就不贴了，反正那些就是考你平时的积累，你要是想到了就加分了，没想到就把基础问题好好答出来吧。下面这些面试题有些我自己整理了一些答案，按照我的风格来的，可能不是很完整，因为我不喜欢记太多东西，大家将就着看吧，祝大家有个好前程咯~~====各个浏览器中css表现的差异性(浏览器兼容问题)：& & (/group/topic/4629864/)& & (http://blog.csdn.net/chuyuqing/article/details/)& & (http://www.iefans.net/ie-9-css-bug/)& & 1,各浏览器下，margin与padding显示差异& && &==解决办法:CSS reset& & 2,block+float+水平margin,IE6里的间距比超过设置的间距(横向布局)& && &==解决办法:diaplay:inline& && &(不用担心内联元素无宽高，因为float会让inline元素haslayout,让inline元素表现的和inline-block元素一样有宽高和垂直内外边距)& && &[我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题]& & 3,inline+(display:block)+float+水平margin,IE6里的间距比超过设置的间距& && &说明:该情况与上面的差不多,只是此处的元素一开始是内联元素,加了display:block的CSS属性.因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe& && &==解决办法:display:display:& & 4,IE6对margin:0不会正确的进行解析& && &解决办法：& && && &在父元素中使用text-align:center,在元件中使用text-align:left& & 5,无法设置微高(一般小于10px)：& && &说明:当设置元素高度小于10px时，IE6和IE7不受控制，超出设置的高度& && &产生原因:IE不允许原件的高度小于字体的高度& && &解决办法1:设置字体大小:font-size:0;& && &解决办法2:给超出高度的标签设置overflow:hidden& && &解决办法3:设置行高line-height小于你设置的高度& & 6,子元件撑破父元件& && &原因:父元件设置了overflow:auto属性,子元件会从父元件中撑破出来& && &解决办法:父元件中设置position:& & 7,IE无法解析min-height和min-width& && &解决办法1:& && &selector{& && &&&min-height:150& && &&&height:auto !& && &&&height:150& && &}& && &解决办法2：& && &selector{& && &&&min-height:150& && &&&height:150& && &}& && &heml&body selector{& && &&&height:& && &}& & 8,使用ul li时,li与li之间会空行& && &解决办法1:设置li selector{height:**}& && &解决办法2:li selector{float:clear:}& && &解决办法3:li{display:inline}====CSS hack:& & +:IE6,IE7& & _:IE6& & \9:IE6,IE7,IE8& & \0:IE8,IE9& & \9\0:IE9& & !important:All(IE6是有条件的支持)====常用的CSS reset:& & (/css-reset-collection.html)& & margin:0;& & padding:0;& & border:0;& & ...& & & & ====盒子模型& & padding,border,margin,& & 标准盒模型与IE盒模型：& && & 前者：width设置针对content& && & 后者:width针对border+padding+content& & 对于盒子的选择：& && & 需要依靠最上面的Doctype来看,如果没有声明Doctype,则按照浏览器会根据自己的行为去理解网页;声明后各浏览器会按照W3C标准去解释你的盒子,网页就能在各个浏览器中显示一致了====性能优化的几个原则:& && &1,尽量减少http请求:& && &&&改善响应时间的最简单途径就是减少组件的数量，并由此减少HTTP请求的数量:& && &&&(1)将多个图片合并到一张单独的图片& && &&&(2)JS、CSS文件合并& && &2,使用内容发布网络(CDN的使用)：& && &&&是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容;& && &&&主要用于发布页面静态资源：图片、css文件、js文件等。如此，能轻易地提高响应速度.& && &3,添加Expires头& && &4,将CSS样式表放在顶部& && &5,将javascript脚本放在底部& && &6,避免使用CSS表达式& && &7,使用外部javascript和CSS& && &8,减少DNS查询& && &9,精简javascript& && &10,避免重定向& && &11,删除重复脚本& && &12,配置ETag& && &13,使Ajax可缓存& && &14,避免使用CSS表达式====JS的数据类型(.cn/s/blog_6fd4b3c10101d0va.html)& && && &基本数据类型(5)：string，number，null，undefined，boolean& && && &引用类型：object，array，function；& && && &数据类型& && && && &&&typeof& && && &&&string& && && && & string& && && &&&number& && && && &&&number& && && &&&boolean& && && && &boolean& && && &undefined& && && &&&undefined& && && &&&null& && && && && & object& && && &&&object& && && && &&&object& && && &&&array& && && && && &object& && && & function& && && && & function& && && & (NaN)& && && && && & (number)& && && & (Error)& && && && &&&(Function)& & 区分基本数据类型：& & 区分引用数据类型：instanceof（instanceof还可以检测到具体的是什么实例，可以检测是否是正则表达式）& & & && && && && &eg:[1,2,3,4] instanceof A& &&&//true& & & & & & & && && && && & \d{3} instanceof RegE& &&&//true& &区分各数据类型：& & & && &&&Object.prototype.toString.call(val).slice(8,-1)；& & & && && && &eg:Object.prototype.toString.call([1,2,3]).slice(8,-1); //Array& && && && &&&obj instanceof typeN& & & && && && &eg:[1,2,3] instanceof A& &&&//true& && && && &&&obj.constructor.toString().indexof(typeName);& & & && && && &eg:[1,2,3].constructor.toString().indexof(&Array&);& & & && && && &&&//9(只要值不为-1,即为typeName类型)====会不会SEO(搜索引擎优化)& & 1,站内优化& & 使得网站在搜索引擎上的友好度和站内用户的良好体验度上升& & 让网站在搜索引擎的排名靠前并且得到很好的客户转换率& & 2,站外优化& & 通过SEO手段帮助网站和网站所属企业进行品牌推广====语义化的理解？& & html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；& & 在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的；& & 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO；& & 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。====html5新特性：& & 1，webStorage(sessionStorage,localStorage);& & 2，onmessage,postmessage解决跨域问题;& & 3，新的文档类型&&(New Doctype)：& && &之前的声明文档类型：&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&在H5中失效，H5只需要用& && &&!DOCTYPE html&即可完成文档声明& & 4，新增一系列语义化标签：header,footer,figure+figcaption,article,nav等& & 5，新增属性 ：& && &==占位符 (placeholder：& && &&&在HTML4或XHTML中，你需要用JavaScript来给文本框添加占位符。& && &&&比如，你可以提前设置好一些信息，当用户开始输入时，文本框中的文字就消失。而在HTML5中,新的“placeholder”就简化了这个问题；& && &==input新增属性：required(必填项);pattern(正则限定输入)；& & 6,audio(音频)与video(视频);& & 7,&script async=&async&&& && && &&&====事件模型& && &&&冒泡型事件(事件委托的原理)& && &&&捕获型事件 & && &&&====事件绑定& & (/iloveyoucc/archive//2639874.html)& & 1,绑定元素属性:事件属性名称由事件类型外加一个on前缀构成& && &eg:&input type=&button& name=&myButton& onClick=&myFunc()&&& && &可以支持开发者把参数传递给事件处理器函数& & 2,绑定对象属性:& && &eg:document.forms[0].myButton.onclick = myFunc& && &没有办法向事件函数传递参数& & 3,绑定IE4+支持&script for=&id& event=&eventName&&标识& && &for属性的值必须是元素的必须把事件的名称(onmouseover，onclick等等)分配给 event属性& && &eg:&input type=&button& name=&myButton& id=&button1&&& && && &&&&script for=&button1& event=&onclick&&& && && & // script statements here & && &&&&/script&&&& && &标识中的语句可以调用页面上其它地方定义的任何函数(或者从.js文件中导入的函数)& && &这种绑定方式意味着您必须为每一个元素和每一个事件创建一个&script for event&标识& & 4,IE5+支持:elemObject.attachEvent(&eventName&, functionReference);& && &eg:document.getElementById(&&).attachEvent(&onclick&,function(){...});& && &注意:不能在元素被载入浏览器之前执行这个语句;& && && &&&该对象的引用在相应的 HTML 按键元素被浏览器创建之前，都是无效的;& && && &&&要让这样的绑定语句或者在页面的底部运行，或者在body元素的onLoad& && && &&&事件处理器调用的函数中运行& & 5,W3C DOM的addEventListener()方法& && &eg:docuemnt.getElementById(&&).addEventListener(&click&,function(){...},false);& && &第三个参数表示是否在捕获阶段进行处理& & 【注意方法4和方法5中，事件的名字:IE中要加前缀&on&,W3C不用加前缀】====jsonp&&跨域问题====如何给函数整个触发器& & setTimeout()& & setInterval()====什么情况下外边距会合并& & 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。& & 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。====正则式（http://deerchao.net/tutorials/regex/regex.htm）====如何理解bfc（/lhb25/p/inside-block-formatting-ontext.html）&&==BFC布局规则：& & & && &1，内部的Box会在垂直方向，一个接一个地放置（块级元素独占一行）& & & && &2，Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠，对于垂直box外边距合并（见上面一条），是因为这两个box属于同一个BFC。因此只要改变其中一个box的BFC即可以达到外边距不重叠的效果& &(常用的做法是:在其中一个box上套一层容器，并触发该容器生成一个BFC)& & & && &3，每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。对于一列固定另一栏浮动的两栏自适应布局，固定的一栏会覆盖到浮动的那一栏，即两栏的左边会相接触。根据第四点，可以通过触发固定列的BFC达到自适应的目的。& & & && &4，BFC的区域不会与float box重叠。& & & && &5，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。 & & & && &6，计算BFC的高度时，浮动元素也参与计算。对于父元素没有随着子元素高度的增加而增加可以触发父元素的BFC来达到自适应的目的&&==哪些元素会生成BFC?& & & && &根元素& & & && &float属性不为none& & & && &position为absolute或fixed& & & && &display为inline-block, table-cell, table-caption, flex, inline-flex& & & && &overflow不为visible(所有关于margin，双边距等bug可以用overflow:auto修复)====ajax====Http原理====状态码====http数据包====写写自己常用的CSS3特性:& & ===选择器：& && &&&==属性选择器（只有IE6不支持）& && &&&[att^=&value&]& && &&&匹配包含以特定的值开头的属性的元素& && &&&eg:div[class^=&item&]{background:}& && &&&[class以item开头的元素的background属性为yellow][att$=&value&]& && &&&匹配包含以特定的值结尾的属性的元素& && &&&[att*=&value&]& && &&&匹配包含含有特定的值的属性的元素& && &&&==连字符（所有浏览器都支持）& && &&&CSS3中唯一新引入的连字符是通用的兄弟选择器（同级）。它针对一个元素的有同一个父级节点的所有兄弟级别元素。& && &&&比如，给某个特定的div的同级的图片添加一个灰色的边框(div和图片应该有同一个父级节点)，在样式表中定义下面的样式就足够了：& && &&&div~img {& && && && && &border: 1px solid #& && && && & }& && &&&==伪类& && &&&:nth-child(n)& && &&&让你基于元素在父节点的子元素的列表位置来指定元素。你可以是用数字、数字表达式或odd 和even 关键词(对斑马样式的列表很完美)。所以如果你想匹配在第四个元素之后的一个3个元素的分组，你可以简单的这样使用：& && &&&:nth-child(3n+4) { background-color: # }& && &&&:nth-last-child(n)& && &&&与上个选择器的思想同样，但是从后面匹配元素（倒序），比如，为了指定一个div里面的最后两个段落，我们可以使用下面的选择器：& && &&&div p:nth-last-child(-n+2)& && &&&:last-child& && &&&匹配一个父节点下的最后一个子元素，等同于:nth-last-child(1)& && &&&:checked& && &&&匹配选择的元素，比如复选框& && &&&:empty& && &&&匹配空元素（没有子元素）。& && &&&:not(s)& && &&&匹配所有不符合指定声明(s)的元素。比如，如果你想让所有的没有使用”lead”类的段落的显示为黑色，可以这样写： & && &&&p:not([class*=&lead&]) { color: }& &===RGBA和透明度& &====多栏布局（火狐浏览器、谷歌浏览器，IE10+等支持）& && &使用多栏布局时只能为所有栏指定一个统一的高度，栏与栏之间的宽度不可能是不一样的，另外也不可能具体指定什么栏中显示什么内容，因此比较适合使用在显示文章内容的时候，不适合用于安排整个网页中由各元素组成的网页结构时。& && &===多栏布局第一个属性：column-count& && && &column-count属性为一个数字表示列数，不带单位，含义是将一个元素中的内容分为多栏进行显示& && && &.box {& && && & width: 600& && && & backgrond-color: #& && && & column-count: 2;& && &}& && &===多栏布局的第二个属性：column-gap& && & 使用column-gap属性来设定多栏之间的间隔距离。& && & .box {& && && & width: 600& && && & backgrond-color: #& && && & column-count: 2;& && && & column-gap: 60& && &}& & ===多栏布局第3个属性：column-rule& && &column-rule属性在栏与栏之间增加一条间隔线，并且设定该间隔线的宽度、样式、颜色，该属性的指定方法与css中的border属性指定方法相同& && &&&.box {& && && & width: 600& && && & backgrond-color: #& && && & column-count: 2;& && && & column-gap: 60& && && & column-rule: 5px dashed #000;& && &}& & ===多栏布局最后一个属性：column-width& && &column-width可以设置每一栏的宽度，但是在实际测试中发现并不像描述的那么简单，遂列举出以下几个问题：& && &在设定column-width的同时必须设置盒子的width，否则盒子宽度默认为100%，每栏宽度按照栏数平均分。& && &盒子每栏宽度必须大于等于column-width设定的值，否则就会减少栏数来增加每栏宽度，例如盒子宽度400px，一共2栏，那么每栏宽度就是200px，如果设置column-width: 210px的话盒子就会变成1栏以保证每栏宽度大于等于column-width:210，但是如果每栏宽度大于column-width的值时每栏宽度也不会强制等于column-width，这么看column-width的个性有点像min-width。& & 【CSS3规范里描述的是，各列的高度是均衡的，浏览器会自动调整每列里填充多少文本、均分文本，来使各列的高度保持均衡一致】&&===多背景图&&===Word Wrap:normal|break-word& &&&(/css3/properties/text/word-wrap.html)& &&&对于文字过长会导致文字撑破容器出来;& &&&使用CSS3属性:& && &&&word-wrap:break-内容将在边界内换行,如果需要,单词内部允许断行.& && &&&word-wrap:内容将会撑破容器盒子&&===文字阴影&&===@font-face属性&&===圆角(边框半径)&&===边框图片&&===盒阴影&&===盒子大小&&===媒体查询&&===语音====弹性盒子模型：box-flex& & CSS3中新的盒子模型——弹性盒子模型(Flexible Box Model)：& & ==box-flex属性(很适用于流体布局),用来按比例分配父标签的宽度或高度空间& && &eg: #one{box-flex:2;}& && && & #two{box-flex:1;}& && && & #three{box-flex:1;}& && &表示id分别为one，two，three的元素把父标签按照2:1:1的比例分割;& & ==父标签需要声明为& && && &father{display:}& && && &father{display:inline-}& && && &【注意:目前而言,仅Firefox/Chrome/Safari浏览器支持弹性盒子模型(IE9不详,Opera尚未),且使用的时候，需要附带私有前缀。就是诸如-moz-, -webkit-前缀】& & ==当子元素中有宽度值的时候，此元素就定宽处理，剩下的空间再按比例分配& && &eg：#one{box-flex:2;}& && && & #two{box-flex:1;}& && && & #three{width:200}& && &three宽度为200像素，one和two把剩下的空间按2:1分& & ==弹性盒子模型下的爸爸(父标签)其实是很有货的。爸爸肚子中的货有：box-orient, box-direction, box-align, box-pack, box-lines. 现在依次讲讲这里box打头的属性都是干嘛用的。& && &&&===box-orient用来确定子元素的方向。是横着排还是竖着走：& && && & inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的，让子元素横排；而vertical与block-axis的表现也是一致的，让元素纵列& & =====子元素除了box-flex属性，还有两个属性，box-flex-group和box-ordinal-group，其中box-flex-group的作用不详，貌似目前浏览器也不支持；box-ordinal-group的作用是拉帮结派。数值越小，位置就越靠前，这不难理解，第一组在最前嘛，随后第二组，第三组… & & 例如：box-ordinal-group:1的组就会在box-ordinal-group:2的组前面显示。于是，我们可以利用这个属性改变子元素的顺序。& & 常见浏览器CSS前缀：& & =====Webkit核心浏览器的(比如, Safari)， 它们以-webkit-开始，以及Gecko核心的浏览器(比如, Firefox)，以-moz-开始，还有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它们自己的属性扩展（目前只有IE8支持-ms-前缀）====设计圆角& & border-radius:====客户端存储：& & localStorage();& & sessionStorage()====css选择器权重:&&style:1000;&&ID:100;&&class:10;&&tagName:1;&&子选择器(&)全部选择(*):0;&&[后面的这些权值只是定的一个相对参考，并不是具体的值]====link和@import的区别：& & 页面中使用CSS的方式主要有3种：& && && &1，行内添加定义style属性值& && && &2，页面头部内嵌调用& && && &3，外面链接调用其中外面引用有两种：link和@import& & 区别：& && &&&1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；& && && &&&@import属于CSS范畴，只能加载CSS。& && &&&2：link引用CSS时，在页面载入时同时加载；& && && &&&@import需要页面网页完全载入以后加载。& && &&&3：link是XHTML标签，无兼容问题；& && && &&&@import是在CSS2.1提出的，低版本的浏览器不支持。& && &&&4：ink支持使用Javascript控制DOM去改变样式；& && && &&&而@import不支持。====继承的几种方式：& &&&1，构造函数& &&&2，原型链====数据传递的几种方式：& & get,post,本地存储(localStorage)& & [面试官问我，除了get和post方法还有什么别的方法？我想了半天，面试官说，本地存储啊~~(就是localStorage),其实我想说PUT,HEAD来着@_@]====webSocket:& & [/wei2yi/archive//1992830.html]& & 是下一代客户端-服务器的异步通信方法，该通信取代了单个的TCP套接字，使用ws或wss协议，可用于任意的客户端和服务器程序;而且有一个优秀的第三方API，名为Socket.IO& & 服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息;& & 与ajax的区别:& & WebSocket并不限于以Ajax(或XHR)方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允许跨域通信& & // 创建一个Socket实例& & var socket = new WebSocket('ws://localhost:8080'); //ws表示socket协议& & // 打开Socket & & socket.onopen = function(event) { & && &// 发送一个初始化消息& && &&&socket.send('I am the client and I\'m listening!'); & && &// 监听消息& && &&&socket.onmessage = function(event) { & && && & console.log('Client received a message',event); & && &&&}; & && &// 监听Socket的关闭& && &&&socket.onclose = function(event) { & && && & console.log('Client notified socket has closed',event); & && &&&}; & && &// 关闭Socket.... & && &socket.close() &&};====不用angularJS，如何实现双向数据绑定& & ajax：异步数据传输？====响应式布局：弹性盒子/媒体查询====如何获取浏览器信息：& & Navigator 对象包含有关浏览器的信息。Navigator 对象属性：属性& && && && && && && &&&描述& && && && && & IE& & F& & OappCodeName& && && && &返回浏览器的代码名。& &&&4& & 1& & 9appMinorVersion& && & 返回浏览器的次级版本。& & 4& & No& &NoappName& && && && && &返回浏览器的名称。& && &&&4& & 1& & 9appVersion& && && &返回浏览器的平台和版本信息。 4& & 1& & 9browserLanguage& && & 返回当前浏览器的语言。& & 4& & No& &9cookieEnabled& && &返回指明浏览器中是否启用& && && && && && && &cookie 的布尔值。& && && & 4& & 1& &9cpuClass& && && &&&返回浏览器系统的 CPU 等级。&&4& & No&&NoonLine& && && &&&返回指明系统是否处于脱机模式的布尔值。 & && && && && && && && && && && && && && && && &4& & No&&Noplatform& && && & 返回运行浏览器的操作系统平台。4& &&&1& &9systemLanguage& && &&&返回 OS 使用的默认语言。&&4& &&&No&&NouserAgent& && && &&&返回由客户机发送服务器的 & && && && && && &&&user-agent 头部的值。& && & 4& &&&1& & 9userLanguage& && && & 返回 OS 的自然语言设置。&&4& &&&No&&9====数组操作：&&===toString(param):& & ==null和undefined没有toString()方法& &&&把null或undefined变成字符串的方法：null+''或者String(null);& &&&直接用(null).toString()会报错。& & ==param& & 是可选的，当需要把数值型数据转换成相应的进制数时，param可以进行设置；eg:把十进制8转换成二进制：(8).toString(2);//&1000&;& & 此处注意：必须是是number类型，若是(&8&).toString(2);//&8&;& & ==对于浮点数& && &如果小数点后面都是0，调用toString方法会把后面的0去掉& && &(10.00).toString();//&10&;(10.01).toString();//&10.01&;& & ==对于object的toString()& && &返回&[object ObjectName]&，其中ObjectName是对象类型的名称。& & ==对于Date对象：& && &var date = new Date();& && &&&date.toString();//当前时间信息：&Mon Oct 19 :55 GMT+0800 (中国标准时间)&& & 【思考点：如何将小数点后面都为0的浮点数转化为字符串？& && &10.00+&&;//&10&(如何得到&10.00&);& && &10.00+10.00;//20(为什么不是20.00)；& && &10.01+10.00;//20.998(为什么不是20.01)& && &】& & ==String()与toString()的区别：& && &(1)null和undefined有String()转换成字符串，而toString()不能；& && &(2)toString()能设定数值数据转换的进制数，而String()不能；& && &(3)其他情况下：toString(val) === String(val)&&===join(seperator)：数组以分隔符seperator转换成字符串====原生JS对DOM操作：& & ===selector：& && &==Document对象方法：& && &&&document.getElementsByName(&&);& && &&&document.getElementsByTagName(&&);& && &&&document.getElementById(&&);& && &==querySelector()|querySelectorAll()& && & 网址:http://www.nowamagic.net/librarys/veda/detail/388& && &&&(原生写法，比jquery速度快，缺点是IE6、7不支持。)：& && &&&//接收的参数和CSS选择器接收的参数一样& && &&&baseElement.querySelector(selector);& && &&&baseElement.querySelectorAll(selector);& && &&&baseElement可以是document，也可以是DOM& && &&&eg:document.querySelectorAll(&input[type='checkbox']&);& && && &&&document.querySelector === document.querySelectorAll[0];& && &&&=注意：querySelector与querySelectorAll的区别：& && && & (1)querySelector 用来获取一个元素；& && && && & querySelectorAll 可以获取多个元素。& && && & (2)querySelector将返回匹配到的第一个元素，如果没有& && && && & 匹配的元素则返回 NullquerySelectorAll 返回一个包& && && && & 含匹配到的元素的数组，如果没有匹配的元素则返回的数组为空& && &==document对象与querySelector的区别：& && && & (1)getElement方法只能用于document,不能用于DOM,而querySelector可以& && && & (2)getElment只能根据name,id,tagName获取DOM，而querySelector不受限制& && &==关于querySelector的一些bug:& && &&&&div class= &test& id= &testId& && && && & &p&&span&Test&/span&&/p&& && &&&&/div&& && &&&&script type= &text/javascript& && & & && && & var& &testElement= document.getElementById( 'testId' ); & && && & var& &element = testElement.querySelector( '.test span' ); & && && & var& &elementList = document.querySelectorAll( '.test span' ); & && && & console.log(element);&&// &span&Test&/span&& && && & console.log(elementList);&&// 1& && && &&&&/script&& && &按照W3C的来理解，这个例子应该返回：element：null；elementList：[];因为作为baseElement的 testElement里面根本没有符合selectors的匹配子节点；但浏览器却好像无视了baseElement，只在乎selectors，也就是说此时baseElement近乎document；这和我们的预期结果不合.& && &解决办法：看网址里面的内容吧，有点看不懂的感觉====document.ready与window.onload：& & (.cn/s/blog_49fa034d01011lpc.html)& & Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。& & 1.执行时间& && &window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。& && &$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。& & 2.编写个数不同& && &window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个& && &$(document).ready()可以同时编写多个，并且都可以得到执行& & 3.简化写法& && &window.onload没有简化写法& && &$(document).ready(function(){})可以简写成$(function(){});& & 即：document.ready在window.onload前面执行====document对象：& & ==每个载入浏览器的HTML文档都会成为Document对象。& && &Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。& && &提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问[window.document可以得到文档的内容(源码)]& & ==document对象的属性：& && &document.URL:当前页面的url；& && &document.referrer:返回载入当前文档的文档的 URL；& && &&&(如果当前文档不是通过超级链接访问的，则为null，该属性允许客户端JS& && &&&访问HTTP引用头部。)& && &document.title:当前页面的title；& && &document.cookie:当前页面所有的cookie；& && &document.lastModified:当前页面最后的修改时间；& && &document.domain:当前页面的域名；====iframe、frame的缺点：====html文件的渲染过程(性能优化的依据)：& & (http://blog.csdn.net/luckygll/article/details/7432713)& & (http://my.oschina.net/u/1414906/blog/357860)& & 客户端发出请求---服务器响应将html文件返回给请求的客户端浏览器中;& & 页面开始加载;& & 加载从html标签开始;& & 加载到head标签时，如果标签内有个外部样式文件(.css)要加载;& & 客户端向服务器发出一个请求加载CSS文件，服务器响应;& & CSS加载完成后，客户端浏览器继续加载html文件里的body标签(在CSS文件加载完毕后同时渲染页面);& & 客户端在body标签发现img标签并且引用了一张图片,客户端浏览器向服务器发出一次请求,浏览器不会等到图片下载完，而是继续渲染后面的代码;& & img标签中的图片加载完了，要显示出来，而图片又要占用一定的面积，又会影响到后面的布局，浏览器不得不回来重新渲染这一部分;& & body标签里的标签加载及渲染完成后，浏览器发现script标签中的代码,浏览器需要想服务器发出请求加载js文件，服务器响应;& & 浏览器解析执行js文件时发现里面有一些对body文档结构变化的操作(隐藏某段内容等),此时浏览器又需要重新去渲染这些内容;& & 知道浏览器发现 &/html&标签;& & 等等，还没完。用户点击了一下界面中的换肤按钮,js让浏览器换了一下&link&的css标签;& & 浏览器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。& & ===reflow与repaint：& && &==reflow(回流):涉及到部分页面的布局& && & (http://www.planabc.net//reflow/)& && & 页面中向服务器请求的次数多会影响到打开速度,& && & 重新渲染局部的次数也会影响页面打开速度,对于这种来回渲染,叫做reflow,& && & 一个元素的回流导致了其所有子元素以及DOM中紧随其后的祖先元素的随后的回流,reflow几乎是无法避免的,我们不能因为害怕reflow就丢掉一些页面效果,但是reflow是可以优化的,& && & (比如图片在.css样式文件中就定义好图片的高度,这会减少页面重新渲染的次数);& && & (1)导致reflow的一些因素:& && && & 调整窗口大小;& && && & 改变字体;& && && & 增加或者移除样式表;& && && & 内容变化，比如用户在input框中输入文字;& && && & 激活CSS伪类，比如 :hover (IE 中为兄弟结点伪类的激活);& && && & 操作class属性;& && && & 脚本操作DOM;& && && & 计算offsetWidth和offsetHeight属性;& && && & 设置style属性的值;& && & (2)合理的优化:& && && & 如果想设定元素的样式，通过改变元素的class名(尽可能在DOM树的最里层);& && && && &[可以限制了回流的范围，使其影响尽可能少的节点]& && && & 避免设置多项内联样式;& && && & 应用元素的动画，使用position属性的fixed值或absolute值& && && && &[它们不影响其他元素的布局(BFC?),所它他们只会导致重新绘制,而不是一个完整回流]& && && & 权衡平滑和速度;& && && & 避免使用table布局;& && && & 避免使用CSS的JavaScript表达式(仅IE浏览器);& && &==repaint(重绘):浏览器必须验证DOM树上其他节点元素的可见性& && &&&重绘：对某个区域、对象的重新渲染表现& && &&&回流：对某个区域、对象进行重绘，根据条件影响到它的祖先对象进入重绘（并可能无限递归直到顶级祖先对象）& && &&&重绘如何出现：改变对象的形状、坐标、表现以及内容都会引发该对象被重新渲染，这种现象即为重绘。& && &&&回流如何出现：当该对象即将重绘时，浏览器会根据条件判断该对象的重绘结果是否会依赖该对象的祖先元素。如果有则将该对象祖先元素也加入本次重绘。并一直向上寻找，直到条件不匹配。此现象即为回流。& && &&&最后总结：& && && & 1、重绘可能引发回流& && && & 2、回流必定引发重绘& & ===js的阻塞特性：(解决:使用异步加载的方式:在script标签中添加async属性)& && &其中js是阻塞式的加载，浏览器在加载js时，当浏览器在执行js代码时，不会做其他的事情，即&script&的每次出现都会让页面等待脚本的解析和执行，js代码执行后，才会继续渲染页面。新一代浏览器虽然支持并行下载。但是js下载仍会阻塞其他资源的下载（比如图片）。所以应该把js放到页面的底部。& & ===js的优化：& && &1.要使用高效的选择器。& && &2.将选择器保存为局部变量& && &3.先操作再显示&&====跨域:& & 协议,域名,端口号有一个不同就被称为跨域====http与https:====prototype与__proto__& & (/snandy/archive//2664134.html)& & prototype:每一个函数对象都有一个显示的prototype属性,它代表了对象的原型& & __proto__:内部原型(IE6/7/8/9不支持),每个对象都有一个名为__proto__的内部隐藏属性，指向于它所对应的原型对象,& & IE9中可以使用Object.getPrototypeOf(obj)获取对象的内部原型;& & [原型链是基于__proto__才得以形成]& & 所有对象__proto__都指向其构造器的prototype,包括自定义的构造器& & [注意:构造器可以直接用构造器的名字,也可以用实例对象的constructor属性获得]& && &var obj = {name: 'jack'}& && &var arr = [1,2,3]& && &var reg = /hello/g& && &var date = new Date& && &var err = new Error('exception')& && &//自定义一个构造器& && &function Person(name) {& && &&&this.name = name& && &}& && &var p = new Person('jack');& && &obj.__proto__ === Object.prototype // true& && &obj.__proto__ === obj.constructor.prototype // true& && &arr.__proto__ === Array.prototype&&// true& && &reg.__proto__ === RegExp.prototype // true& && &date.__proto__ === Date.prototype&&// true& && &err.__proto__ === Error.prototype&&// true& && &p.__proto__ === Person.prototype&&// true& && &p.__proto__ === p.constructor.prototype&&// true& && &可以看到p.__proto__与Person.prototype，p.constructor.prototype都是恒等的，即都指向同一个对象。====作用域与作用域链====模块化===跳出循环体& &break:跳出最内层循环或者退出一个switch语句& &continue:跳出当前循环继续下一个循环& &return:跳出循环,即使函数主体中还有其他语句,函数执行也会停止
兼容ie5的，请举手。
真的好细致啊，学习了 //：楼主讲的很详细，个人认为现在ie678，基本可以考虑不用兼容了。。 //：问的好全面啊，作为一个应届毕业生厉害
&&&&&& //：楼主讲的很详细，个人认为现在ie678，基本可以考虑不用兼容了。。 //：问的好全面啊，作为一个应届毕业生厉害
震惊了，怎么可以这么详细
//：楼主讲的很详细，个人认为现在ie678，基本可以考虑不用兼容了。。 //：问的好全面啊，作为一个应届毕业生厉害
baseElement.querySelector(selector)；查找DOM时是从baseElement开始查，baseElement也会检查，这个不是bug //：楼主讲的很详细，个人认为现在ie678，基本可以考虑不用兼容了。。 //：问的好全面啊，作为一个应届毕业生厉害
Ie8，9目前浏览器市场占有率接近30%.。。 //：楼主讲的很详细，个人认为现在ie678，基本可以考虑不用兼容了。。 //：问的好全面啊，作为一个应届毕业生厉害
//：html文件的渲染过程 写的好详细 一看就是手打出来的 //：问的好全面啊，作为一个应届毕业生厉害
html文件的渲染过程 写的好详细 一看就是手打出来的 //：问的好全面啊，作为一个应届毕业生厉害 //：太厉害啦，你签到哪里了。。
刚毕业的都这么厉害了，nb啊 //：问的好全面啊，作为一个应届毕业生厉害 //：太厉害啦，你签到哪里了。。
对于一个2017届毕业生有什么建议吗？是做项目还是看这些零碎的知识点 //：问的好全面啊，作为一个应届毕业生厉害 //：太厉害啦，你签到哪里了。。
&& //：问的好全面啊，作为一个应届毕业生厉害 //：太厉害啦，你签到哪里了。。
好仔细&&刚出来的都好厉害啊 //：问的好全面啊，作为一个应届毕业生厉害 //：太厉害啦，你签到哪里了。。
//：问的好全面啊，作为一个应届毕业生厉害 //：太厉害啦，你签到哪里了。。
楼主讲的很详细，个人认为现在ie678，基本可以考虑不用兼容了。。 //：问的好全面啊，作为一个应届毕业生厉害 //：太厉害啦，你签到哪里了。。
也就几个月而已，只是做了几个项目，找了一份实习。学习技术最好的方法就是多看书，多实践，最好找个实习或者加个实验室 //：问的好全面啊，作为一个应届毕业生厉害 //：太厉害啦，你签到哪里了。。
4 总笔记数
1.2万 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：