欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

css花色之overflow-x属性格式教程

overflow-x是overflow子名目,常日也很少用的。overflow-x配置潜藏溢出过宽模式(比喻过宽图片)、设置对象底部迁移转变条等需求。

overflow-x语法与基础领略

1、overflow-x可设置装备摆设值
overflow-x : visible | auto | hidden| scroll

值与告白介绍:
visible :  不剪切模式也不添加动弹条。
auto :  此为body对象与textarea的默认值。
hidden :  不体现跨越对象宽度的内容
scroll :  总是显示横向迁移转变条

overflow-x语法分析图
overflow-x语法赏析图

2、匿伏高出宽度的内容应用小实例

p{width:300px;overflow-x:hidden}

设置装备摆设潜伏P标签内超越宽度300px的形式,由于笔墨一般会主动换行,通恒久置是提防过宽(超越300px宽度)图片,潜伏掉逾越300px的图片内容,如许象征着但图片宽度超过300px后,只会体现300px宽度模式,过宽会被窜伏(夙昔会溢出或撑破p标签)。

3、对象底部横向设置装备摆设滚动条实例
实例DIV CSS代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>overflow-x 转折条 CSS5</title>
<style>
.scroll-exp{width:300px;overflow-x:scroll}
</style>
</head>
<body>
<div class="scroll-exp">底部呈现转动条 底部出现转动条</div>
</body>
</html>

overflow-x:scroll设置装备摆设动弹条实例截图

完成添加横向滚动条overflow-x实例截图
实现增加横向转折条overflow-x实例截图

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r52037.shtml