控制字体样式+弹性盒子模型[后面](个人认为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;


*/