實(shí)際使用，自行補(bǔ)全兼容

一、實(shí)現(xiàn)固定寬度內(nèi)文本長(zhǎng)度不一樣的居中對(duì)齊

1、史前方式

靠慢慢加&emsp 或者&nbsp 來(lái)調(diào)整，原始、粗暴、效率低

<p>密&emsp;&emsp;碼</p>
<p>用&emsp;戶&emsp;名</p>
<p>身&emsp;份&emsp;證&emsp;號(hào)</p>

2、改良版：word-spacing來(lái)替代&emsp

//相當(dāng)于直接用&emsp，可以更精細(xì)的設(shè)置字體的空白距離
//但：字體需要留空白，且word-spacing需要手動(dòng)調(diào)合適的值：稍有改良，不夠智能
<p style="word-spacing:30px;">密 碼</p>
<p style="word-spacing:15px;">用 戶 名</p>
<p style="word-spacing:10px;">身 份 證 號(hào)</p>

3、現(xiàn)代版：text-align:justify

text-align:justify【只能處理，非最后一行，的行文本對(duì)齊方式】
所以，這里采用:after增加一行，作為最后一行。這樣我們?cè)瓉?lái)的文本就不是最后一行啦
問題：最后一行雖然內(nèi)容為空，為' '，因?yàn)楦溉萜饔衛(wèi)ine-height:所以也是會(huì)占用一定空間的
解決方式：父容器設(shè)置height，及;ine-height==height，這樣我們?cè)任谋揪蜁?huì)居中。
及增加 overflow: hidden;讓after增加的那一行超出隱藏

<p class="text-justify" style="width:200px;">密碼</p>
<p class="text-justify" style="width:200px;">用戶名</p>
<p class="text-justify" style="width:200px;">身份證號(hào)</p>

.text-justify{
    text-align: justify;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
}
.text-justify:after{
    content: '';
    display: inline-block;
    width: 100%;/*設(shè)置100%,才會(huì)被擠下去，出現(xiàn)兩行。即不要和原來(lái)文本在同一行*/
}

效果圖

兼容版

.text-justify{
    text-align: justify;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    text-justify: inter-ideograph; /* IE 6-7 */
    *zoom: 1; /* IE 6-7 觸發(fā) hasLayout 使一行也能兩端對(duì)齊 */
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
    text-align-last: justify;/* IE 8+ */
}
.text-justify:after{
    content: '';
    display: inline-block;
    width: 100%;
}

二、:before，:after偽類與動(dòng)畫=>content內(nèi)容可以實(shí)現(xiàn)動(dòng)畫

:before，:after有content屬性
所以，:before，:after如果單獨(dú)執(zhí)行某個(gè)動(dòng)畫，則該動(dòng)畫內(nèi)修改content值是會(huì)生效的
即可以實(shí)現(xiàn)動(dòng)態(tài)內(nèi)容

• 玩轉(zhuǎn)方式1：動(dòng)畫中，改變content內(nèi)容。
• 玩轉(zhuǎn)方式2：content內(nèi)容早寫好，動(dòng)畫切換content可視的內(nèi)容

應(yīng)用1：純css實(shí)現(xiàn)的...動(dòng)畫

.dot-animation::after {
    content: '...';
    animation: dot-animation 3s infinite  both;
}

@keyframes dot-animation {
    33% { content: '.'; }
    66% { content: '..'; }
    99% { content: '...'; }
}

<span class="dot-animation">加載中</span>

應(yīng)用2：純css實(shí)現(xiàn)的倒計(jì)時(shí)

.count-down-10::after {
    content: '';
    animation: count-down-animation 10s backwards;
}

@keyframes count-down-animation{
    0% { content: '10'; }
    10% { content: '9'; }
    20% { content: '8'; }
    30% { content: '7'; }
    40% { content: '6'; }
    50% { content: '5.'; }
    60% { content: '4'; }
    70% { content: '3'; }
    80% { content: '2'; }
    90% { content: '1'; }
    100% { content: '0'; }
}

3、content的其它玩法：針對(duì)content的顯示內(nèi)容寬度是一致的 √

• content寫很多內(nèi)容。
• 水平方向：以空格隔開(再設(shè)置字體大小，控制只能顯示每1小段的內(nèi)容，其它內(nèi)容被擠下去下一行)
• 垂直方向：設(shè)置樣式height，且line-height==height；
• 偽類內(nèi)執(zhí)行動(dòng)畫(也可以逐幀動(dòng)畫)，執(zhí)行上下移動(dòng)，切換視圖能看到的內(nèi)容
• 知識(shí)補(bǔ)充：偽類內(nèi)執(zhí)行的動(dòng)畫的百分比是相當(dāng)于偽類來(lái)的。在這里即把偽類高度100%f分成多部動(dòng)畫完
• 例子：純css實(shí)現(xiàn)的計(jì)時(shí)器，跳轉(zhuǎn)查看效果
  
  360截圖-8051196.jpg

.timer{
    width: 100px;/*視圖的寬度*/
    height: 100px;/*視圖的高度*/
    line-height: 100px;/*讓每一行垂直居中*/
    text-align: center;/*讓每一行水平*/
    overflow: hidden;/*after偽類內(nèi)容，超出隱藏*/
}
.timer::after{
    content:'00 01 02 03 04 05 06 07 08 09';/*after偽類內(nèi)容*/
    font-size: 60px;/*字體大小。調(diào)節(jié)字體大小或timer的width。來(lái)確保content空格風(fēng)格的內(nèi)容放不下一行，把他們擠下下一行*/
    animation: counter 10s infinite  steps(10,start) forwards;/*執(zhí)行動(dòng)畫，使偽類上下移動(dòng)，即切換視圖的內(nèi)容*/
    /* nimation: counter 10s infinite linear */
    display: block;/*這里要是block或inline-block。因?yàn)閯?dòng)畫對(duì)行內(nèi)元素?zé)o效！*/
}

@keyframes counter {
    from {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    to {
        -webkit-transform: translateY(-100%);/*注意這里：偽類內(nèi)的百分比是相對(duì)于偽類自身的。*/
        transform: translateY(-100%);/*在這里。即偽類100%高度，分成10步逐幀動(dòng)畫*/
    }
}

三、