zoukankan      html  css  js  c++  java
  • CSS 布局属性(display,float,clear,visibility,overflow,overflow-x,overflow-y)

    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 | box | inline-box | flexbox | inline-flexbox |flex | inline-flex

    默认值:inline

    适用于:所有元素

    继承性:无

    动画性:否

    计算值:指定值,除浮动,绝对定位和根元素外

    取值:

    none:
    隐藏对象。与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
    inline:
    指定对象为内联元素。
    block:
    指定对象为块元素。
    list-item:
    指定对象为列表项目。
    inline-block:
    指定对象为内联块元素。(CSS2)
    table:
    指定对象作为块元素级的表格。类同于html标签<table>(CSS2)
    inline-table:
    指定对象作为内联元素级的表格。类同于html标签<table>(CSS2)
    table-caption:
    指定对象作为表格标题。类同于html标签<caption>(CSS2)
    table-cell:
    指定对象作为表格单元格。类同于html标签<td>(CSS2)
    table-row:
    指定对象作为表格行。类同于html标签<tr>(CSS2)
    table-row-group:
    指定对象作为表格行组。类同于html标签<tbody>(CSS2)
    table-column:
    指定对象作为表格列。类同于html标签<col>(CSS2)
    table-column-group:
    指定对象作为表格列组显示。类同于html标签<colgroup>(CSS2)
    table-header-group:
    指定对象作为表格标题组。类同于html标签<thead>(CSS2)
    table-footer-group:
    指定对象作为表格脚注组。类同于html标签<tfoot>(CSS2)
    run-in:
    根据上下文决定对象是内联对象还是块级对象。(CSS3)
    box:
    将对象作为弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)
    inline-box:
    将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)
    flexbox:
    将对象作为弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)
    inline-flexbox:
    将对象作为内联块级弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)
    flex:
    将对象作为弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
    inline-flex:
    将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)

    clear:none | left | right | both

    默认值:none

    适用于:块级元素

    继承性:无

    动画性:否

    计算值:指定值

    取值:

    none:
    允许两边都可以有浮动对象
    both:
    不允许有浮动对象
    left:
    不允许左边有浮动对象
    right:
    不允许右边有浮动对象

    说明:

    该属性的值指出了不允许有浮动对象的边。请参阅float属性
    • 对应的脚本特性为clear

    visibility:visible | hidden | collapse

    默认值:visible

    适用于:所有元素

    继承性:有

    动画性:是

    计算值:指定值

    取值:

    visible:
    设置对象可视
    hidden:
    设置对象隐藏
    collapse:
    主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象,其作用等同于hidden。

    说明:

    设置或检索是否显示对象。display属性不同,此属性为隐藏的对象保留其占据的物理空间
    • 如果希望对象为可视,其父对象也必须是可视的。
    • 对应的脚本特性为visibility

    overflow<overflow-style>

    <overflow-style> = visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls |fragments

    默认值:visible

    适用于:块容器,伸缩盒容器,grid容器

    继承性:无

    动画性:否

    计算值:指定值

    取值:

    visible:
    对溢出内容不做处理,内容可能会超出容器。
    hidden:
    隐藏溢出容器的内容且不出现滚动条。
    scroll:
    隐藏溢出容器的内容,溢出的内容将以卷动滚动条的方式呈现。
    auto:
    当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。此为body对象和textarea的默认值。
    paged-x:
    TODO...(CSS3)
    paged-y:
    TODO...(CSS3)
    paged-x-controls:
    TODO...(CSS3)
    paged-y-controls:
    TODO...(CSS3)
    fragments:
    TODO...(CSS3)

    说明:

    复合属性。检索或设置对象处理溢出内容的方式。参阅overflow-xoverflow-y属性
    • overflow的效果等同于overflow-x + overflow-y
    • 对于table来说,假如table-layout属性设置为fixed,则td对象支持带有默认值为hidden的overflow属性。如果设为hidden,scroll或者auto,那么超出td尺寸的内容将被剪切。如果设为visible,将导致额外的文本溢出到右边或左边(视direction属性设置而定)的单元格。
    • 对应的脚本特性为overflow

    overflow-x<overflow-style>

    <overflow-style> = visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls |fragments

    默认值:visible

    适用于:块容器,伸缩盒容器,grid容器

    继承性:无

    动画性:否

    计算值:指定值

    取值:

    visible:
    对溢出内容不做处理,内容可能会超出容器。
    hidden:
    隐藏溢出容器的内容且不出现滚动条。
    scroll:
    隐藏溢出容器的内容,溢出的内容将以卷动滚动条的方式呈现。
    auto:
    当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。此为body对象和textarea的默认值。
    paged-x:
    TODO...(CSS3)
    paged-y:
    TODO...(CSS3)
    paged-x-controls:
    TODO...(CSS3)
    paged-y-controls:
    TODO...(CSS3)
    fragments:
    TODO...(CSS3)

    说明:

    检索或设置对象处理横向溢出内容的方式。参阅overflowoverflow-y属性
    • 对应的脚本特性为overflowX

    overflow-y<overflow-style>

    <overflow-style> = visible | hidden | scroll | auto | paged-x | paged-y | paged-x-controls | paged-y-controls |fragments

    默认值:visible

    适用于:块容器,伸缩盒容器,grid容器

    继承性:无

    动画性:否

    计算值:指定值

    取值:

    visible:
    对溢出内容不做处理,内容可能会超出容器。
    hidden:
    隐藏溢出容器的内容且不出现滚动条。
    scroll:
    隐藏溢出容器的内容,溢出的内容将以卷动滚动条的方式呈现。
    auto:
    当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。此为body对象和textarea的默认值。
    paged-x:
    TODO...(CSS3)
    paged-y:
    TODO...(CSS3)
    paged-x-controls:
    TODO...(CSS3)
    paged-y-controls:
    TODO...(CSS3)
    fragments:
    TODO...(CSS3)

    说明:

    检索或设置对象处理纵向溢出内容的方式。参阅overflowoverflow-x属性
    • 对应的脚本特性为overflowY
  • 相关阅读:
    Leetcode Spiral Matrix
    Leetcode Sqrt(x)
    Leetcode Pow(x,n)
    Leetcode Rotate Image
    Leetcode Multiply Strings
    Leetcode Length of Last Word
    Topcoder SRM 626 DIV2 SumOfPower
    Topcoder SRM 626 DIV2 FixedDiceGameDiv2
    Leetcode Largest Rectangle in Histogram
    Leetcode Set Matrix Zeroes
  • 原文地址:https://www.cnblogs.com/xiepeixing/p/4334556.html
Copyright © 2011-2022 走看看