文本溢出属性
（1）文本内容超出容器时
{overflow: visible/hidden/scroll/auto/inherit;}
visible:默认值，内容不会被修剪，会呈现在元素框之外；
hidden：内容会被修剪，并且其余内容是不可见的；
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
inherit：规定应该从父元素继承overflow属性的值。
（2）产生省略号
text-overflow: clip / ellipsis;}
取值：
clip：不显示省略号（...），而是简单的裁切;
ellipsis：当对象内文本溢出时，显示省略标记；
text-overflow属性仅是：当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：
1、容器宽度：width：value；（px、%，都可以）
2、强制文本在一行内显示:white-space：nowrap;
3、溢出内容为隐藏：overflow：hidden；
4、溢出文本显示省略号：text-overflow：ellipsis;
注：必须是单行文本才能设置本文溢出！！！
元素的分类
分为三类：块状元素，行内元素，行内块元素。
（1）块级元素的特点
块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，
默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列。
块状元素都可以定义自己的宽度和高度。
块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子。
常见的块级元素块级元素：
div -最常用的块级元素
dl - 和dt-dd 搭配使用的块级元素
form - 交互表单
h1 -h6- 大标题
hr - 水平分隔线
ol – 有序列表
p - 段落
ul - 无序列表
（2）行内元素的特点
行内元素的表现形式是始终以行内逐个进行显示；
行内元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度由内容来确定，它只能根据所包含内容的高度，最小内容单元也会呈现矩形形状；
行内元素也会遵循盒模型基本规则，如可以定义padding,border,margin,background等属性，但个别属性不能正确显示;(margin-top/bottom:;)
常见的行内元素
a –超链接（锚点）
br - 换行
i - 斜体
em - 强调
span - 常用行内容器，定义文本内区块
strong - 粗体强调
u - 下划线
（3）行内块元素
可以像块状元素一样设置宽高，但是排列的方式和行内元素一样一个接一个
常见的行内块元素
img - 图片
input - 输入框
元素类型的转换
{display：block/inline/inline-block/none/flex......}
block块状、显示：类似在元素后面添加换行符，也就是说其他元素不能在其后面并列显示。(将元素转为块状元素，使该元素拥有块状元素的特点；)
inline内联、显示：在元素后面删除换行符，多个元素可以在一行内并列显示。（元素转换为内联元素）
当元素设置了float属性后，就相当于给该元素加了display:block;声明；但是脱离文档流
inline-block行内块元素显示：元素的内容以块状显示，行内的其他元素显示在同一行。（只有这一个元素类型支持vertical-align属性）img,input(行内块元素)。
none 此元素不会被显示。
list-item:将元素转换成列表。li的默认类型。
大部分块元素display属性值默认为block，其中列表li的默认值为list-item。
大部分内联元素的display属性值默认为inline,其中img,input，默认为inline-block（行内块元素）。
垂直居中
设置一个元素在一个容器中垂直居中，必须更改默认的display属性值为inline-block;
并加上同级元素（标尺）（同级元素[标尺]样式设置为vertical-align:middle;width:0;height:100%;display:inline-block;） 。
三个条件：
1：必须给容器（父元素）加上text-align:center;
2:必须给当前元素转成行内块元素（display:inline-block;）再给当前元素加上vertical-align:middle;
3：在当前元素的后面（没有回车）加上同级元素span;并对span进行vertical-align:middle;width:0;height:100%;display:inline-block
