积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《TailwindCSS 中 line-height 和 leading 失效？如何垂直居中？ 》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~
tailwindcss line-height、leading 未生效？如何垂直居中？
在使用 tailwindcss 时，常遇到 line-height 或 leading 属性无法按预期生效的问题。以下内容将解释原因并提供垂直居中的解决方案。
问题原因
因 height 值与 leading 值不匹配导致。例如，h-12 等于 height: 3rem;，而 leading-6 等于 line-height:1.5rem。由于两者差了一半，因此垂直居中失效。
解决方案
1. 使用 justify-center 和 align-items-center
针对这个问题，可以在 height 值不变的情况下，使用 justify-center 和 align-items-center 辅助类。例如：
...
2. 缩小高度值
也可以将 height 值减小，例如到 h-10，再配合适当的 leading 值。例如：
...
3. 创建自定义 leading 类
此外，可以创建一个自定义 leading-12 类，然后使用该类。该类的定义如下：
.leading-12 {
line-height: 2.5rem;
}
具体的垂直居中方法根据实际情况而定，如果存在限制条件（如固定高度），可根据上述解决方案选择适合的方案实现垂直居中。
今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~
阻止a链接href跳转的两种方式
阻止a链接href跳转的两种方式
用户在使用网站过程中，有时点击a链接后无感，造成多次频繁点击的问题，为了防止这类事件的发生，降低服务器的压力，考虑是否可以全站防止a链接多次被点击触发，想到两种方式，一种是组织鼠标的默认事件，另一种是阻止click的默认事件，通常情况下是第一次点击需要能触发，在一定的时间内不允许再次触发。
1.通过修改鼠标的事件来阻止访问 第一次点击给a加上 pointer-events: none;增加定时器，2s后将pointer-events的值修改为auto, 示例代码如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>修改鼠标的事件title>
head>
<body>
<a href="http://www.csdn.net/">CSDNa>
<a href="http://www.google.com">googlea>
<script type="text/javascript">
var allLinks = document.querySelectorAll('a')
Array.prototype.forEach.call(allLinks, function (link) {
link.addEventListener('click', function (e) {
this.setAttribute("style","pointer-events:none");
var that = this;
setTimeout(function(e,b){
that.setAttribute("style","pointer-events:auto");
},2000);
})
})
script>
body>
html>2.通过给a链接添加属性标示是否可点击，来判断是否可以进行进行，第一次点击时，给属性data-flag赋值为true,定时之后将属性 data-flag移除，判断没有属性可以进行默认事件，存在该属性，并且值为true，则进行阻止事件，添加定时器，2s后清除该a标签的data-flag属性 示例代码如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>阻止click的默认事件title>
head>
<body>
<a href="http://www.csdn.net/">CSDNa>
<a href="http://www.google.com">googlea>
<script type="text/javascript">
var allLinks = document.querySelectorAll('a')
Array.prototype.forEach.call(allLinks, function (link) {
link.addEventListener('click', function (e) {
var dataFlag = this.getAttribute("data-flag");
if (dataFlag != null && dataFlag == 'true'){
e.preventDefault();
console.log("stop")
}
else{
console.log("start")
var that = this;
that.setAttribute("data-flag","true");
setTimeout(function(){
that.removeAttribute("data-flag");
},2000);
}
})
})
script>
body>
html>本文为自己理解所写，如有错误希望批评指正，不喜勿喷！
