overflow,clip,visibility 溢出和剪裁以及可见性

  • Post author:
  • Post category:其他


overflow

出于某种原因,一个元素固定为某个特定大小,但内容在元素中放不下。此时可以利用overflow属性来控制这种情况。

值: visible(初始值) | hidden | scroll | auto |

当为默认值visible时,元素的内容在元素框之外也可见,一般会导致内容超出其自己的元素框,但不会改变框的形状。

当设置为scroll,元素的内容会在元素框的边界处剪裁,溢出的内容无法看到,不过在Web浏览器中会使用一个滚动条(或者类似的东西)来访问内容而不会改变元素本身的形状。

如果被设置成hidden,元素的内容会在元素框的边界处剪裁,不过不会提供滚动条,用户也就无法访问被剪裁的部分的内容

内容剪裁

通过使用属性clip可以改变剪裁区域的形状

clip: rect(top,right,bottom,left)

rect(…)的值不是边偏移,而是距元素左上角的距离

元素可见性 visibility

除了溢出和剪裁,还可以控制整个元素的可见性。

值: visible(初始值) | hidden | collapse |

如果元素设置为visibility:visible,当然它是可见的。如果元素设置为visibility:hidden,则处于不可见状态,但是元素还是会影响文档的布局,它原本出现的位置空在那里,只是我们不可见。visibility:collapse值在CSS表显示中使用,如果用于非表元素,则与hidden含义相同