WEB前端开发CSS小技巧（不断更新）

此文记录自己在css上遇到的小知识小技巧，会不断更新

（1）padding-top、padding-bottom、margin-top、margin-bottom 设置百分比，参照的是父元素的宽度
（我和你一样吃惊…
（2）.a{font: 12px/2 arial;} 这里line-height是24px，参照的是font-size(即12px)
（3）line-height继承
line-height: 300%; 先计算后继承，根据父元素的字体大小计算出行高，并且子元素依然沿用这个计算后的行高。
line-height: 3; 直接继承，即子元素的行高是子元素的字体乘以3。
（4）color: rgba(0,0,0,0) 等同于 color: transparent;
（5）text-indent: -9999px; 针对seo，隐藏文字
（6）outline: 5px dashed blue; 记住outline是不占据空间的，显示在border外
（7）background-color: green; 背景色一定在最下面一层，而且也会在border下面（你把border设为非实线，就看到了）
（8）background-position: 50%; 如果仅规定一个值，另一个则默认是50%
（9）background-origin的默认值是padding-box
（10）display:inline; 默认内容宽度，同行显示，不可设置宽高
（11）display: none; 不显示，不占据空间
visibility: hidden; 不显示，占据空间
（12）height与line-height值相等时，文字垂直居中
（13）登录时全屏遮罩代码段(fixed是相对视窗)
<div class=”mask”></div>
.mask{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999;}
（14）float元素半脱离文档流
对元素，脱离文档流
对内容，在文档流
( 15 ) css指定的font-size生效，chrome开发者工具调试pc端正常，但移动端computed的字体大小和css指定的显示大小不一样
原因： webkit 给移动端浏览器提供的一个特性，这个特性被称做「Text Autosizer」，又称「Font Boosting」、「Font Inflation」：当我们在手机上浏览网页时，很可能因为原始页面宽度较大，在手机屏幕上缩小后就看不清其中的文字了。而 Font Boosting 特性在这时会自动将其中的文字字体变大，保证在即不需要左右滑动屏幕，也不需要双击放大屏幕内容的前提下，也可以让人们方便的阅读页面中的文本。
解决方法：比如body * { max-height: 999999px; } 就可以无副作用的禁掉 Font Boosting 特性。

( 16 ) 文字如超过二行隐藏，第二行末显示省略号，适用移动端（webkit内核）
p{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
( 17 ) 移动端滚动不流畅，滑动的手指松开后，滚动立刻停止，失去了原本的流畅滚动特性。—–> webkit环境下，增加该属性，可以增加弹性，使滑动更加顺畅
-webkit-overflow-scrolling: touch;
( 18 ) 水平垂直居中的一种方式
<div class=”parent parent-d”>
<div class=”child child-d”>demo-d</div>
</div>

    .parent-d{
        position: relative;
    }
    .child-d{
        width: 50%;
        height: 50%;
        margin: auto;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }

( 19 ) 移动端虚拟键盘挡住输入框
解决方法：让输入框出现在顶部或者判断设备，在获取焦点时做一下页面滚动。（还未实践过）
（20）踩了个坑，移动端ios系统input获取不到焦点，安卓没问题。我通过去掉user-select: none;
（21）background缩写 => background: url(“../common/images/sceneChooseCoupon/youhuiquan@2x.png”) #F4F5F7 no-repeat 50% 50%/contain;
(22) 背景渐变图的兼容写法
background: #fff;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#fff),color-stop(100%,#eee));
background: -webkit-linear-gradient(top,#fff 0,#eee 100%);
background: linear-gradient(to bottom,#fff 0,#eee 100%);
( 23 ) css全局样式
html, body{
width: 100%;
height: 100%;
box-sizing: border-box;
}
, ::before, *::after{
box-sizing: inherit;
}

（ 24 ）a标签不能嵌套a标签，html结构会错乱