CSS快速学习5：文本溢出和XHTML元素分类

文本溢出

1.溢出属性（容器的）

overflow:visible/hidden(隐藏)/sroll/auto(自动）/inherit;

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

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

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

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

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

2.空白空间

white-space:normal/pre/nowrap/pre-wrap /pre-line /inherit

该属性用来设置如何处理元素内的空白；

pre：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。

nowrap:强制在同一行内显示所有文本，直到文本结束或者遭遇br对象；

normal：默认处理方式。

pre-wrap：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。 (css2.1新增)

pre-line:保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。 (css2.1新增)

inherit：规定应该从父元素继承White-space属性的值；(ie浏览器都不支持此属性值)

3.文本溢出

text-overflow: clip  /  ellipsis

取值：

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

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

说明：

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

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

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

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

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

多行文本出现省略号

1、 WebKit浏览器或移动端的扩展CSS，只对Webkit有效

2、 JavaScript 方案

3、 :after选择器 p:after {content:”…”;}

 

XHTML元素分类

根据css显示分类，XHTML元素被分为三种类型:

块状元素

内联元素

可变元素

 

1、块状元素（block element） 

1）块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，常用的块状元素包扩div,dl,dt,dd,ol,ul,fieldset,（h1-h6）,p,form,hr,iframe,colgroup,col,table,tr,td,等；

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

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

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

2、内联元素（inline element）（或是行内元素）

1) 常见的内联元素如：a,span,i,em,strong,b等

2) 内联元素的表现形式是始终以行内逐个进行显示；

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

4)内联元素也会遵循盒模型基本规则，如可以定义padding,border,margin,background等属性，但个别属性不能正确显示;

3、可变元素

需要根据上下文关系确定该元素是块元素或者内联元素。

applet - java applet 
button - 按钮 
del - 删除文本 
iframe - inline frame 
ins - 插入的文本 
map - 图片区块(map) 
object - object对象 
script - 客户端脚本

 4、元素类型的转换

盒子模型可通过display属性来改变默认的显示类型

 

元素类型的转换

display属性与属性值 (18个属性值)

属性值：block/inline/inline-block/none/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的默认类型。

 

块级元素(block element)

div -最常用的块级元素

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

form - 交互表单

h1 -h6- 大标题

hr - 水平分隔线

ol - 排序表单

p - 段落

ul - 非排序列表

fieldset - 表单字段集

colgroup-col - 表单列分组元素

table-tr-td  表格及行-单元格

pre - 格式化文本  

内联元素(inline element)

a - 锚点                              b - 粗体(不推荐)                            

br - 换行                             i - 斜体

em - 强调                          font - 字体设定(不推荐)    

img - 图片                         input - 输入框               

label - 表格标签                  

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

strong - 粗体强调

sub - 下标   

sup - 上标

textarea - 多行文本输入框

 u - 下划线