字體大小單位rem em

• rem:相對(duì)長(zhǎng)度單位。相對(duì)于根元素(即html元素)計(jì)算值的倍數(shù)
• em:相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。

<style>
html{
    font-size:15px;  
}
p：first-child{
   font-size:2rem;//根據(jù)html標(biāo)簽的字體大小
}
p:last-child{
  font-size:2em;//根據(jù)父元素的字體大小
}
</style>

<p>我是第一段文字，I am a paragragh</p>
<p>我是第二段文字，I am a paragragh</p>

• 實(shí)現(xiàn)自適應(yīng)

<style>
html{
    font-size:20px;  
}
.box{
   width:2rem;
   height:2rem;
   border:1px solid #000;
}
</style>
<div class="box"></div> 

字母間距（漢字算一個(gè)字母）letter-spacing

<style>
p{
    letter-spacing:5px;
}
</style>

<p>我是一段文字，I am a paragragh</p>

單詞間距（漢字無(wú)效）word-spacing

<style>
p{
    letter-spacing:5px;
}
</style>

<p>我是一段文字，I am a paragragh</p>

字母間距（漢字算一個(gè)字母）letter-spacing

<style>
p{
    letter-spacing:5px;
}
</style>

<p>我是一段文字，I am a paragragh</p>

文字不換行，只占一行white-space:no-wrap;

<style>
p{
    white-space:no-wrap;
}
</style>

<p>我是一段文字，I am a paragragh</p>

強(qiáng)行斜體font-style：oblique;

• 如果字體沒(méi)有設(shè)計(jì)斜體無(wú)法用italic，設(shè)置oblique會(huì)將字體強(qiáng)行拉歪。

<style>
p{
   font-style：oblique;
}
</style>

<p>我是一段文字，I am a paragragh</p>

字母小型大寫font-variant:small-caps;

• 將小寫字母轉(zhuǎn)為大寫，但是站的位置還是小型字母的位置，所以稱為小型大寫字母

<style>
p{
   font-variant:small-caps;
}
</style>

<p>I am a ParaGragh</p>

文字不換行white-space:nowrap

<style>
div{
   white-space:nowrap;
   width:300px;
}
</style>

<div>I am a ParaGraghI am a ParaGraghI am a ParaGraghI am a ParaGraghI am a ParaGraghI am a ParaGragh</div>

文字換行word-wrap:break-word&word-break:break-all

• 相同點(diǎn)：文字長(zhǎng)度超過(guò)div的寬度就會(huì)自動(dòng)換行
• 區(qū)別：word-wrap:break-word屬性會(huì)把單詞看作一個(gè)整體，當(dāng)同行最后一個(gè)單詞寬度不能放下時(shí)自動(dòng)換行，缺點(diǎn)是當(dāng)出現(xiàn)一個(gè)超長(zhǎng)單詞比div寬度要寬時(shí)，還是會(huì)超出顯示。
  而word-break:break-all則不管你是否是一個(gè)單詞，達(dá)到div的寬度時(shí)就會(huì)換行處理。
  <style>
  .wn{
  word-wrap:break-word;
  width:300px;
  }
  .wb{
  word-break:break-all;
  width:300px;
  }
  </style>

<div class="wn">I am a ParaGraghI am a ParaGraghI am a ParaGraghI am a ParaGraghI am a ParaGraghI am a ParaGragh</div>

<div class="wb">I am a ParaGraghParaGraghParaGraghParaGraghParaGraghI am a ParaGraghI am a ParaGraghI am a ParaGraghI am a ParaGraghI am a ParaGragh</div>