CSS 语法整理

平常项目中遇到的css不常用语法整理

css问题解决及说明相关网址

• 前端CSS规范整理 -- 标点符
• 编写高效的CSS教程
• PostCSS深入学习系列教程
• 大量 css3 hover效果动画
• CSS3 知识库
• Flex布局教程：语法篇
• Flex布局教程：实例篇
• 纯css3 实现 loading动画
• 用CSS绘制三角形
• css3中单位px,em,rem,vh,vw,vmin,vmax的区别
• 前端不为人知的一面--前端冷知识集锦
• CSS文字两端对齐
• CSS clip:rect矩形剪裁功能及一些应用介绍
• CSS align-items 属性
• css单词断词、换行
• 巧用 mask-image 实现简单进度加载界面
• CSS3 3D transform变换介绍
• CSS3图片摇摆动画
• CSS3 pointer-events:none应用举例及扩展, 按钮点透事件
• pointer-events属性说明 MDN
• 解决IOS下不支持fixed的问题
• css伪类元素和伪元素的用法详解
• 小三角带边框带阴影的div——css实现效果

Css项目中不常见属性汇总

1. 字体样式设置：
   
   单词间距：word-spacing:8px; 字与字间距：letter-spacing: 1px;
   设置开头缩进(两个字)：text-indent : 2em;
2. 阻止按钮的默认行为：pointer-events: none;
   具体用法：pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit
   实际应用案例： ① 提交页面，提交按钮点击后，添加这个样式属性（style="pointer-events"），来防止重复提交。
   ② 一些层的绝对定位，覆盖按钮，穿透可以点击它。等等。
3. 简单的文字模糊效果

    p {
    color: transparent;
    text-shadow: #111 0 0 5px;
    }

<p style="color: transparent;text-shadow: #111 0 0 3px;">提交页面，提交按钮点击后，</p>

4. css 垂直居中
   
   方案1： 将父容器设置为 display: table, 然后将子元素设置为 display: table-cell, 然后加上 vertical-align: middle来实现。
   方案2：利用 translate 来实现水平垂直居中样式，需 IE9+。

    .center-vertical {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); 
    }

5. 多重边框
   
   利用重复制定 box-shadow 来达到多个边框的效果

    /*CSS Border with Box-Shadow Example*/
    div {
        box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);
        height: 200px;
        margin: 50px auto;
        width: 400px
    }

<div style="width: 300px;height: 100px; margin: 50px auto; box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0.2), 0 0 0 24px rgba(0, 0, 0, 0.2);"></div>

6. 取消chrome浏览器下input和textarea的默认样式(轮廓)

   input, button, select, textarea{
       outline: none;
   }
   textarea{
       resize: none;  // 文本框不可拖拽
   }
   

7. 溢出显示省略号（...）：

   // 单行文本
   p {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }
   // 多行文本的溢出显示省略号（2行，可调整）
   p {
        overflow : hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
   }
   

8. 特殊选择器：::selection 用来改变浏览器网页选中中文的默认效果

9. css中文竖向排列的属性：writing-mode

10. 段落开头缩进 两个文字间距： text-indent:2em;

11. select 框右对齐的方法：

    ①、select {direction: rtl;}
    ②、<select dir="rtl">
            <option>Foo</option>    
       </select>
    

12. Firefox专属hack的写法: 解决 line-height 无法垂直居中问题

    @-moz-document url-prefix(){
        button{
          padding-top:2px;
        }
      }
    

13. 移动端 H5页面怎么样消除点击阴影

    a,img,button,input,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);}