自动适应高度宽度与固定高度宽度

liangxianfu5811

浏览: 78903 次
性别:
来自: 西安

最近访客更多访客>>

JinJan

vicento4

Start_one

yoyo9206

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web标准

XHTML

盒子A是盒子B的内容
1、固定盒子A的高度、宽度均为200px；当盒子B的宽度、高度小于200px时，盒子B将出现滚动条(垂直、水平滚动条)以显示其中的内容盒子A，但默认情况下盒子B的overflow属性的值是sisible的，即扩大盒子B的面积以显示其中所有的内容，而不会出现滚动条，若想出现滚动条，需要设置器overflow属性，overflow属性值如下：body也是盒子
visible：扩大面积以显示所有内容(盒子overflow的默认值)
auto：仅当内容超出限定值时添加滚动条
hidden：总是隐藏滚动条
scroll：总是显示滚动条
2、当没有设置盒子的宽度、高度，或者设置盒子的宽度、高度的值为百分比时，即盒子的自适应高度、宽度，overflow属性将不起作用，即盒子始终不出现滚动条，当盒子的宽度、高度不够时，其中的内容的位置就会自动变化，盒子的自适应高度、宽度是相对于其直接父亲盒子，自适应高度、宽度时，盒子的高、宽度会随着其父亲盒子的高、宽度的变化而变化
如下例子，缩小、放大浏览器的宽度、高度，观察div中的内容变化
例子1：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>一列布局</title>
<style type="text/css">
body{
padding: 0px;
margin: 0px;
border: 0px;
}
#layout{
width: 70%;
height: 400px;
background: #99FFcc;
margin: auto;
}
</style>
</head>
<body>
<div id="layout">此处显示一列布局的内容此处显示一列布局的内容此处显示一列布局的内容</div>
</body>
</html>

例子2：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>一列布局</title>
<style type="text/css">
body{
padding: 0px;
margin: 0px;
border: 0px;
}
#layout{
width: 60%;
height: 70%;
background: #99FFcc;
margin: auto;
}
</style>
</head>
<body>
<div style="width:600px; height:600px;overflow:auto;">
这是外层盒子的内容
<div id="layout">此处显示一列布局的内容此处显示一列布局的内容此处显示一列布局的内容</div>
</div>
</body>
</html>

分享到：