css样式之overflow&overflow-x&overflow-yoverflowoverflow-xoverflow-yoverflow-x&overflow-y

83 阅读 0 评论 55 点赞

我是靠谱客的博主自信招牌，最近开发中收集的这篇文章主要介绍css样式之overflow&overflow-x&overflow-yoverflowoverflow-xoverflow-yoverflow-x&overflow-y，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

overflow&overflow-x&overflow-y

overflow
- 属性值
overflow-x
- 属性值
overflow-y
- 属性值
overflow-x&overflow-y

overflow

<html>
<head>
<style type="text/css">
div {
background-color: #ccc;
width: 80px;
height: 80px;
overflow: visible;
}
</style>
</head>
<body>
<div>
这个属性定义溢出元素内容区的内容会如何处理。
</div>
</body>
</html>

属性值

overflow: visible;/*默认值，内容全部显示，溢出部分在元素外显示*/
overflow: scroll;/*不管会不会溢出都会显示滚动条，溢出部分滚动处理*/
overflow: auto;/*溢出会显示滚动条，不溢出正常显示*/
overflow: hidden;/*溢出会显示部分内容，溢出部分不再显示*/
overflow: inherit;/*继承父元素的overflow属性*/

overflow-x

<html>
<head>
<style type="text/css">
div {
background-color: #ccc;
width: 80px;
height: 80px;
overflow-x: visible;
}
</style>
</head>
<body>
<div>
<p style="width: 100px">这个属性定义对溢出元素内容区的内容做左右边缘裁剪。</p>
</div>
</body>
</html>

属性值

overflow-x: visible;/*默认值，溢出显示在元素外边*/
overflow-x: hidden;/*x方向溢出不显示，y方向滚动*/
overflow-x: scroll;/*x和y方向滚动*/
overflow-x: auto;/*x和y方向滚动*/
overflow-x: no-display;/*内容不适合内容框，删除内容框*/
overflow-x: no-content;/*内容不适合内容框，删除内容框*/

overflow-y

<html>
<head>
<style type="text/css">
div {
background-color: #ccc;
width: 80px;
height: 80px;
overflow-y: visible;
}
</style>
</head>
<body>
<div style="width: 100px">
这个属性定义对溢出元素内容区的内容做上下边缘裁剪。
</div>
</body>
</html>

属性值

overflow-y: visible;/*默认值，溢出显示在元素外边*/
overflow-y: hidden;/*y方向溢出不显示，x方向滚动*/
overflow-y: scroll;/*x和y方向滚动*/
overflow-y: auto;/*x和y方向滚动*/
overflow-y: no-display;/*内容不适合内容框，删除内容框*/
overflow-y: no-content;/*内容不适合内容框，删除内容框*/

overflow-x&overflow-y

<html>
<head>
<style type="text/css">
div {
background-color: #ccc;
width: 80px;
height: 80px;
overflow-x: visible;
overflow-y: visible;
}
</style>
</head>
<body>
<div style="width: 100px">
这个属性定义对溢出元素内容区的内容做上下左右边缘裁剪。
</div>
</body>
</html>

overflow-x: visible;
overflow-y: visible;
/*溢出元素显示在元素外边*/
overflow-x: hidden;
overflow-y: visible;
/*溢出元素x方向显示部分内容，y方向滚动*/
overflow-x: visible;
overflow-y: hidden;
/*溢出元素x方向滚动，y方向显示部分内容*/
overflow-x: hidden;
overflow-y: hidden;
/*溢出元素x方向和y方向都显示部分内容*/
overflow-x: scroll;
overflow-y: visible;
/*溢出元素x方向和y方向滚动*/
overflow-x: auto;
overflow-y: visible;
/*溢出元素x方向和y方向滚动*/
overflow-x: visible;
overflow-y: scroll;
/*溢出元素x方向和y方向滚动*/
overflow-x: visible;
overflow-y: auto;
/*溢出元素x方向和y方向滚动*/
overflow-x: auto;
overflow-y: auto;
/*溢出元素x方向和y方向滚动*/
overflow-x: scroll;
overflow-y: scroll;
/*溢出元素x方向和y方向滚动*/