盒子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>
分享到:
相关推荐
gridcontrol显示图片,并自动适应行高,无图片时高度固定,有图片自动适应,例如:固定行高50,图片列宽度为100,插入一个200*300的图片,在列中只会显示100*150,行高为150,无图片列行高为50
直接通过CSS控制一个DIV内所有图片宽度超过650PX时.自定为650PX;高度自适应! 些CSS代码是目前最简单有效的自动调整图片尺寸的方法,且兼容IE6 IE7 IE8 和FF等版本的浏览器
PB9、PB12.5数据窗口根据每个字段内容再设置相应字段宽度!
一、可以使用js判断图片的宽度得到具体数值之后,再来利用js设置图片的高度(这里就不具体为大家细说了)。 利用js来实现有一个缺点就是只能在页面刷新的时候才能调整图片的高度,不能随着浏览器的窗口大小变化来...
基于jQuery实现的类似瀑布流效果,图片固定高度,宽度自动适应,瀑布流自动加载功能还需要完善
方法一:恰当的设置表格的列宽往往能给表格的美观性带来较好的效果。一种简单的方法是:调用表头的setSectionResizeMode()方法,代码如下:参数QH
4、可以通过改变“高度”、宽度、左边距、类型(6或7)、上边距来调整条形码的位置、宽度、高度 注意:不要随意改变F-O列的数值,本程序固定在G列生成条形码,序列号必须放在F列,数量、高度。。。等必须放在J——O...
自己编写的串口软件,主要应用于固定收发命令的调试过程。所有的命令可以导入导出。 下面是介绍: 串口软件使用说明(2002-11-16): 1.如果想把接收的结果显示的更多列,以方便查看接收的结果,可以双击接收文本框, ...
500px 出品的布局库,能够在固定 cell 高度的情况下自动调整图片宽度,让每行的图片都能以最佳状态显示
魔众活动报名系统发布v5.3.0版本,新功能和Bug修复累计7项,常规升级,界面和后台优化。 2021年12月20日魔众活动报名系统发布v5.3.0版本,更新了以下7项改进: ...·[Bug修复] 顶部导航Logo手机端高度适应问题
l 网格每列宽度相同,等于容器的宽度除以网格的列数。 l 网格每行高度相同,等于容器的高度除以网格的行数。 l 各组件的排列方式为:从上到下,从左到右。 l 组件放入容器的次序决定了它在容器中的位置。 l 容器...
compressLeven是从1到100,这意味着位图的压缩百分比getFixedSizeSignatureBitmap(int wantedWidth)-desireWidth是目标宽度,它将自动调整高度getFixedSizeSignatureBitmap(intdesireWidth,intdesireHeight)-...
[Bug修复] 顶部导航Logo手机端高度适应问题 运行环境 操作系统 Linux/Unix 或 Windows 软件环境 Laravel 5.1的运行环境 Apache/Nginx , PHP 5.5.9+ / PHP 7.0 , MySQL 5.0+ ·[新功能] 支付中心新增PC快捷扫...
魔众帮助中心系统发布v3.3.0版本,新功能和Bug修复累计10项,系统内核升级,界面显示优化。 2022年01月03日魔众帮助...[Bug修复] 顶部导航Logo手机端高度适应问题 魔众帮助中心系统,快速搭建自己的帮助中心系统。
魔众帮助中心系统发布v3.3.0版本,新功能和Bug修复累计10项,系统内核升级,界面显示优化。 2022年01月03日魔众帮助中心...[Bug修复] 顶部导航Logo手机端高度适应问题 魔众帮助中心系统,快速搭建自己的帮助中心系统。
数字图像课程实验C程序完整版,可打开一幅位图文件,可查看其文件长度、偏移量、宽度、高度及像素位数等信息,可进行图像反转变换,可显示图像灰度直方图信息,可增加亮度、减小亮度,可进行自动对比度拉伸。...
由于我们使用的是20.3×25.4厘米,即10英寸(8R,8×10英寸,宽高比4:5)的模板,按2排4张排版冲印,每张的宽度变成6厘米多,尺寸不符合一寸2.7×3.8厘米的要求,也与3R的宽高比(0.7:1)不合,需要调整。...
魔众一物一码溯源防伪系统支持批量生成、管理防伪码、溯源码,帮助您更好的管理商品防伪码。...·[Bug修复] 顶部导航Logo手机端高度适应问题 魔众一物一码溯源防伪系统,溯源、防伪、一物一码,一套搞定。
menu:基于窗体大小自动调整高度; menu:添加“duration”属性 该属性允许用户自定义隐藏菜单动画的持续时间 以毫秒为单位; validatebox:添加“onBeforeValidate”和“onValidate”事件; combo:从该版本开始...
魔众文章投稿系统是一个多用户文章在线投稿系统,支持用户文章投稿、文章审核,通过评论、打赏等模块可以轻松支持...·[Bug修复] 顶部导航Logo手机端高度适应问题 魔众文章投稿系统,简单易用的多用户文章投稿系统。