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 { 100px; text-align: justify; text-align-last: justify; }
5.使用line-height等于div的高度时,文字不居中问题
line-height,指的是两行文字【基线】之间的距离,当元素高度和font-size差距较大的时候,这种不是真正的居中就越发的明显
只有小【x】是会居中的,但是其他文字比x高的字就会出现偏上