内容溢出和剪裁
如果一个元素的内容对于元素大小来说过大,就有可能溢出元素本身。对于此情况,有一些解决办法可选。
溢出 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同含义
- 应用于所有元素
- 有继承性