我问你答（1）

最新推荐文章于 2021-10-08 09:23:00 发布

qingchurenxiaoyao

最新推荐文章于 2021-10-08 09:23:00 发布

阅读量250

点赞数

文章标签：我问你答

本文链接：https://blog.csdn.net/qingchurenxiaoyao/article/details/77102596

版权

问：为什么在网页中很少用*{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>

qingchurenxiaoyao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
我问你答（1）

问：为什么在网页中很少用*{padding:0px;margin:0px:}去更改浏览器的默认样式？ a .在一个网站中，通配符(*)匹配所有的元素，它会把所有的标签都遍历一遍。当网站比较较大时，样式就会比较多，会使网站加载的时候需要很长一段时间(耗时)。在这个时候使用分组选择器(用逗号隔开)比较好。详见：http://jingyan.baidu.com/article/597a064
复制链接

扫一扫