控制字體樣式+彈性盒子模型[後面](個人認爲rgba比較重要：因爲在做hover的效果時用的比較多還有彈性盒子模型，做導航欄很方便的)

    font-size: 控制字體的大小
            px 
            百分比
            em
            rem
   font-weight: 控制字體的粗細
            bold   加粗
   color: 控制字體顏色
         英文單詞   red orange yellow green blue purple pink
         十六進制   #cccccc #ffffff #000000
         rgb(255,255,255) 每個值取值範圍0-255
         rgba(255,255,255,0.7) 透明度取值0-1
   font-family： 字體類型（一般默認的是宋體 有的是微軟雅黑）
            前提是你的電腦安裝的有這麼一個類型
            font-family: '華文行楷','宋體','微軟雅黑'; 有第一個就用第一個 沒有就用後面的 一次選擇
            直到最後都沒有就用瀏覽器的默認的字體類型
   line-height: 40px;  行高
            當包裹文本的標籤的高度較大時，想要文字在標籤中垂直居中，就需要用行高 行高的高度和標籤的高度一致
   複合樣式：
         font: bold 20px/40px ''; font: weight size/line-height family
         font: 20px/40px ''; font: size/line-height family
         要求：bold可以不寫 但是20px/40px ''必須要寫
*/ 

/* font-size: 16px; */ /*瀏覽器默認的文本大小 是16px*/
/* font-size: 12px; */ /* 瀏覽器最小值12px 最大沒有限制 */
/* font-size: 100%; */   /*100%就是默認的大小（16px）*/
/* font-size: 2em;  */    /* 父級元素的字體的倍數 */
/* font-size: 1rem; */ /* 取決於根元素的字體的大小 1rem就等於html字體大小的一倍 */
/* font-weight: bold; */
color: blue;   /* 只能單獨寫 */
/* font-family: '華文行楷','宋體','微軟雅黑'; */
/* line-height: 40px; */
font: bold 20px/40px '';

/* 控制文本
      text-align: 文本水平對齊方式
               left(默認)左對齊
               center 居中對齊
               right  右對齊
      text-decoration: 控制文本線的位置
               none（默認）沒有線
               underline 下劃線
               overline   上劃線
               line-through  中劃線
      text-indent: 文本縮進
               em 一個em就是一個文字的寬度
               px
               %  相對父級元素的百分比                        (除非遇到<br>)
      white-space: nowrap; 瀏覽器默認的文本都是默認換行顯示 這個屬性使文本強制不換行 ！！

文本超出處理方式

文本超出用“…”代替

Øoverflow：hidden；

Ø

Øwhite-space：nowrap；

Ø

Øtext-overflow：ellipsis；

Ø

三個搭配使用，缺一不可。

css3 多行文本超出顯示省略號

  display: -webkit-box;/*繼承block的屬性*/

  -webkit-box-orient:vertical;  /*元素垂直顯示*/

  -webkit-line-clamp:5; /*設置文本顯示的行數*/

 

  overflow：hidden； （不能使用padding）

彈性盒子模型

給導航欄的父元素添加 css3 justify-content:  space-between可以使裏邊的導航項自己平均分配 ，導航欄裏面的空間

以下屬性都是設置給父級的：
justify-content: space-around; x軸方向每個盒子左右間隙一樣
justify-content: space-between; x軸兩邊對齊 中間間隙一樣
align-content: space-around; y軸方向每個盒子左右間隙一樣
align-content: space-between; y軸兩邊對齊 中間間隙一樣

在彈性盒子模型下，元素是默認不換行 當元素總寬度超出大盒子的時候，每個元素會被壓縮 而不是換行
這個時候如果需要換行就用：flex-wrap: wrap;


*/