css 常用的知识及兼容问题

1、标准的 CSS 的盒子模型? IE的盒子模型有什么不同的？

      盒模型都是四部分组成：margin、padding、border、content.

      W3C标准的盒模型：width+height属性只包含content

      IE盒模型：width+height属性 包含border+padding+content

2、用纯 CSS 创建一个三角形？

      .box{

                width:0;

                height:0;

                border-width:20px;

                border-style:solid;

                border-color:transparent transparent pink transparent;

        }

3、修改 chrome 记住密码后自动填充表单的黄色背景？

     chrome表单自动填充后，input文本框的背景会变成黄色的，审查元素是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式：
{
        background-color:rgb(250,255,189)!important;
        background-image:none!important;
        color:rgb(0,0,0)!important;
}

使用纯色内阴影来覆盖input输入框的黄色背景：
input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{
        -webkit-box-shadow:0px 100px white inset!important;
        border:1px solid #eee!important;
}

4、让 Chrome 支持小于 12px 的文字？

     css设置字体大小为12px及以下时，显示都是默认12px。要是想小于12px，可以设置：

     1)）使用-webkit-text-size-adjust:none属性，但是高版本浏览器不支持

     2） -webkit-transform:scale(0.75);  收缩的是整个元素的大小，如果是内联元素，必须要将内联元素转换成块元素，使用display：block/inline-block。

5、文本超过3行显示省略号？

     display:-webkit-box;

      -webkit-box-orient:vertical; 

      -webkit-line-clamp:3; // 表示显示几行

      overflow:hidden;

6、背景渐变：

        background:linear-gradient(起始方向，颜色1，颜色2, ...)

        background:-webkit-linear-gradient(left, red, pink);

        background:-webkit-linear-gradient(left top, red, pink);      

7、ios 上下拉动滚动条时卡顿、慢的问题

        body{

                -webkit-overflow-scrolling:touch;

                overflow-scrolling:touch;

         }

8、禁止复制、选中的文本

div{

        -webkit-user-select:none;

        -moz-user-select:none;

        user-select:none;

} 

9、iphone及ipad下输入框默认内阴影

      div{

                -webkit-appearance:none;

       }

10、input 设置为type=number的问题

一个问题是maxlength属性不好用了。

二是form提交的时候，默认给取整。因为form提交默认做了表单验证，step默认是1,要设置step属性。

三是部分安卓手机出现样式问题。

针对第一个解决方法：

 <input type="number" oninput="checkTextLength(this ,10)">

  function checkTextLength(obj, length) { 

        if(obj.value.length > length)  {    

          obj.value = obj.value.substr(0, length); 

        } 
  }

第二个问题解决：

  <input type="number" step="0.01" />

第三个问题解决：

  input[type=number] {
      一moz一appearance:textfield;
  }

  input[type=number]::一webkit一inner一spin一button,
 input[type=number]::一webkit一outer一spin一button {

    一webkit一appearance: none;
    margin: 0;

  }

11、IOS键盘字母输入，默认首字母大写，可以设置属性

 <input type="text" autocapitalize="off" />

12、关于 iOS 系统中，中文输入法输入英文时，字母之间可能会出现一个六分之一空格可以通过正则去掉。

this.value = this.value.replace(/\u2006/g, '');

13、某些安卓手机圆角失效问题：

 background-clip: padding-box; 

14、禁止输入框输入空格

 οnkeyup=“this.value=this.value.replace(/\s+/g,’’)”

15、改变表单输入框placeholder的颜色值:

input::-webkit-input-placeholder{color:#ccc;}

input:focus::-webkit-input-placeholder{color:#eee;}

16、一个div在可是屏幕中水平垂直居中显示：

        html,body高度一定要100%显示，否则box的高度就是自适应

        html,body{

                width:100%;

                height: 100%;

                box-sizing:border-box;

        }

        1) .box{

                position:absolute;

                left:50%;

                top:50%;

                transform:translate(-50%, -50%)

              }

             2) .box{

                        width:100%;

                        height:100%;

                        display:flex;

                        align-item:center;

                        justify-content:center;

                }