溢出和剪裁，可见性

内容溢出和剪裁

如果一个元素的内容对于元素大小来说过大，就有可能溢出元素本身。对于此情况，有一些解决办法可选。

溢出 overflow

• 值
  • visible(默认):内容在元素框外可见。一般会导致内容超出其自己的元素框，但不会改变框的形状
  • scroll:溢出部分通过滚动条查看
  • hidden:溢出部分无法查看
  • auto:一般只有必要时出现滚动条
• 适用于所有元素
• 有继承性

剪裁 clip

如果一个绝对定位元素的内容溢出其内容框，而overflow设置为要求剪裁该内容，通过使用属性 clip 可以改变剪裁区域的形状。

• 值
  • auto(默认):表示该元素内容不应剪裁
  • rect(top,right,bottom,left):定义矩形剪裁形状。只改变显示内容的区域形状，不改变内容区的形状
    注意：其值不是边偏移，而是距离元素左上角的距离。如需要涵盖左上角20*20像素的正方形，则rect(0,20px,20px,0)
• 适用于绝对定位元素
• 无继承性
• 取值：rect(...)值允许为长度值（可为负值）或auto，auto表示将剪裁边界设置为适当的内容边界

元素可见性 visibility

• 取值
  • visible（默认）：可见
  • hidden：不可见，但会影响文档布局，就像它还是可见的一样
    注：与display:none 有区别。后者不仅不显示，而且会从文档中删除，不影响文档布局
  • collapse：表显示中使用；对于非表元素，与hidden同含义
• 应用于所有元素
• 有继承性