css架构技巧

1. 写一个reset.css

用于清除浏览器标签默认样式并定义全局样式，这样就不会因为浏览器默认样式出现问题，因为不同浏览器的默认样式还是不一样的

2. 巧用 display: contents

说明：设置了该属性值的元素本身将不会产生任何盒子，但是它的从保留其子代元素的正常展示。

1. 最近写微信小程序发现这个可以充当无语义的包裹框，起到类似vue的template，小程序的block的包裹作用，区别就是包裹的这个元素会显示在html文档上

2. 还可以写在标签上取消原来标签的语意

3.设置line-height

由于每个浏览器的默认字体不太，每个字体的默认line-height也是不同的，所以导致布局的时候会有上下空白间隙增大字体高度，最终导致margin/padding的定位不准，所以可以设置line-height和当前字体大小一致，可以设置line-height为1即当前字体1倍大小

4.设置文字两端对齐

在每个文字上进行如下设置即可实现上述效果

.text {
        width: 100px;
        text-align: justify;
        text-align-last: justify;
}

　　

5.使用line-height等于div的高度时，文字不居中问题

　　line-height，指的是两行文字【基线】之间的距离，当元素高度和font-size差距较大的时候，这种不是真正的居中就越发的明显

　　只有小【x】是会居中的，但是其他文字比x高的字就会出现偏上