文本溢出与元素类型

1.文本溢出：overflow: visible/hidden/scroll/auto/inherit;

visible:默认值，内容不会被修剪，会呈现在元素框之外；

hidden：内容会被修剪，并且其余内容是不可见的；

scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;

auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;

inherit：规定应该从父元素继承overflow属性的值。

2.省略号

text-overflow: clip  / ellipsis

clip：不显示省略号（...），而是简单的裁切;

ellipsis：当对象内文本溢出时，显示省略标记

注意：

text-overflow属性仅是：当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：

1）容器宽度：width：value；（px、%，都可以）

2）强制文本在一行内显示:white-space：nowrap;

3）溢出内容为隐藏：overflow：hidden；

4）溢出文本显示省略号：text-overflow：ellipsis;                      

注：必须是单行文本才能设置本文溢出！！！

3.元素的分类：（块级元素，行内元素，行内块元素）

块级元素：例如：

     div -最常用的块级元素

     dl - 和dt-dd 搭配使用的块级元素

     form - 交互表单

     h1 -h6- 大标题

     hr - 水平分隔线

     ol – 有序列表

     p - 段落

     ul - 无序列表

     fieldset - 表单字段集

1）块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，

2）默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列。

3）块状元素都可以定义自己的宽度和高度。

4）块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子。

行内元素：例如：

     a –超链接                              

     br - 换行                           

     i - 斜体

     em - 强调                                      

     label - 表单标签            

     span - 常用内联容器，定义文本内区块

     strong - 粗体强调

     textarea - 多行文本输入框

     u - 下划线

     select - 项目选择

A、行内元素的表现形式是始终以行内逐个进行显示；

B、行内元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度由内容来确定，它只能根据所包含内容的高度，最小内容单元也会呈现矩形形状；

C、行内元素也会遵循盒模型基本规则，如可以定义padding,border,margin,background等属性，但个别属性不能正确显示;(margin-top/bottom:;)

行内块元素 ：可以设置宽高、在一行内显示

例如：img  -图片

           input  -输入框

4.元素类型的转换：block属性和属性值

 属性值：block/inline/inline-block/none/flex/list-item/table-header-group/table-footer-group

作用：该属性设置或检索对象元素应该生成的盒模型的类型

各属性值的作用：

1)block块状、显示：类似在元素后面添加换行符，也就是说其他元素不能在其后面并列显示。(将元素转为块状元素，使该元素拥有块状元素的特点；)

2)inline内联、显示：在元素后面删除换行符，多个元素可以在一行内并列显示。（元素转换为内联元素）

3)当元素设置了float属性后，就相当于给该元素加了display:block;声明；但是脱离文档流

4)inline-block行内块元素显示：元素的内容以块状显示，行内的其他元素显示在同一行。（只有这一个元素类型支持vertical-align属性）img,input(行内块元素)。

5)none 此元素不会被显示。

6)list-item:将元素转换成列表。li的默认类型。

5.元素的垂直居中：

设置一个元素在一个容器中垂直居中，必须更改默认的display属性值为inline-block;

并加上同级元素（标尺）（同级元素[标尺]样式设置为vertical-align:middle;width:0;height:100%;display:inline-block;） 。

三个条件：

1：必须给容器（父元素）加上text-align:center;

2:必须给当前元素转成行内块元素（display:inline-block;）再给当前元素加上vertical-align:middle;

3：在当前元素的后面（没有回车）加上同级元素span;并对span进行vertical-align:middle;width:0;height:100%;display:inline-block。

根据css显示分类，XHTML元素被分为 三种类型:块状元素，内联元素，可变元素