一些常用的css技巧

1、文字首行缩进

<p class="words">

    谁看见对方看来升级蓝思科技的看法就是开裆裤
</p>

style样式：

.words{
            background: pink;
            width: 200px;
            text-indent: 2em;/*缩进两个文字*/
            /*text-indent: 50px; 缩进50px*/
        }

2、强制不换行：white-space:nowrap;

3、强制换行：world-break:break-all;

4、容器自适应内容：min-height:50px;

over-flow:auto;

5、单行文本溢出省略号：

<p class="ellips">了数据的会计法看来升级的蓝思科技的看法就是离开的</p>
 .ellips{
            width: 200px;
            background: #cccccc;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

6、多行文本溢出省略号：

<p class="more">
    上课的九分裤裸嫁时代了深刻的积分了看似简单累困烦拉克丝骄傲了跨境电商累困烦了看似简单六块腹肌卢卡斯来得及
</p>
.more{
            width: 200px;
            background: pink;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;/*保留三行*/
            overflow: hidden;
        }

7、去掉移动端a标签内img点击时的阴影：

<a href="javascript:;" class="pic">
    <img src="imgs/dogs.jpg" alt="">
</a>

正常

点击时

解决办法：

.pic{
            -webkit-tap-highlight-color: transparent;
        }

8、边框阴影：box-shadow

<div class="box"></div>
 	.box{        

 	    width: 100px;
            height: 100px;
            background: #cccccc;
            -webkit-box-shadow: 10px 5px 10px pink;
            -moz-box-shadow: 10px 5px 10px pink;
            -o-box-shadow: 10px 5px 10px pink;

box-shadow: 10px(左右偏移值，正右负左) 5px（上下偏移，正下负上） 10px（模糊值） pink（阴影颜色）; }

9、透明度兼容

.box{
            width: 100px;
            height: 100px;
            background: #000;
            opacity: .1;
            -moz-opacity: .1;
            -khtml-opacity: .1;/*老板safari*/
            filter: alpha(opacity=10);/*IE*/
        }

10、span标签间留白问题

父级加上font-size:0;

11、文字划线

text-decoration: line-through;

12、webapp常用meta标签

<!--1、WebApp全屏模式：-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,
    minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">

    <!--注意：viewport 后面加上 minimal-ui 在safri 体现效果-->
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta name="apple-touch-fullscreen" content="yes">

    <!--2、隐藏状态栏/设置状态栏颜色：-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
   <!-- 默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。
    注意： 若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。-->

    <!--3、safri 添加到主屏界面的显示标题：-->
    <meta name="apple-mobile-web-app-title" content="应用标题">

    <!--4、忽略自动识别数字为电话号码：-->
    <meta content="telephone=no" name="format-detection" />

    <!--5、忽略自动识别邮箱账号：-->
    <meta content="email=no" name="format-detection" />

    <!--HTTP-EQUIV类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容-->
    <meta http-equiv="Content-Type" content="text/html">

    <!--6、常用浏览器全屏设置：-->
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">

    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">

    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">

    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">

    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">

    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">

13、设置可编辑状态

<p class="edit"  contenteditable="true">沙基里世纪东方</p>