css3 overflow-x属性笔记

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

overflow-x属性定义及用法

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

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

overflow-x属性语法格式

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

属性值说明

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

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 overflow-x属性笔记</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-x:visible;}
#div2{overflow-x:hidden;}
#div3{overflow-x: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-x属性笔记

 

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

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

发表评论


表情