css小知识

margin 为负值

margin-left、margin-top：当这两个的属性值为负值的时候，自身会根据负值的大小来向左和上方向偏移。

margin-right、margin-bottom：当这两个的属性值为负值的时候，自身的位置不会发生改变，但是会影响自己身后的元素。这两个为负值，相当于自己的宽度缩小（宽度缩小是表示自己占用的宽度变小，但是不会影响自身元素的显示。当负值到达-100%的时候，自身的就不占用宽度，如果由于宽度不够而导致的换行，就会偏移到原来的位置），导致后续的元素向自己偏移；

css属性——env()和constant()

env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：

• safe-area-inset-left：安全区域距离左边边界的距离
• safe-area-inset-right：安全区域距离右边边界的距离
• safe-area-inset-top：安全区域距离顶部边界的距离
• safe-area-inset-bottom ：安全距离底部边界的距离

而env()和constant()函数有个必要的使用前提，H5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover。

rem 配置

//改变font-size
(function(doc,win){
    var docEI = doc.documentElement,
    resizeEvt = 'orientationchange' in window?'orientataionchange':'resize',
    recalc = function(){
        var clientWidth = docEI.clientWidth;
        if(!clientWidth) return;
        //100是字体大小，750是开发时浏览器窗口的宽度，等比计算
        docEI.style.fontSize = 100*(clientWidth/750)+'px';
    }

    if(!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document,window);

place-items

CSS place-items 属性是 align-items 和 justify-items 两个属性的绝佳简写。 它允许我们在 Flexbox 或 Grid 等布局系统中轻松地在两个方向（内联和块）对齐元素。