CSS 手札记

1. Display:Block/Flex 宽度如果不定义会尽可能的扩充外层宽度
2. 在内容区域使用高度百分比和固定像素高度的时候外层设overflow:auto;可以把内层的高度撑开，否则外层会比内层短一截
3. 当用百分比作为宽高时 因为百分比是相对于其最近的父元素的宽高，所以首先其父元素要有宽高，宽度一般不设置会有默认值(比如整个屏幕的宽度)，但是高度不设置就没有默认值，因此如果父元素没设高度值，而其内部元素用了百分比作为高度时，是没有效果的
4. transform会提升元素的层级定位，会把元素的默认z-index替换掉
5. transform会限制position:fixed的跟随效果，会把fixed降级成absolute
6. position:absolute;定位会把父级元素超出隐藏的部分显示出来，但是transform会把这种情况限制，使它超出隐藏
7. 设置absolute元素宽度100%, 则都会参照第一个非static值的position祖先元素计算，没有就window. 现在，transform也需要考虑在内！
8. color 值设置失效在某些Android机型失效，可能的原因有：由于覆盖样式错导致选择器失效，需要重新更改选择器权重；
9. text-align: center 设置失效在某些Android机型失效，可以尝试以上方法或者使用其余居中方式。例如：justify-content: center;
10. 高斯模糊backdrop-filter 会影响子元素fixed定位；
11. filter: blur(85px) brightness(100%); 可以达到阴影效果，同渐变色一起使用可达到渐变阴影效果；
12. CSS3 transition,transform动画会导致一些无关元素的闪烁抖动问题可给相关元素添加transform: translate3d(0, 0, 0);-webkit-transform: translate3d(0, 0, 0);解决；
13. 在 iOS 上，输入框默认有内部阴影，可以通过-webkit-appearance: none;来关闭；
14. -webkit-touch-callout: none;可以禁用保存或拷贝图像；
15. IOS电话号码识别可以通过<meta name="format-detection" content="telephone=no" />来关闭；<a href="tel:123456">123456</a>来开启；
16. Android邮箱识别可以通过<meta content="email=no" name="format-detection" />来关闭；<a mailto:xxx@gmail.com>xxx@gmail.com</a>来开启；
17. ::-webkit-input-placeholder;可以设置placeholder默认字体颜色；
18. text-size-adjust: 100% !important;可以禁止字体缩放；
19. -webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-user-modify:read-write-plaintext-only;可以去除部分android机型点击链接后的半透明灰色遮罩；
20. -webkit-overflow-scrolling: touch;可以解决IOS机型滚动touch不流畅问题；
21. IOS（软键盘唤起后，页面的 fixed 元素将失效，变成了 absolute，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了）下fixed失效的问题可以把父级元素设为高度100% 定位absolute，超出滚动，内层正常布局即可；
22. flex 布局，给子元素添加margin-left: auto; 或者flex: 1;text-align: right; 可以让它靠右排列