• css随笔


    (前言)博客中所有关于css的语言,全部用less框架所写。

    Less 扩充了 CSS 语言,增加了诸如变量、混合(mixin)、运算、函数等。 Less 既可以运行在服务器端(Node.js 和 Rhino 平台)也可以运行在客户端(浏览器)。

    相对于css来说更加方便,并且它易学。在此给还没有用这个语言的同学们,推荐一下。

    正文

    1)当同一行有两块元素,其中一块元素的长度未知(比如:用户的input输入‘地址’),这时若用户输入的‘地址’过长,则会将同行的另一元素挤到下面一行,如何将一块未知宽度的元素和一块已知宽度的元素放在同一行?

        解决办法:给未知宽度的元素设置好长宽,超过的文字隐藏。

    1     max- 100vw - 200 * @unit;        //设置一个最大宽度,宽度为这个块元素的本身应有的长度;
    2 
    3     overflow: hidden;                               //若内容超过最大宽度,则超出部分隐藏;
    4 
    5     white-space: nowrap;                         //段落中的文本不能换行;
    6 
    7     text-overflow: ellipsis;                       //超出部分用省略号表示;

    2)若页面中用了很多浮动,或者说从上到下都是用浮动来做的,这样固然解决了页面位置问题,但要将这些元素加上背景色或其它要用到高度的情况,该怎么做? 要知道浮动元素是没有高度的。

        解决办法:添加一个伪元素来清除浮动;

        若你也遇到了这个问题,可以直接将下面代码copy过去,然后给需要清除浮动的元素加一个clear类名就行了。

    .clear:after {
    
      content: "";
    
      display: block;
    
      clear: both;
    
    }

     3)以一个button元素为例,通常情况下它要被设置宽高,这时设计师给它去掉了其中一条左边框的颜色,但给它加了这条边框的1个像素,所以不能用比较常用的border-left:none;

         解决办法:将这条左边框的颜色设置为透明;(此方法还可延伸到其它块级元素中)

     border-left-color: transparent;

    4)去掉页面中的滑轮;

        解决办法:超出页面宽度的元素隐藏;

     overflow-x: hidden;    //横向;
     overflow-y: hidden;    //纵向;

    5)写IOS页面,点击控件(例如input、button...)会出现背景色,需要取消;

     苹果手持设备的浏览器属性,意思是:点击它,它就会出现一个半透明的灰色背景。webkit是苹果浏览器引擎,tap点击,highlight背景高亮,color颜色,颜色用数值调节。

         解决办法:

    1    input, button, p, ul, a, select,span,image {
    2 
    3       -webkit-tap-highlight-color: rgba(255,255,255,0);
    4 
    5     }

    6)手机安卓系统的用户,可能遇到的一点问题,微信端无法实现某些新html5元素的块级;

        解决办法:reset一遍新属性;

    1  article, aside, footer, header, hgroup, main, nav, section {
    2 
    3   display: block;
    4 
    5 }


    7) 背景颜色透明,但是文字不透明;

        解决办法:按下方代码给有需要的元素设置背景色;(.8为透明度opacity)

    1  background-color: rgba(255, 255, 255, .8);

    8)隔行换色

         解决办法:找到父元素,给子元素加类;

    1 .prices {
    2   .price-row:nth-child(even) {
    3     background-color: lightgrey;
    4   }

    9)溢出的元素隐藏,用滚轮来滑动(比如容器就这么高;但是内容很多,需要隐藏但内容不能丢失的情况)

    1  .navbar-default {
    2     height: 100%;
    3     overflow-y: auto;
    4   }

    10)微信页面的源代码@media适配主流手机

    @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */}
    @media only screen and (max-device-width :480px){ }
    @media only screen and (min-device-width :481px){ }
    
    /*6*/
    @media (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio : 2){ }
    
    /*6+*/
    @media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3){ }
    
    /*魅族*/
    @media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){ }
    
    /*mate7*/
    @media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ }
    
    /*4 4s*/
    @media only screen and (device-height :480px) and (-webkit-device-pixel-ratio:2){ }
  • 相关阅读:
    GithubPlus+PicGo + Typora 一键式图床
    快速掌握Linux这篇文章就够了。
    跨行程序员Java进阶--基础语法
    Prometheus(普罗米修斯)
    【学习记录】Golang
    服务器Docker-Compose 安装 Anaconda
    Kubernetes集群部署
    Jenkins部署
    Harbor部署
    Docker、Docker-Compose的安装以及相关使用
  • 原文地址:https://www.cnblogs.com/margarita/p/5201516.html
Copyright © 2020-2023  润新知