文本溢出相关属性

95 阅读2分钟

文本溢出相关属性: overflow:; visible 默认值 hidden 超出隐藏 auto 自适应滚动查看 scroll 滚动查看

	white-space:文本格式;
		normal 默认值
		pre 源格式输出
		pre-line 源格式输出,保留换行
		pre-wrap 源格式输出,保留换行和缩进
		nowrap 强制不换行,遇到<br> 就换行

	text-overflow:是否显示省略号;
		clip 裁剪,默认值
		ellipsis 显示省略号
		【注】
			只针对单行且内容超出的情况下有有效
			省略号三部曲:
				white-space:nowrap; 强制不换行
				overflow:hidden; 超出隐藏
				text-overflow:ellipsis; 显示省略号
				【注】没有顺序要求	

元素类型:
	块级元素(block): div h1 p ul ol li dl dt dd....
		1: 独占一行
		2: 能设置宽高
		3: 矩形显示
		4: 能正常设置内外边距
		5: 通常用来搭建页面结构

	行级元素(inline):span a u i em b strong...
		1: 在一行显示
		2: 不能设置宽高
		3: 非矩形显示(除非是最小单位)
		4: 不能正常设置垂直方向的内外边距
		5: 通常不用来搭建页面结构

	行块级元素(inline-block):img input
		1: 在一行显示
		2: 能设置宽高
		3: 矩形显示
		4: 能正常设置内外边距
		5: 通常用来展示内容

元素类型转换:
	display:;
		block 转为块级元素(显示)
		inline 转为行级元素
		inline-block 转为行块级元素

		none 隐藏

行块级元素的垂直对齐方式
	vertical-align:垂直对齐方式;
		top	 顶部对齐
		middle 垂直居中
		bottom 底部对齐
		【注】执政对行块级元素有效

伪类选择器:
	:link{} 未访问状态
	:visited{} 访问过后状态
	:hover{} 鼠标悬停状态
	:active{} 鼠标按下状态
	【注】
		主要针对a的文本颜色的设置
		有顺序要求: LoVe - HAte

	.box1:hover .box2{} 鼠标移入自己,改变后代
	.box1:hover{} 鼠标移入自己,改变自己