6.html文本溢出2

1.文本溢出

        属性overflow：

                值：visible默认值                                

                         hidden超出隐藏    

                        scroll滚动查看

                        auto自适应

 2.white-space       

                normal:默认值，多余空白会被浏览器忽略只保留一个;

                (了解)pre:空白会被浏览器保留;(了解)    

                pre-wrap︰保留—部分空白符序列，但是正常的进行换行;(了解)

                pre-line:合并空白符序列，但是保留换行符;(了解)  

                nowrap:文本不会换行，文本会在同—行上继续，直到遇到<br/>标签为止;(掌握) 

3.text-overflow

                clip:不显示省略号(...)，而是简单的裁切;

                ellipsis:当对象内文本溢出时，显示省略标记;(一般配合overflow:hidden)

4.元素类型:

                 块状元素，行内元素，行内块元素。

1.块元素的特点：

1:能设置宽高；

2:能正常设置内外边距

3:独占一行

4:矩形显示

5:通常作为容器

概念：A:块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，

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

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

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

2.内联元素的特点：

A:内联元素的表现形式是始终以行内逐个进行显示;

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

C:内联元素也会遵循盒模型基本规则，如可以定义

padding, border,margin,background等属性，但个别属性不能正确显示;(padding-top/bottom : ;margin-top/ bottom : ;)

2.inline-block (行内块元素)

设置一个元素在一个容器中垂直居中，必须更改默认的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