div css overflow常用属性值实例

2024-01-18 13:44 小编

两个DIV盒子,划分设置静止CSS width、CSS height,放入过多的文字内容,今后看看overflow:hidden匿伏横跨内容成就,overflow:auto设置装备摆设转动条。

1、实例未设置overflow站点实例代码

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>overflow属性实例 CSS5</title> 
<style> 
.exp-a,.exp-b{ float:left; width:120px; height:110px; border:1px solid #F00} 
</style> 
</head> 
<body> 
<div class="exp-a">接待脱离CSS5网!CSS5以通俗易懂知识说明注解、 
案例剖析、实例树模让您轻松学习DIV+CSS构造手艺、轻松实现xhtml 
标准网页重构斥地。</div> 
<div class="exp-b">大家或者颠末CSS5主站上的一切收费CSS教程足可 
学会DIV CSS手艺,轻松完成xhtml规范网页重构拓荒。</div> 
</body> 
</html>

为了看到溢出横跨宽度高度限制功效,设置装备摆设css边框技俩

2、设置overflow后残破代码

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>overflow属性实例 CSS5</title> 
<style> 
.exp-a,.exp-b{ float:left; width:120px; height:110px; 
border:1px solid #F00} 
.exp-a{ overflow:hidden} 
.exp-b{ overflow:auto} 
</style> 
</head> 
<body> 
<div class="exp-a">欢送脱离CSS5网!CSS5以通俗易懂知识解说、案例综合、
实例树范让您轻松进修DIV+CSS组织手艺、轻松实现xhtml标准网页重构启迪。</div> 
<div class="exp-b">人人大要经过CSS5主站上的一切收费CSS教程足可学会
DIV CSS手艺,轻松完成xhtml尺度网页重构开荒。</div> 
</body> 
</html>



在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码