文本溢出相关属性: 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{} 鼠标移入自己,改变自己