zoukankan      html  css  js  c++  java
  • css优化

    >>.li设置了display:inline-block,会有空隙,可在父元素ul下设置font-size:0

    >>.ie下不支持margin:0 auto;

    >>.hide() 和.css("display","none")有什么区别?

      ——目前理解,.hide()可以加时间

      网络上有提及visibility:hidden,说这个是相当于透明的效果,高度什么的属性还是在的,还是有占位的,恩先上班
    ---------------------------------------------------------------

    >>默认的样式表

      每种浏览器都有一套默认的样式表,即user agent stylesheet,在写网页时,没有指定的样式,则按浏览器内置的样式表来渲染。

      *FF下的浏览器默认样式可以通过:resource://gre-resources/html.css来查看。

      所以网上有各种reset.css资源,重新定义标签样式,“覆盖”浏览器的CSS默认属性
    ---------------------------------------------------------------

    >>关于CSS的命名

        如果单纯的ul与.test PK,还真拿不定谁的渲染速度更快些。但是,一旦牵扯到层级与标签,100%确定,.test这种最直接的命名方式渲染效率是最高的。要知道,CSS渲染元素和使用JavaScript获取页面元素那是完全不一样的。如果是使用JavaScript获取DOM元素,则#test ul{}速度是最快的,先id获取,再tag获取,这些可都是JavaScript内置的方法。但是,因为CSS的渲染方式是“从右往左”渲染的,就拿#test ul{}举例,先渲染页面上所有的ul标签,再去寻找id为test的元素

    CSS命名,只要出现了层级,出现了标签,就是一次额外的渲染,层级越多,渲染的开销也就越大,这就是为什么一些前辈的文章会建议要尽量避免过深的层级。这也是为什么要“无层级”,“无标签”。

    对于原则第一条“无ID”,其实与性能没有多大关系,只是一般ID都与JavaScript有奸情,如果再牵扯到CSS样式,如此复杂的三角关系,日后不好处理啊。

    border:0这种属性,仍然会渲染边框样式。所以正确的写法应该是:border:none,避免无意义的渲染;能用.div 的,就尽量不要用.nav ul li a .div 这样的写法。

    ---------------------------------------------------------------

    对于body,p,h1~6这些标签,本身的padding值就是0,所以只需要margin:0就可以了

    因为ul,ol还要独立设置list-style样式,而常用的标签ul,ol列表元素有默认的padding值,所以较为高效的写法应该是:

    body,p,h1,h2,h3,h4,h5,h6{margin:0;}
    ul,ol{list-style:none; margin:0; padding:0;}

    ---------------------------------------------------------------

    推荐博客http://www.zhangxinxu.com/,不懂这算不算友情链接要不要经过博主旭哥同意不管了他写的博客就是好技术就是棒就想推荐旭哥看到要是不高兴了快来联系我丫高兴了更要联系我丫

  • 相关阅读:
    spring源码解析-ApplicationContext解析
    分布式系统的CAP理论
    Java常用设计模式详解1--单例模式
    mysql全方位知识大盘点
    重磅!微软发布 Visual Studio Online:Web 版 VS Code + 云开发环境
    知否知否,VS Code 不止开源
    webpack静态资源拷贝插件
    webpack 清理旧打包资源插件
    webpack 配置分离css插件
    webpack打包指定HTML的文件并引入指定的chunks
  • 原文地址:https://www.cnblogs.com/yumeixin/p/4914933.html
Copyright © 2011-2022 走看看