CSS布局属性

2022-10-02 08:30:25

布局

display

语法：

默认值：inline

适用于：所有元素

继承性：无

动画性：否

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

媒体：视觉

取值：

none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline：指定对象为内联元素。
block：指定对象为块元素。
list-item：指定对象为列表项目。
inline-block：指定对象为内联块元素。（CSS2）

table：指定对象作为块元素级的表格。类同于html标签（CSS2）

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

（CSS2）

table-caption：指定对象作为表格标题。类同于html标签

table-cell：指定对象作为表格单元格。类同于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，其它情况为指定值；
当一个元素是绝对定位元素或者定义了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。

CSS布局属性

踩

(0)

评论一句话评论（0）

分享档案

码农公寓

布局

display

语法：

取值：

说明：

float

语法：

取值：

说明：

clear

语法：

取值：

说明：

visibility

语法：

取值：

说明：

overflow

简写属性语法：

分析独立属性语法：

取值：

说明：

相关文章