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设置为nonefloatposition属性定义将不生效,IE6,7只支持inline元素设置为inline-block,其它类型元素均不可以







visibility

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

版本变更:

语法模板:

visibility:visible | hidden | collapse|none

默认值: visibility

属性值描述:

visible:设置对象可视,占据空间;

hidden:设置对象隐藏(不可视),占据空间;

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

none:不绘制,不可视,不占据空间

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

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

适用元素: 所有元素

是否具有继承性:

是否具有动画性:

脚本接口: visibility

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

注意事项:display属性不同,此属性为隐藏的对象保留其占据的物理空间;collapsehidden 作用相同,但是要注意区分语义







overflow

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

版本变更:

语法模板:

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

默认值:

属性值描述:

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

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

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

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

适用元素: 块容器,flex容器,grid容器

是否具有继承性:

是否具有动画性:

**脚本接口: ** overflow

注意事项: 对于table来说,假如table-layout属性设置为fixed,则td对象支持带有默认值为hiddenoverflow属性。如果设为hiddenscroll或者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

猜你喜欢

转载自blog.csdn.net/Sandersonia/article/details/132262222