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