一、html元素分类
html元素根据自身的特征分为：块元素，内联元素，内联块元素三大类
1.块元素
常见块元素：div,p,ul,ol,li,dl,dt,dd,h1~h6,form等
a) 块元素默认宽度为100%，以块的形式显示为一个矩形区域
b) 块元素默认情况下独占一行，自上而下排列
c) 块元素可以设置宽度和高度及任意margin,padding,border等
d) 块元素可以作为一个容器容纳其他的块元素和内联元素
注：p标签只能嵌套内联元素，不能嵌套块元素
2.内联元素（行内元素）
常见内联元素：a,span,strong,b,em,i等
a) 内联元素默认情况下在一行逐个进行显示（横着排）
b) 内联元素默认不能设置宽度和高度，宽高是由内容撑开，也显示为一个矩形区域
c) 内联元素设置上下相关的一些属性不生效（上下padding，上下margin）
d) 内联元素可以嵌套内联元素，但是不建议嵌套块元素
注：a标签不能再次嵌套a
3.内联块元素（行内块元素）
常见的内联块元素：img,input,select,textarea等
a) 在一行逐个进行显示，横着排
b) 可以设置宽高及任意margin,padding,border值
二、元素类型转换
1.转换为块元素
display:block;
注：是大部分块元素的默认display属性值
2.转换为内联块元素
display:inline-block;
注：是img，input等这类型元素的默认display属性值
3.转换为内联元素
display:inline;
注：是a，span等这类型元素的默认display属性值
4.转换为li类型
display:list-item;
注：是li的默认display属性值
5.将元素隐藏不显示
display:none;
注：需要元素再次显示时，设置除none以外的其他值即可
注：给内联元素设置了float后，就可以设置宽高及任意margin,padding，border值
三、span应用
语法：<span></span>
注：a) 只有给span设置了样式后才会产生视觉上的变化
b) 当需要把一部分文字从一段文字中独立出来时就需要用到span
四、容器溢出
语法：overflow:visible|hidden|scroll|auto;
visible 默认值，溢出内容显示在容器框之外
hidden 溢出内容隐藏不显示
scroll 没有溢出显示默认滚动条，溢出时以滚动条的形式查看溢出内容
auto 自动检测，当有溢出时添加滚动条
五、垂直对齐方式
语法：vertical-align:baseline|top|middle|bottom;
baseline 默认值，基线对齐
top 顶部对齐
middle 中部对齐
bottom 底部对齐
注：vertical-align主要用来设置内联或内联块元素所在行的垂直对齐方式
六、单行文本省略号的设置
语法： width:value;
white-space:nowrap; 设置文本强制在一行显示
overflow:hidden; 溢出文本隐藏不显示
text-overflow:ellipsis; 显示省略号