CSS常用

隐藏移动端横向滚动条

最外层盒子高度和每个子项目的元素一样，父元素的高度比在外层高，最外层设置overflow:hidden属性

.main{
      width: 90%;
      height: 50px;  /* 和子元素的高度一样*/
      border: 1px solid #cdc;
      overflow: hidden;
    }
    .parent{
      width: 100%;
      height: 110%;
      white-space: nowrap;
      overflow-x: auto;
      /* 不加该属性，在ios手机上滑动时会出现卡顿，加了以后滚动条又出现， ::-webkit-scrollbar 失效 */
      -webkit-overflow-scrolling: touch;
    }
    // 可有可无
    .parent::-webkit-scrollbar {
      display: none;
    }
   .child{
      display: inline-block;
      width: 50px;
      height: 50px;
      margin: 0 10px;
      background-color: pink;
    }

flex布局中input没有自适应长度的解决方法

1. 因为input标签有一个默认最小长度，在flex布局中 flex-auto如果宽度小于input长度时input会显示最小的长度，所以给这个input自定义一个最小长度；例如min-width: 100px;就可以了
2. 或者给这个input外面包一层div，给div设置flex: 1;input的长度width: 100%;

取消inline-block产生的间隙

1. 使用margin-left的负值

/* firefox */
margin-left: -4px;

/* chrome */
margin-left:-6px;

/* IE  */
margin-left:-2px;

2. 在父元素的css中设置word-spacing负值

/* firefox */
word-spacing：-8px; 

/* chrome */
word-spacing: -6px; 

/* IE: */
word-spcing: -4px;

取消滚动条

element ::-webkit-scrollbar {
      display: none;
 }

鲜为人知的CSS3属性

1. -webkit-tap-highlight-color

这个属性只用于iOS (iPhone和iPad)。当点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个样式，可以设置其值为任何颜色。如果要取消，设置成transparent即可。

2. -webkit-text-size-adjust

Chrome浏览器默认情况下的字体最小为12px，如果要设置某字体小于12px的话，发现在Chrome还是12px。如果要使此生效的话，就需要修改Chrome的默认配置了，一般应用下面的代码就能在全局生效了：

html { 
    -webkit-text-size-adjust: none;
}

注意：-webkit-text-size-adjust放在body中会导致页面缩放失效,不要把-webkit-text-size-adjust设置为全局或者可继承的。

-webkit-text-size-adjust 的本职是用于mobile的，一般用处是防止iPhone在坚屏转向横屏时放大文字（注意，就算viewport设置了maximum-scale=1.0 文字还是会放大的）。而且iPhone和iPad的默认设定是不一样的，iPhone默认设定 -webkit-text-size-adjust: auto; iPad默认设定 -webkit-text-size-adjust: none;所以iPad默认是不调节的。

此属性还支持百分比，这在当前的桌面版的webkit浏览器是不支持的，所以如果不想让iPhone横坚屏切换的时候调节文字，用 -webkit-text-size-adjust: 100%; 绝对不能用 -webkit-text-size-adjust: none; 这会导致仍然支持 -webkit-text-size-adjust: none;的桌面版的webkit浏览器无法人为放大文字大小，严重影响可用性。

3. -webkit-appearance: none

消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式 。 注意：不同type的input使用这个属性之后表现不一。text、button无样式，radio、checkbox直接消失

4. -webkit-user-select

-webkit-user-select: none; 
/*禁止页面文字选择 ，此属性不继承，一般加在body上规定整个body的文字都不会自动调整*/

5. -webkit-touch-callout

-webkit-touch-callout:none;  
/*禁用长按页面时的弹出菜单(iOS下有效) ,img会弹出保存图片的之类的弹层，a标签会弹出浏览器打开的链接

伪类选择器 focus:within

表示一个元素获得焦点，或该元素的后代获得焦点。

eg:

.box {
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }

        .content {
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 50px auto;
        }

        input {
            border: 1px solid #ccc;
            outline: none;
            margin: 100px 50px;
            transition: all .5s;
        }

        input:focus {
            margin: 95px 50px;
            box-shadow: 0 3px 5px gray;
            border-color: red;
        }
        .box:focus-within {
            border: 1px solid yellow;
        }
        .content:focus-within {
            border-color: blue;
        }

当input获得焦点的时候，便会触发其父级元素的focus-within。
更多栗子移步这里。

让一个层在body中全部占满有下面的方式

1、left:0;top:0;width:100%;height:100%；position:fixed
2、left:0;top:0;right：0；bottom：0；posioton:fixed;