单行文本溢出隐藏，设置空白空间，设置内容超出，css元素类型分为两类，元素类型的转换

单行文本溢出隐藏，设置空白空间，设置内容超出，css元素类型分为两类，元素类型的转换

单行文本溢出隐藏一共四步

1.设置范围 width
2.设置内容强制不换行
white-space:
pre 不换行识别多个空格
nowrap 不换行，多个空格识别一个
3.隐藏超出的内容 overflow：hidden
4.省略的内容转换成省略号 text-overflow：ellipsis

设置空白空间

white-space
normal 自动换行，多个空格识别一个，默认值
pre 强制不换行，回车多个空格可以识别
pre-wrap 回车和空格都能识别
pre-line 只能识别回车
nowrap 强制不换行多个空格识别一个

设置内容超出

overflow
visible 默认值
hidden 超出的内容隐藏
scroll 不管内容是否超出都有滚动条
auto 只有内容超出才有滚动条
inherit 继承父元素的overflow值（不常用）
overflow-x:hidden auto 默认值
overflow-y:hidden auto默认值
text-overflow:
clip 把隐藏的内容裁掉
ellipsis 把隐藏的内容转换成省略号

css元素分为两类

块元素，内联元素（行内元素）
行内块元素（可变，置换）横排排列可设宽高
自动换行的标签（块元素）
标题h1~h6，p，div, hr, dl, dt,dd,ul,ol,li,form,table,tr,td
1.块元素可以设置宽高
2.上下排列，独占一行，可以自动断行
3.块元素可以嵌套块和内联元素（有几个特殊只能嵌套内联，p,h1~h6,dt)
4.可以设置四个方向内外边距
5.如果块元素不设置宽度，浮动后，宽度由内容撑开
不会自动换行（行内元素/内联元素）
em，i，b, strong, u,sub,sup,span,a,img,input,textarea多行文本输入，select下拉列表，label，提示信息
1.设置不了宽高
2.水平排列，一行可以显示多个内容，不会自动换行
3.内联元素只能嵌套内联元素
4.只能设置水平方向（左右的margin和左右的padding）的内外边距
5.内联元素浮动后，可以设置宽高，也可以设置四个方向的内外边距
行内块元素（置换元素）
img，input，text area，select
1.可以设置宽高
2.水平排列，一行可以显示多个内容，不会自动换行
3.行内块元素只能嵌套内联元素
4.可以设置四个方向内外边距

元素类型的转换

转换块元素
display：block
转换内联元素
display：inline
转换成行内块元素
display：inline-block
设置元素隐藏（完全隐藏，不占位）
display: none
补充：设置透明度
opacity：0 占位隐藏
li的display值是list-item

：hover的两种用法
1.鼠标移入自己改变自己的样式
2.鼠标移入自己改变自己后代的样式

.nav a:hover b{
				display: none;
}
.nav a:hover i{
				display: inline;
}
		

注意
b和i必须是a的后代元素