css随笔

（前言）博客中所有关于css的语言，全部用less框架所写。

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

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

正文

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

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

    max- 100vw - 200 * @unit;        //设置一个最大宽度，宽度为这个块元素的本身应有的长度；

    overflow: hidden;                               //若内容超过最大宽度，则超出部分隐藏；

    white-space: nowrap;                         //段落中的文本不能换行；

    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颜色，颜色用数值调节。

     解决办法：

   input, button, p, ul, a, select,span,image {

      -webkit-tap-highlight-color: rgba(255,255,255,0);

    }

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

    解决办法：reset一遍新属性；

 article, aside, footer, header, hgroup, main, nav, section {

  display: block;

}

7) 背景颜色透明，但是文字不透明；

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

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

8）隔行换色

     解决办法：找到父元素，给子元素加类；

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

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

 .navbar-default {
    height: 100%;
    overflow-y: auto;
  }

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){ }