CSS属性学习:(二)布局-Layout

displayfloatclearvisibilityoverflowoverflow-xoverflow-y

displayCSS3


类型: Layout

默认值: inline

取值: none | 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[CSS3] | box[CSS3] | inline-box[CSS3] | flexbox[CSS3] | inline-flexbox[CSS3] | flex[CSS3] | inline-flex[CSS3]

适用于: 所有元素

取值

  • 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)

demo

See the Pen NAQRKw by yrq110 (@yrq110) on CodePen.


float


类型: Layout

默认值: none

取值: left | right

适用于: 所有元素

取值

  • none:设置对象不浮动
  • left:设置对象浮在左边
  • right:设置对象浮在右边

demo

See the Pen WxVXdp by yrq110 (@yrq110) on CodePen.


clear


类型: Layout

默认值: none

取值: left | right | both

适用于: 块级元素

取值

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

demo

See the Pen VjoAyJ by yrq110 (@yrq110) on CodePen.


visibility


类型: Layout

默认值: visible

取值: hidden | collapse

适用于: 所有元素

取值

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

demo

See the Pen zBgPRL by yrq110 (@yrq110) on CodePen.


overflowCSS3


类型: Layout

默认值: visible

取值: hidden | scroll | auto | paged-x[CSS3] | paged-y[CSS3] | paged-x-controls[CSS3] | paged-y-controls[CSS3] | fragments[CSS3]

适用于: 块容器/伸缩盒容器/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)

demo

See the Pen akZQoE by yrq110 (@yrq110) on CodePen.


overflow-xCSS3


类型: Layout

默认值: visible

取值: hidden | scroll | auto | paged-x[CSS3] | paged-y[CSS3] | paged-x-controls[CSS3] | paged-y-controls[CSS3] | fragments[CSS3]

适用于: 块容器/伸缩盒容器/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)

demo

See the Pen RRXqbv by yrq110 (@yrq110) on CodePen.


overflow-yCSS3


类型: Layout

默认值: visible

取值: hidden | scroll | auto | paged-x[CSS3] | paged-y[CSS3] | paged-x-controls[CSS3] | paged-y-controls[CSS3] | fragments[CSS3]

适用于: 块容器/伸缩盒容器/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)

demo

See the Pen YWmRXd by yrq110 (@yrq110) on CodePen.


示例代码来自Joy Du

文章目录
  1. 1. displayCSS3
    1. 1.1. 取值
    2. 1.2. demo
  2. 2. float
    1. 2.1. 取值
    2. 2.2. demo
  3. 3. clear
    1. 3.1. 取值
    2. 3.2. demo
  4. 4. visibility
    1. 4.1. 取值
    2. 4.2. demo
  5. 5. overflowCSS3
    1. 5.1. 取值
    2. 5.2. demo
  6. 6. overflow-xCSS3
    1. 6.1. 取值
    2. 6.2. demo
  7. 7. overflow-yCSS3
    1. 7.1. 取值
    2. 7.2. demo
|