一、Swiper.js的loop模式下，如何正确获取索引值？
Swiper.js，相信作为前端开发者的你一定知道它吧。它几乎可以用来制作任何形式的轮播图，非常方便和实用。
有时候，我们需要动态获取当前轮播图的索引值，常常我们会使用activeIndex属性来获取。比如像这样：
var mySwiper = new Swiper('.swiper-container');
$('#btn1').click(function(){
alert(mySwiper.activeIndex);
})
然而，当轮播图需要设置循环时，我们就不能使用activeIndex属性了，而是要使用realIndex属性，例如：
var mySwiper = new Swiper('.swiper-container',{
loop:true,
});
$('#btn1').click(function(){
alert(mySwiper.realIndex);
});
二、word-break: break-all与word-wrap: break-word的区别是什么？
表面上看，这俩家伙长得太像，很多人都很难区分它们，包括我自己也是到现在才把它们彻底弄明白的。
首先我们先来说说它们的共同点吧！
你瞧它俩中都含有word和break关键词，也就是说它们都与单词内断句有关。
而它们之间的区别具体又是什么呢？ 同样我们可以从表面文字上分析：
word-break: break-all： break-all，顾名思义，不管什么情况，只要单词在行尾放不下就断开单词，将剩余内容换行至下一行。
word-wrap: break-word： 表示单词在行尾放不下就换行至下一行，如果下一行还是放不下那才断开单词。
还是举两个例子吧~~
<!--HTML-->
<p>I'd like to know how to distinguish "word-break: break-all" from "word-wrap: break-word". blablablablablablablablabla...</p>
1. word-break: break-all （总是尽量填满一整行）
/*CSS*/
p{ width: 200px; word-break: break-all;}
word-break: break-all
2. word-wrap: break-word（只有一个单词长到比容器宽度更大时单词才会断开）
/*CSS*/
p{ width: 200px; word-wrap: break-word;}
word-wrap: break-word
通过上面两个例子你应该能区分word-break: break-all与word-wrap: break-word了吧？
三、如何使用纯CSS禁止鼠标点击事件？
想要禁止鼠标点击事件，我们常常会使用JS中事件对象的preventDefault()方法来禁止，例如禁止一个普通链接的跳转：
<!--HTML-->
<a id="baidu" href="http://www.baidu.com">百度一下，你就知道。</a>
//JavaScript
document.getElementById("baidu").onclick = function(e){
e.preventDefault();
}
然而，事实上，我们只需简单一句CSS代码就能实现以上同样的效果：
/*CSS*/
#baidu{ pointer-events: none;}
这时候，如果你再在该 a 元素添加任何点击事件都会失效……
怎么样？是不是超简单？
四、如何给文字设置两端对齐？
这个就简单提一下吧，因为平时我们用得最多的文字对齐方式无非就是以下几种：
左对齐： text-align: left
右对齐： text-align: right
居中对齐： text-align: center
其实还有一个也是非常实用的：
两端对齐： text-align: justify
我们接下来看看默认情况和加上text-align: justify之后的区别。
① 默认情况，也就是加上 text-align: left 之后
text-align: left
右边参差不齐，作为完美主义者的我可受不了这样的，我要的是下面这种效果。
② 加上 text-align: justify 之后
text-align: justify
左右两端文字平整对齐，完美！
以上是我在工作当中所遇到的一些问题总结，在此与大家共勉！
网友评论