css之坑

1、background-size要放在background后边才会生效。

2、隐藏滚动条,内容可以滑动

body::-webkit-scrollbar {
  display: none
 /* 隐藏滚动条,但依旧具备可以滚动的功能 */
}

3、导航栏固定

position: fixed;
top:0px;//bottom: 0;//固定在底部

在中间部分相对定位,就不会消失  

4、rem 是相对于根元素计算的,rem值=当前px除以根元素。如:根元素为16px,需要一个18px的字体,只要18/16=1.125rem.

  

(function () {
      var t;
      function initHtmlFont(){
          var maxWidth = 640;
          var html = document.documentElement;
          var windowWidth = html.clientWidth;
            var windowWidth = html.clientWidth>maxWidth?maxWidth:html.clientWidth;

          html.style.fontSize?=?(windowWidth/640)*200+‘px‘;
      }
      window.onresize = function(){
        clearTimeout(t);
        t = setTimeout(initHtmlFont,250);
      }
      document.addEventListener(‘DOMContentLoaded‘, function () {
        initHtmlFont();
      }, false);
    })();

  

时间: 2024-10-28 20:32:07

css之坑的相关文章

css 填坑常用代码分享

以下是常用的代码收集,没有任何技术含量,只是填坑的积累.转载请注明出处,谢谢. /*强制不换行*/ white-space:nowrap; /*自动换行*/ word-wrap: break-word; word-break: normal; /*强制英文单词断行*/ word-break:break-all; 2. 两端对齐 text-align:justify;text-justify:inter-ideogra 3. 去掉Webkit(chrome)浏览器中input(文本框)或texta

css 填坑常用代码分享[居家实用型]

原文地址 http://www.cnblogs.com/jikey/p/4233003.html 以下是常用的代码收集,没有任何技术含量,只是填坑的积累.转载请注明出处,谢谢. 一. css 2.x code 1. 文字换行 /*强制不换行*/ white-space:nowrap; /*自动换行*/ word-wrap: break-word; word-break: normal; /*强制英文单词断行*/ word-break:break-all; 2. 两端对齐 text-align:j

【转】 css 填坑常用代码分享

原文来自:http://www.cnblogs.com/jikey/p/4233003.html 一. css 2.x code 1. 文字换行 /*强制不换行*/ white-space:nowrap; /*自动换行*/ word-wrap: break-word; word-break: normal; /*强制英文单词断行*/ word-break:break-all; 2. 两端对齐 text-align:justify;text-justify:inter-ideogra 3. 去掉W

Css 踩坑集锦

//  No :1 优先级:id>class>标签 引用样式表的优先级:行内>内嵌>外部引用 行内id>嵌入id>外部id> 并集选择器用 , 后代选择器用 " "[空格] 子选择器用 ">" 只管子集标签 交集选择器 不加符号 选择器作用:选取页面元素 [页面对象][标签]页面元素:页面的html [class] 全部class类选择 [class^='s'] 类名第一个字符有s的 class$='s' 最后一个字符

css 小坑

1.display:inline-block 内容上下移动 原因:inline-block 默认对齐方式是底部对齐 方法:加一个 vertical-align:top; 属性 把垂直对齐方式改为顶部 原文地址:https://www.cnblogs.com/gemeiyi/p/10224373.html

热点收藏(1.19-1.25 )

· 关于大型网站技术演进的思考(一)--存储的瓶颈(上)(夏天的森林)· 微软发布Windows 10:连Windows 7都能免费升级了(葡萄城控件技术团队)· 浅谈移动前端的最佳实践(叶小钗)· 升级 Visual Studio 2015 CTP 5 的坑.坑.坑(田园里的蟋蟀)· Magicodes.NET框架之路——让Magicodes.NET帮你编写代码(雪雁)· CodeFirst写界面——自己写客户端UI库(liulun)· ASP.Net请求处理机制初步探索之旅 - Part 5

上周热点回顾(1.19-1.25)

热点随笔: · 关于大型网站技术演进的思考(一)--存储的瓶颈(上)(夏天的森林)· 微软发布Windows 10:连Windows 7都能免费升级了(葡萄城控件技术团队)· 浅谈移动前端的最佳实践(叶小钗)· 升级 Visual Studio 2015 CTP 5 的坑.坑.坑(田园里的蟋蟀)· Magicodes.NET框架之路——让Magicodes.NET帮你编写代码(雪雁)· CodeFirst写界面——自己写客户端UI库(liulun)· ASP.Net请求处理机制初步探索之旅 -

前端笔记精彩博文周刊20150118期

下面是本期前端周刊了,欢迎关注我们的微博 @前端笔记网 或者我们的微信公众号 w3cmark_com. [行业资讯] 1.[用点]单身狗只能学学杜蕾斯的文案?还能买个安全套来照明呢 杜蕾斯的文案在2014年引发了一波又一波病毒式传播,几乎已经让“安全套”这个词不再敏感. 2.风口还是悬崖?互联网金融六模式在2015 如果说2013年底的时候仍然有很多企业和资本没有意识到这个风口,在刚刚过去的2014年可真是火力全开玩命投入.同时,在2014年第三季度,互联网金融的标杆产品余额宝第一次出现规模下降

内层div/table的margin-top影响外层div

.inner-table { tbody{ tr:nth-child(odd) { background-color: #ffffff; } tr:nth-child(even) { background-color: #f9f9f9; } } margin: 20 auto; width:90%; } div.mini-table{ background-color:#ebf5fd; /*overflow:hidden; 可以避免外边距合并但影响箭头显示*/ position:relative