visibility 与 overflow

display@3

属性描述： 设置或获取对象是否及如何显示

版本变更： 是

语法模板：

display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in@3 | flex@3 | inline-flex@3

默认值： 由元素对象自身决定

属性值描述：

none：隐藏对象，与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间;

inline：指定对象为内联元素;

block：指定对象为块元素;

list-item：指定对象为列表项目;

inline-block：指定对象为内联块元素;

table：指定对象作为块元素级的表格，类同于html标签<table>;

inline-table：指定对象作为内联元素级的表格，类同于html标签<table>;

table-caption：指定对象作为表格标题，类同于html标签<caption>;

table-cell：指定对象作为表格单元格，类同于html标签<td>;

table-row：指定对象作为表格行，类同于html标签<tr>;

table-row-group：指定对象作为表格行组，类同于html标签<tbody>;

table-column：指定对象作为表格列，类同于html标签<col>;

table-column-group：指定对象作为表格列组显示，类同于html标签<colgroup>;

table-header-group：指定对象作为表格标题组，类同于html标签<thead>;

table-footer-group：指定对象作为表格脚注组，类同于html标签<tfoot>;


/***css3中添加的新属性***/
run-in：根据上下文决定对象是内联对象还是块级对象;

flex：将对象作为弹性伸缩盒显示，简称弹性盒子；

inline-flex：将对象作为内联块级弹性伸缩盒显示;

适用元素：

是否具有继承性： 否

是否具有动画性： 否

脚本接口： display

注意事项： 如果display设置为none，float及position属性定义将不生效，IE6,7只支持inline元素设置为inline-block，其它类型元素均不可以

---

---

visibility

属性描述： 设置或获取是否显示对象

版本变更： 否

语法模板：

visibility：visible | hidden | collapse|none

默认值： visibility

属性值描述：

visible：设置对象可视，占据空间；

hidden：设置对象隐藏（不可视），占据空间；

collapse：主要用来隐藏表格的行或单元格;

none：不绘制，不可视，不占据空间

**显示：**表示是否要绘制这个元素

**可视：**绘制后是否要看见

适用元素： 所有元素

是否具有继承性： 是

是否具有动画性： 是

脚本接口： visibility

**重点：**visible和hidden都占据空间，但display:none不占据空间

注意事项： 与display属性不同，此属性为隐藏的对象保留其占据的物理空间；collapse 与 hidden 作用相同，但是要注意区分语义

---

---

overflow

属性描述： 设置或获取对象处理溢出内容的方式，复合属性

版本变更： 否

语法模板：

overflow：<overflow-style>
<overflow-style> = visible | hidden | scroll | auto 

默认值：

属性值描述：

visible：对溢出内容不做处理，内容可能会超出容器;

hidden：隐藏溢出容器的内容且不出现滚动条;

scroll：隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现;

auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条，此为body对象和textarea的默认值;

适用元素： 块容器，flex容器，grid容器

是否具有继承性： 否

是否具有动画性： 否

**脚本接口： ** overflow

注意事项： 对于table来说，假如table-layout属性设置为fixed，则td对象支持带有默认值为hidden的overflow属性。如果设为hidden，scroll或者auto，那么超出td尺寸的内容将被剪切。如果设为visible，将导致额外的文本溢出到右边或左边（视direction属性设置而定）的单元格

---

overflow-x

属性描述： 设置或获取对象处理横向溢出内容的方式

版本变更： 否

语法模板：

overflow-x：<overflow-style>
<overflow-style> = visible | hidden | scroll | auto 

默认值：

属性值描述：

visible：对溢出内容不做处理，内容可能会超出容器;

hidden：隐藏溢出容器的内容且不出现滚动条;

scroll：隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现;

auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条，此为body对象和textarea的默认值;

适用元素： 块容器，flex容器，grid容器

是否具有继承性： 否

是否具有动画性： 否

**脚本接口： ** overflowX

---

overflow-y

属性描述： 设置或获取对象处理横向溢出内容的方式

版本变更： 否

语法模板：

overflow-y：<overflow-style>
<overflow-style> = visible | hidden | scroll | auto 

默认值：

属性值描述：

visible：对溢出内容不做处理，内容可能会超出容器;

hidden：隐藏溢出容器的内容且不出现滚动条;

scroll：隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现;

auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条，此为body对象和textarea的默认值;

适用元素： 块容器，flex容器，grid容器

是否具有继承性： 否

是否具有动画性： 否

**脚本接口： ** overflowY