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标签
• inline-table： 指定对象作为内联元素级的表格。类同于html标签
（CSS2）
• table-caption： 指定对象作为表格标题。类同于html标签
• table-row-group： 指定对象作为表格行组。类同于html标签
• table-column： 指定对象作为表格列。类同于html标签
• table-column-group： 指定对象作为表格列组显示。类同于html标签
• table-header-group： 指定对象作为表格标题组。类同于html标签
• table-footer-group： 指定对象作为表格脚注组。类同于html标签
• 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，其它情况为指定值；
• 当一个元素是绝对定位元素或者定义了display为none时，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-x与overflow-y）值为非 visibile时，将会为它的内容创建一个新的块格式化上下文（BFC）。

• 对于table元素来说，假如其table-layout属性设置为fixed，则td、th元素支持将overflow设为hidden、scroll或auto，此时超出单元格尺寸的内容将被剪切。如果设为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。

posted @ 2020-06-25 21:42  无法起名的码农  阅读( ...)  评论( ...)  编辑  收藏
刷新评论 刷新页面 返回顶部
Copyright © 2020 无法起名的码农
Powered by .NET Core on Kubernetes
（CSS2） （CSS2） （CSS2） （CSS2） （CSS2） （CSS2） （CSS2）

（CSS2）

table-cell： 指定对象作为表格单元格。类同于html标签

（CSS2） table-row： 指定对象作为表格行。类同于html标签