前端开发常见问题精选（四）

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关键词，也就是说它们都与单词内断句有关。

而它们之间的区别具体又是什么呢？同样我们可以从表面文字上分析：

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>

/*CSS*/
p{ width: 200px; word-break: break-all;}

word-break: break-all

/*CSS*/
p{ width: 200px; word-wrap: break-word;}

word-wrap: break-word

通过上面两个例子你应该能区分word-break: break-all与word-wrap: break-word了吧？

想要禁止鼠标点击事件，我们常常会使用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

左右两端文字平整对齐，完美！

以上是我在工作当中所遇到的一些问题总结，在此与大家共勉！