块元素，内联元素，内联块元素三大类和span应用，容器溢出垂直对齐方式、单行文本省略号的设置

一、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;    显示省略号