css学习之路tip1

楼主是前端初学者，下面的内容是楼主在学习中遇到的一些问题的解决办法，文糙字拙，惟愿与道同者共勉。

 

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

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

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

 

正文

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

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

1     max-width: 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 }