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

*/