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 {
         100px;
        text-align: justify;
        text-align-last: justify;
}

  

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

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

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

作者:dlm17
本文版权归作者和博客园共有,欢迎转载,但必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。
原文地址:https://www.cnblogs.com/dlm17/p/12345554.html