十二星座之 魔羯星座(12月22日～1月20日)
自动强行换行word-break:break-all和word-wrap:break-word的区别
在CSS中，有两个属性，都是与元素显示相关的，一个是大家熟悉的visibility，另一个则是display（你可能已经见到过display:block或类似的用法）。但是我发觉我把他们混淆了，所以今天特此发文比较一下，希望对大家有用。
visibility用于设置元素是否可见或不可见。
可选属性值：inherit | visible | hidden | collapse
- inherit: 继承上一级父对象的可见性。
- visible: 元素是可见的。
- hidden: 元素是不可见的。即使不可见的元素也会占据页面上的空间。请使用 "display" 属性来创建不占据页面空间的不可见元素。
- collapse: 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
visibility这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间，不过可以完全不可见。值 collapse 在表中用于从表布局中删除列或行。
此CSS属性也可以通过Javascript动态地改变。如：obj.style.visibility="visible" | "hidden" | "collapse"。
display用于设置如何显示元素。
可选属性值：none | block | inline | inline-block | list-item | run-in | table | inline-table | ...
- none 此元素不会被显示。
- block 此元素将显示为块级元素，此元素前后会带有换行符。
- inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
- inline-block 行内块元素。（CSS2.1 新增的值）
- list-item 此元素会作为列表显示。
- run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
- table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
- inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
- table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
- table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
- table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
- table-row 此元素会作为一个表格行显示（类似 <tr>）。
- table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
- table-column 此元素会作为一个单元格列显示（类似 <col>）
- table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
- table-caption 此元素会作为一个表格标题显示（类似 <caption>）
display这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。
此CSS属性也可以通过Javascript动态地改变。如：obj.style.display="none" | "block" | "inline" | ...
作为总结，以下两句话我想对于想彻底隐藏一些元素的朋友非常有用！
display:none 隐藏对象。隐藏对象其物理空间。 <-想彻底隐藏的朋友应该选用这个。
visibility:hidden 隐藏对象。保留其占据的物理空间。
加入收藏！
