css3 overflow-y属性笔记

原创 国哥笔记  2019-03-05 18:08  阅读 322 views 次

overflow-y属性定义及用法

在css中,overflow-y属性是使用来定义溢出了元素的内容区是否剪辑顶部/底部边缘内容,使用 overflow-x属性来确定对左/右边缘的裁剪。

overflow-y属性是css3中新增的属性,目前大多数浏览器已经支持了该属性,但是IE8以及更早的浏览器不支持该属性。

overflow-y属性语法格式

  1. css语法:overflow-y: visible/hidden/scroll/auto/no-display/no-content;
  2. JavaScript语法:object.style.overflowY="scroll";

属性值说明

  • visible:不裁剪内容,可能会显示在内容框之外;
  • hidden:裁剪内容,不提供滚动机制;
  • scroll:裁剪内容,提供滚动机制;
  • auto :如果溢出框,则应该提供滚动机制;
  • no-display:如果内容不适合内容框,则删除整个框;
  • no-content:如果内容不适合内容框,则隐藏整个内容;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 overflow-y属性笔记</title>
<style type="text/css">
#div1,#div2,#div3{width:280px;height:40px;border:2px solid #000;margin-top:20px;}
div div{width:300px;height:50px;border:1px solid #000;background: orangered;margin:6px 0 0 6px;}
#div1{overflow-y:visible;}
#div2{overflow-y:hidden;}
#div3{overflow-y:scroll;}
</style>
</head>
<body>
<div id="div1"><div>visible</div></div>
<div id="div2"><div>hidden</div></div>
<div id="div3"><div>scroll</div></div>
</body>
</html>

运行结果:

css3 overflow-y属性笔记

 

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/css-overflow-y.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情