博客主要介绍了CSS中overflow相关属性。包括overflow属性在内容溢出元素框时的表现及属性值；overflow-x属性针对元素内容区左右边缘溢出的处理及对应属性值；overflow-y属性针对元素内容区顶部和底部边缘溢出的处理及属性值。
1. overflow
如果内容溢出一个元素的框，会发生什么
属性值：overflow-x: visible|hidden|scroll|auto|inherit;
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
2. overfloe-x
如果它溢出了元素的内容区是否剪辑左/右边缘内容
属性值：overflow-x: visible|hidden|scroll|auto|no-display|no-content;
| 值 | 描述 |
|---|---|
| visible | 不裁剪内容，可能会显示在内容框之外。 |
| hidden | 裁剪内容 - 不提供滚动机制。 |
| scroll | 裁剪内容 - 提供滚动机制。 |
| auto | 如果溢出框，则应该提供滚动机制。 |
| no-display | 如果内容不适合内容框，则删除整个框。 |
| no-content | 如果内容不适合内容框，则隐藏整个内容。 |
3. overflow-y
如果它溢出了元素的内容区是否剪辑顶部/底部边缘内容。
属性值：overflow-y: visible|hidden|scroll|auto|no-display|no-content;
| 值 | 描述 |
|---|---|
| visible | 不裁剪内容，可能会显示在内容框之外。 |
| hidden | 裁剪内容 - 不提供滚动机制。 |
| scroll | 裁剪内容 - 提供滚动机制。 |
| auto | 如果溢出框，则应该提供滚动机制。 |
| no-display | 如果内容不适合内容框，则删除整个框。 |
| no-content | 如果内容不适合内容框，则隐藏整个内容。 |
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
