问:为什么在网页中很少用*{padding:0px;margin:0px:}去更改浏览器的默认样式? a .在一个网站中,通配符(*)匹配所有的元素 ,它会把所有的标签都遍历一遍。 当网站比较较大时,样式就会比较多,会使网站加载的时候需要很长一段时间(耗时) 。 在这个时候使用分组选择器(用逗号隔开) 比较好。 详见:http://jingyan.baidu.com/article/597a0643612768312b52433e.html 问 : 目前有那么多css选择器,请问怎样使用这些选择器最好? css选择器的性能损耗因素:浏览器匹配选择器和文档元素时所消耗的时间 css选择器匹配机制,如子选择器规则: #header > a {font-weight:blod;} 注意:CSS选择器是从右到左进行规则匹配 例子中看似高效的选择器在实际中的匹配开销是很高的。 如果把例子的子选择器改为后代选择器则会开销更多, 在遍历页面中所有 a 元素后还需向其上级遍历直到根节点。 #header a {font-weight:blod;} 理解了CSS选择器从右到左匹配的机制后, 样式系统就会继续向左移动,直到找到和规则匹配的选择符, 或者因为不匹配而退出。我们把最右边选择符称之为关键选择器。 如何减少 CSS 选择器性能损耗? 下面对 CSS 选择器的执行效率 从高到低做了一个排序: 1.id选择器(#myid) 2.类选择器(.myclassname) 3.标签选择器(div,h1,p) 4.相邻选择器(h1+p) 5.父子选择器(ul > li) 6.后代选择器(li a) 7.通配符选择器(*) 8.属性选择器(a[rel=”external”]) 9.伪类选择器(a:hover, li:nth-child) 根据以上「选择器匹配」与「选择器执行效率」原则, 我们可以通过避免不恰当的使用,提升 CSS 选择器性能。 1.避免使用通用选择器 .content * {color: red;} 浏览器匹配文档中所有的元素后分别向上逐级匹配 class 为 content 的元素,直到文档的根节点。因此其匹配开销是非 常大的,所以应避免使用关键选择器是通配选择器的情况。 2.避免使用标签或 class 选择器限制 id 选择器 img #ig{color:red;} .tup #ig{color:red;} 注意:CSS选择器是从右到左进行规则匹配 3.避免使用标签限制 class 选择器 img .ig{color:red;} 按照优先级来(id>类>标签) 4.避免使用多层标签选择器。使用 class 选择器替换,减少css查找 5.避免使用父子选择器 div>p{color:red;} 6.使用继承 思考:对于「淘宝」,每个页面的 DOM 元素超过1000个以上的 网站来说,通过限制 CSS 选择器,改善性能是具有实际意义的。 但对于普通网站,我更倾向于保证「语义化」和「可维护性」的 前提下,提升 CSS 选择器性能。 3.问: padding和margin有什么不同? padding没有auto值,padding没有负值。 margin有auto值,margin有负值。 某些相邻的margin会发生合并,我们称之为margin折叠: 示例:
h2{margin:10px 0;}
div{margin:20px 0;}
......
<h2 > 这是一个标题</h2 >
<div >
<h2 > 这是又一个标题</h2 >
</div >
本例中,第一个h2的margin-bottom(10px), div的margin-top(20px),第二个h2的margin-top(10px) 将被合并,它们之间的margin间隙最后是(20px), 即取三者之间最大的那个值。 如果给上例中的div加上border的话: 示例:
h2{margin:10px 0;}
div{margin:20px 0;border:1px solid #aaa;}
......
<h2 > 这是一个标题</h2 >
<div >
<h2 > 这是又一个标题</h2 >
</div >
本例中,第一个h2的margin-bottom(10px), div的margin-top(20px)将被合并, 但第二个h2的margin-top不与它们合并, 因为它被border分隔,不与它们相邻。 注意:如果给h2的父元素(div)设置边框的话,再给h2设置margin 这时margin就相对于边框,而不是相对于div的兄弟元素h2。 margin折叠常规认知: a .margin折叠只发生在块级元素上; b .浮动元素的margin不与任何margin发生折叠; c .设置了属性overflow且值不为visible的块级元素, 将不与它的子元素发生margin折叠; d .绝对定位元素的margin不与任何margin发生折叠; e .根元素的margin不与其它任何margin发生折叠; 问:动态网页和静态网页的区别?: a . 动态网页的数据是存放在数据库的; b .和数据库交互,和服务器交互; 问:js写在body最后面好吗?
它的执行顺序是先执行body里面的内容,然后调用函数,再执行函数里面的内容。
<script >
function mengdi () {
var box=document.getElementById("meng" );
box.style.display="none" ;}
</script >
</head >
<body
<p id ="meng" > gdhsdh</p >
<input type ="button" onclick ="mengdi ()" value ="提交啊" />
</body >
下面的执行顺序是从上往下,display默认属性是none;
</head >
<body
<p id ="meng" > gdhsdh</p >
<input type ="button" onclick ="mengdi ()" value ="提交啊" />
<script >
function mengdi () {
var box=document.getElementById("meng" );
box.style.display="none" ;}
</script >
</body >
下面的加载顺序从上到下,导致display未被定义就是用DOM display属性
<body >
<script >
var box=document.getElementById("meng" );
box.style.display="none" ;
</script >
<p id ="meng" > gdhsdh</p >
</body >