zoukankan      html  css  js  c++  java
  • CSS布局属性

    布局

    display

    语法:

    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标签(CSS2)
    • inline-table: 指定对象作为内联元素级的表格。类同于html标签
    • (CSS2)
    • table-caption: 指定对象作为表格标题。类同于html标签
    • (CSS2)
    • table-row-group: 指定对象作为表格行组。类同于html标签
    • (CSS2)
    • table-column: 指定对象作为表格列。类同于html标签
    • (CSS2)
    • table-column-group: 指定对象作为表格列组显示。类同于html标签
    • (CSS2)
    • table-header-group: 指定对象作为表格标题组。类同于html标签
    • (CSS2)
    • table-footer-group: 指定对象作为表格脚注组。类同于html标签
    • (CSS2)
    • run-in: 根据上下文决定对象是内联对象还是块级对象。(CSS3)
    • box: 将对象作为弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)
    • inline-box: 将对象作为内联块级弹性伸缩盒显示。(伸缩盒最老版本)(CSS3)
    • flexbox: 将对象作为弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)
    • inline-flexbox: 将对象作为内联块级弹性伸缩盒显示。(伸缩盒过渡版本)(CSS3)
    • flex: 将对象作为弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
    • inline-flex: 将对象作为内联块级弹性伸缩盒显示。(伸缩盒最新版本)(CSS3)
    • 说明:

      设置或检索对象是否及如何显示。

      • 如果display设置为none,float及position属性定义将不生效;
      • 如果position既不是static也不是relative或者float不是none或者该元素是根元素,当display: inline-table时,display的计算值为table;当display: inline | inline-block | run-in | table-*系时,display的计算值为block,其它情况为指定值;
      • 对应的脚本特性为display

      float

      语法:

      float:none | left | right

      默认值:none

      适用于:所有元素

      继承性:无

      动画性:否

      计算值:指定值

      媒体:视觉

      取值:

      • none: 设置元素不浮动
      • left: 设置元素浮在左边
      • right: 设置元素浮在右边

      说明:

      定义了元素向左或者向右浮动放置。

      • 如果float不是none,当display: inline-table时,display的计算值为table;当display: inline | inline-block | run-in | table-*系时,display的计算值为block,其它情况为指定值;
      • 当一个元素是绝对定位元素或者定义了displaynone时,float定义不生效。
      • 对应的脚本特性为styleFloat(IE)或cssFloat(非IE)。(注意这里为styleFloat或cssFloat,而不是float)

      clear

      语法:

      clear:none | left | right | both

      默认值:none

      适用于:块级元素

      继承性:无

      动画性:否

      计算值:指定值

      媒体:视觉

      取值:

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

      说明:

      定义了一个元素是否可以放置在它之前的浮动元素旁边,或者必须向下移动在新行中放置。

      • 当一个元素定义了clear值不为none时,可以被用来清除其之前的浮动元素对自身的影响(不同的取值,对应不同方向的浮动)。
      • 对应的脚本特性为clear

      visibility

      语法:

      visibility:visible | hidden | collapse

      默认值:visible

      适用于:所有元素

      继承性:有

      动画性:是

      计算值:指定值

      媒体:视觉

      取值:

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

      说明:

      定义了元素是否可见。与display属性不同,visibility会为隐藏的元素保留其占据的物理空间

      • 如果希望某个元素为可见,其父元素也必须是可见的。
      • 对应的脚本特性为visibility

      overflow

      简写属性语法:

      overflow:visible | hidden | scroll | auto | clip

      默认值:看每个独立属性

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

      继承性:无

      动画性:否

      计算值:看每个独立属性

      媒 体:视觉

      分析独立属性语法:

      overflow-*:visible | hidden | scroll | auto | clip

      overflow-* = overflow-x,overflow-y

      默认值:visible

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

      继承性:无

      动画性:否

      计算值:指定值,除了当overflow-x,overflow-y之一设置为非 visible时另一个属性会自动将默认值visible计算为auto

      媒 体:视觉

      取值:

      • visible: 对溢出内容不做处理,内容可能会超出容器。
      • hidden: 隐藏溢出容器的内容且不出现滚动条。
      • scroll: 隐藏溢出容器的内容,溢出的内容可以通过滚动呈现。
      • auto: 当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。textarea元素的overflow默认值就是auto
      • clip: 与hidden一样,clip也被用来隐藏溢出容器的内容且不出现滚动条。不同的地方在于,clip是一个完全禁止滚动的容器,而hidden仍然可以通过编程机制让内容可以滚动。

      说明:

      定义了元素处理溢出内容的方式。

      • overflow的效果等同于overflow-x + overflow-y

        举个例子:

        .demo {
        	overflow: hidden;
        }
        等同于:
        .demo {
        	overflow-x: hidden;
        	oveflow-y: hidden;
        }
        
      • 当块级元素定义了overflow属性(包括overflow-xoverflow-y)值为非 visibile时,将会为它的内容创建一个新的块格式化上下文(BFC)。

      • 对于table元素来说,假如其table-layout属性设置为fixed,则tdth元素支持将overflow设为hiddenscrollauto,此时超出单元格尺寸的内容将被剪切。如果设为visible,将导致额外的文本溢出到右边或左边(视direction属性设置而定)的单元格。

      • overflow-x属性用于指定元素水平方向上的内容溢出时的处理方式,overflow-y属性用于指定元素垂直方向上的内容溢出时的处理方式。

      • overflow-x,overflow-y中任意一个属性值的定义为非 visible时,另一个属性会自动将默认值visible计算为auto

        举个例子:

        .demo {
        	overflow-x: hidden;
        }
        等同于:
        .demo {
        	overflow-x: hidden;
        	oveflow-y: auto;
        }
        
      • 对应的脚本特性分别为:overflow, overflowX, overflowY

    • 相关阅读:
      通过Asp.Net MVC的区域功能实现将多个MVC项目部署
      对初步创业的软件企业的思考
      白色恋人
      ASP.NET中动态控制RDLC报表
      什么时候该用委托,为什么要用委托,委托有什么好处....
      asp.net mvc 3
      Salesforce多租户架构
      很有用的系统命令和一些技巧
      产品设计
      RDLC报表部署及MVC部署 所需dll
    • 原文地址:https://www.cnblogs.com/lx-pricking/p/13193067.html
    • Copyright © 2011-2022 走看看
      (CSS2)
    • table-cell: 指定对象作为表格单元格。类同于html标签
    • (CSS2)
    • table-row: 指定对象作为表格行。类同于html标签