HTML中的一些样式设置,似乎是很老式的设置啊

_________________________________________________________________
<img style="float:right; padding-right:10px"    src="back_off.gif"    name="backBtn" id="backBtn" alt="BackButton"    border="0" /> 

 

<table width="80%" style="table-layout: fixed"></table>

 

<table name="xx" style="border:1px solid black;" width="90%" cellpadding="0px">

 

<td width="30%" align="left" style="word-break: break-word;"></td>

 

<td style="text-align:justify;text-justify:inter-word;"></td>

 

<textarea style="resize: none;" cols="90" rows="8" readonly="readonly"> xx </textarea>

 

_________________________________________________________________

自动换行 word-break:break-all   和   word-wrap:break-word

 

word-break:break-all  和  word-wrap:break-word都是能使其容器如DIV的内容自动换行。

 

 语法： word-break : normal | break-all | keep-all 

 参数： 

 normal : 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行

 break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本 

 keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本 

 

 语法： word-wrap : normal | break-word 

 参数： 

 normal : 允许内容顶开指定的容器边界 

 break-word : 内容将在边界内换行。如果需要，词内换行（word-break）也行发生

 示例： div { word-wrap: break-word; }

 说明：设置或检索当当前行超过指定容器的边界时是否断开转行。

 

它们的区别就在于：

1,word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。

 

2,word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

 

3,word-break:break-all 支持版本：IE5以上 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。 

  

4, WORD-WRAP:break-word 支持版本：IE5.5以上 内容将在边界内换行。如果需要，词内换行( word-break )也将发生。表格自动换行，避免撑开。 

 

建议：

word-break 用3C检测会显示问题的，导致百度快照也会出问题-这个属性OPERA FIREFOX 浏览器也不支持 

word-break属性可以用white-space:normal;来代替，这样在FireFox和IE下就都能正确换行，而且要注意，单词间的空格不能用" "来代替，不然不能正确换行。

 

_________________________________________________________________

语法： table-layout : auto | fixed 

参数： auto : 默认的自动算法。

布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢 

fixed : 固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关

说明：设置或检索表格的布局算法。对应的脚本特性为tableLayout。

_________________________________________________________________ 

 overflow-y:hidden是什么

overflow-x 水平溢出

overflow-y 垂直溢出

呈现的效果是怎么样的？

 

overflow-x:hidden '表示没有水平滚动条

overflow-y:hidden '表示没有垂直滚动条

overflow-y:auto;

scroll:no   或    overflow-x:hidden;  overflow-y:hidden  或  overflow:hidden '让浏览器窗口永远不出现滚动条

 

基本语法overflow-x : visible | auto | hidden | scroll 

语法取值

visible  :? 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值，

             对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效 

auto     :? 在必需时对象内容才会被裁切或显示横向滚动条 

hidden   :? 不显示超过对象尺寸的内容 

scroll   : ? 总是显示横向滚动条 

使用说明

检索或设置当对象的内容超过其指定宽度时如何管理内容。

所有对象的默认值是 visible ，除了 textarea 对象和 body 对象的默认值是 auto 。

 - textarea 对象此属性值为 hidden 将隐藏其滚动条。

 - table 来说，假如 table-layout 属性设置为 fixed ，则 td 对象支持带有默认值为 hidden 的 overflow 属性。    

       如果设为 scroll 或者 auto ，那么超出 td 尺寸的内容将被剪切。

       如果设为 visible ，将导致额外的文本溢出到右边或左边（视 direction 属性设置而定）的单元格。自IE5开始，此属性在MAC平台上可用。自IE6开始，当你使用 !DOCTYPE 声明指定了 standards-compliant 模式，此属性可以应用于 html 对象。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为 overflowX 。 

代码示例

div { overflow-x: scroll; height: 100px; width: 100px; }

_________________________________________________________________

语法：resize：none | both | horizontal | vertical

默认值：none

适用于：所有设置了overflow除了visible之外的元素

继承性：无

取值：

none：不允许用户调整元素大小。

both：用户可以调节元素的宽度和高度。

horizontal：用户可以调节元素的宽度

vertical：用户可以调节元素的高度。

_________________________________________________________________