文本溢出

1、文本溢出

<!-- 文本溢出属性 -->
<style>
    div{
        width: 300px;
        height: 400px;
        border: 1px solid #000;
        margin: 100px auto;
        overflow: auto /* 文本超出隐藏掉 */
    }
 </style>
<div>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</div>
<!-- 文本溢出属性 -->	
	overflow ：visible 	默认值 正常显示
	overflow ：hidden 	隐藏
	overflow ：scroll	滚动 表示文本溢出的时候显示滚动条，文本不溢出的时候显示滚动条的样式
	overflow ：auto		自动

2、省略号

<style>
    div{
        width: 200px;
        height: 100px;
        border: 1px solid #000;
        margin: 100px auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis /* 显示省略号 */
    }
</style>
<div>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</div>
<!-- 省略号 -->
单行文本显示省略号的四个条件
	容器必须要有宽高大小  width/height
	文本强制性的在一行显示 white-space:nowrap
	超出去的文本隐藏 overflow:hidden
	隐藏的文本变成省略号 text-overflow:ellipsis

2、元素类型的分类

元素类型分为：块级元素 行内元素 可变元素
1、块级元素:	div p h1~h6 ul li
	可以设置宽高大小，独占一行 上下排列
2、行内元素:	span i em b strong
	无法设置宽高 大小由自身内容决定 一行内逐个显示
3、行内块元素：input img
	可以设置大小 并且在一行内显示

注：
	行内块的对齐方式都是以基线对齐(基线:)
    解决基线对齐:vertical-align:top、bottom、middle

3、元素类型的转换

元素类型转换属性： display
	display: block; 		将其他元素类型转换为块元素 具有块元素的特点
	display: inline;		将其他元素类型转换为行内元素,具有行内元素的特点
	display: inlinr-block;	将其他元素类型转换为行内块元素了，具有行内块元素的特点
	display: list-item;		将其他元素类型转换为列表类型
	display: none;			直接删除html结构（隐藏）

4、图片居中 基线对齐

图片居中 	img
	原理：img是行内块元素 是以基线对齐
		 添加一个标签，给这个标签设置成行内块
		 两个行内块都设置vertical-align:middle;

拓展

自带边框的标签：	imput ht textarea select
常见的行内块元素：	img input	
常见的置换元素：	img input