一、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" >百度一下，你就知道。</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

左右兩端文字平整對齊，完美！

以上是我在工作當中所遇到的一些問題總結，在此與大家共勉！