社区
学习
工具库
AI工具
休闲
搜索
简体中文
目录
回复讨论(解决方案)
首页 web前端 html教程 div自适应宽度的问题，求高手帮忙！_html/css_WEB-ITnose

div自适应宽度的问题，求高手帮忙！_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Jun 21, 2016 am 09:26 AM
div 宽度 自适应 高手

在左侧做了一个可以自动伸缩的菜单栏，想让菜单栏展开时，完全展开右面带地图的div，而不是被左面的菜单遮住一部分，该怎么解决？

这是菜单展开的图：搜索

这是菜单隐藏的图：

这是body:
    

        
 
        

             

        
    
    

这是样式表：

    #common_box{
     width:280px;
     height :100%;
     position:fixed;
     left:0;
     top:40px;
     border:1px solid #789;
     background:#fff;
     z-index:99
    }
    #cli_on{
     width:10px;
     height:100%;
     float:right;
     cursor:pointer;
     background:#ccc;
     text-align:center;
     line-height:180px;
     font-size:24px;
     color:#f00;
    }
    .mydiv
    {
        position:fixed;
        top:40px;
        left:0px;
        width: 100%;
        height:650px;
        }

这是伸缩菜单的js：
    <script> <br /> //左侧弹出菜单 <br /> window.onload = function () { <br /> var common_box = document.getElementById("common_box"); <br /> var cli_on = document.getElementById("cli_on"); <br /> var flag = true, r_len = 0, timer = null; <br /> cli_on.onclick = function () { <br /> if (flag) { <br /> r_len = 0; <br /> timer = setInterval(slideright, 10); <br /> <br /> } else { <br /> r_len = -270; <br /> timer = setInterval(slideleft, 10); <br /> } <br /> } <br /> function slideright() { <br /> if (r_len <= -270) { <br /> flag = !flag; <br /> cli_on.innerHTML = ""; <br /> clearInterval(timer); <br /> return false; <br /> <br /> } else { <br /> r_len -= 5; <br /> common_box.style.left = r_len + "px"; <br /> } <br /> } <br /> function slideleft() { <br /> <br /> if (r_len >= 0) { <br /> clearInterval(timer); <br /> flag = !flag; <br /> cli_on.innerHTML = ""; <br /> return false; <br /> } else { <br /> r_len += 5; <br /> common_box.style.left = r_len + "px"; <br /> } <br /> } <br /> <br /> } <br /> </script>
就是想改成像这个网站论坛首页左面菜单栏的那种感觉。


回复讨论(解决方案)

你这个页面的布局不对啊，你看你使用的是position:fixed。在控制显示位置的，这个很明显的，就会出现覆盖这个问题了。

这个你可以这么处理：
左侧的那块，使用定位处理，而右侧的那块，不使用定位，但是使用一个margin-left来控制左侧空出来的距离

当你左侧的更改时，同时改变右侧的那个margin-left的值就行了。

我这么说，能想明白吗？ 

mydiv{	margin-top:40px;	background-color:#eee;	height:650px;	margin-left:280px;}
登录后复制
登录后复制


window.onload = function () {	var common_box = document.getElementById("common_box");	var cli_on = document.getElementById("cli_on");	var mapDiv = document.getElementById("mapDiv");	//zheli	var flag = true, r_len = 0, timer = null;	cli_on.onclick = function () {		if (flag) {			r_len = 0;			timer = setInterval(slideright, 10);		} else {			r_len = -270;			timer = setInterval(slideleft, 10);		}	}	function slideright() {		if (r_len <= -270) {			flag = !flag;			cli_on.innerHTML = "";			clearInterval(timer);			return false;		} else {			r_len -= 5;			common_box.style.left = r_len + "px";			mapDiv.style.marginLeft = 270 + r_len + "px";			//zheli		}	}	function slideleft() {		if (r_len >= 0) {			clearInterval(timer);			flag = !flag;			cli_on.innerHTML = "";			return false;		} else {			r_len += 5;			common_box.style.left = r_len + "px";			mapDiv.style.marginLeft = 270 + r_len + "px";			//zheli		}	}}
登录后复制
登录后复制


在你的基础上，稍微改了一点。试试是你要的效果吗？没有测兼容性。

不过，一些效果的话，html部分的布局也是很重要的，先想好布局，之后的js和css写起来，才会更简单的。

感觉应该需要改变div的宽度。用left什么的左右移动菜单和地图，由于之前它们已经绘制完毕了，左右移动时，不是遮盖了自身的一部分(这个效果应该只是左侧菜单需要的），就是由于初始时加载的画面太小已经固定，不能动态适应宽度变化（当你向左侧移动地图时，右侧新增的部分应该不会被自动填充)。
因此，我建议应该在timer的事件中改变两侧div的宽度，同时重新填充div中的内容，使其适应宽度的变化。 

<!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"><style>#common_box{     width:15%;     height :100%;     position:fixed;     left:0;     top:40px;     border:1px solid #789;     background:#fff;     z-index:99;	 float:left;	 padding:0;    }    #cli_on{     width:10px;     height:100%;     float:right;     cursor:pointer;     background:#ccc;     text-align:center;     line-height:180px;     font-size:24px;     color:#f00;    }    .mydiv    {        position:fixed;        top:40px;        right:0px;        width: 85%;        height:650px;		float: right;		padding:0;        }</style><script type="text/javascript">	//左侧弹出菜单        window.onload = function () {            var common_box = document.getElementById("common_box");            var cli_on = document.getElementById("cli_on");			var mapDiv = document.getElementById("mapDiv");            var flag = true, r_len = 0, timer = null;						var mapDiv_width = mapDiv.clientWidth;			var common_box_width = common_box.clientWidth;			var body_client_width = mapDiv.clientWidth + common_box.clientWidth;			            cli_on.onclick = function () {                if (flag) {                    r_len = common_box_width;                    timer = setInterval(slideright, 10);                } else {                    r_len = 0;                    timer = setInterval(slideleft, 10);                }            }            function slideright() {                if (r_len <= 10) {                    flag = !flag;					common_box.style.width = 10 + "px";					mapDiv.style.width = body_client_width - common_box.clientWidth + "px";					cli_on.innerHTML = "菜单栏";					mapDiv.innerHTML = "地图";                    clearInterval(timer);                    return false;                } else {                    r_len -= 5;                    common_box.style.width = r_len + "px";					mapDiv.style.width = body_client_width - common_box.clientWidth + "px";					mapDiv.innerHTML = "地图";                }            }            function slideleft() {                if (r_len >= common_box_width) {                    clearInterval(timer);                    flag = !flag;					common_box.style.width = common_box.clientWidth + "px";					mapDiv.style.width = mapDiv_width + "px";                    cli_on.innerHTML = "菜单栏";					mapDiv.innerHTML = "地图";                    return false;                } else {                    r_len += 5;                    common_box.style.width = r_len + "px";					mapDiv.style.width = body_client_width - common_box.clientWidth + "px";					mapDiv.innerHTML = "地图";                }            }        }</script><body>	<div>		<div id="common_box" style="background-color:yellow; overflow: hidden;">             <div id="cli_on">菜单栏</div>        </div>    		<div id="mapDiv" class ="mydiv" style="background-color:green;">地图</div>     </div></body></html>
登录后复制
登录后复制
登录后复制
登录后复制

感觉应该需要改变div的宽度。用left什么的左右移动菜单和地图，由于之前它们已经绘制完毕了，左右移动时，不是遮盖了自身的一部分(这个效果应该只是左侧菜单需要的），就是由于初始时加载的画面太小已经固定，不能动态适应宽度变化（当你向左侧移动地图时，右侧新增的部分应该不会被自动填充)。
因此，我建议应该在timer的事件中改变两侧div的宽度，同时重新填充div中的内容，使其适应宽度的变化。 

<!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"><style>#common_box{     width:15%;     height :100%;     position:fixed;     left:0;     top:40px;     border:1px solid #789;     background:#fff;     z-index:99;	 float:left;	 padding:0;    }    #cli_on{     width:10px;     height:100%;     float:right;     cursor:pointer;     background:#ccc;     text-align:center;     line-height:180px;     font-size:24px;     color:#f00;    }    .mydiv    {        position:fixed;        top:40px;        right:0px;        width: 85%;        height:650px;		float: right;		padding:0;        }</style><script type="text/javascript">	//左侧弹出菜单        window.onload = function () {            var common_box = document.getElementById("common_box");            var cli_on = document.getElementById("cli_on");			var mapDiv = document.getElementById("mapDiv");            var flag = true, r_len = 0, timer = null;						var mapDiv_width = mapDiv.clientWidth;			var common_box_width = common_box.clientWidth;			var body_client_width = mapDiv.clientWidth + common_box.clientWidth;			            cli_on.onclick = function () {                if (flag) {                    r_len = common_box_width;                    timer = setInterval(slideright, 10);                } else {                    r_len = 0;                    timer = setInterval(slideleft, 10);                }            }            function slideright() {                if (r_len <= 10) {                    flag = !flag;					common_box.style.width = 10 + "px";					mapDiv.style.width = body_client_width - common_box.clientWidth + "px";					cli_on.innerHTML = "菜单栏";					mapDiv.innerHTML = "地图";                    clearInterval(timer);                    return false;                } else {                    r_len -= 5;                    common_box.style.width = r_len + "px";					mapDiv.style.width = body_client_width - common_box.clientWidth + "px";					mapDiv.innerHTML = "地图";                }            }            function slideleft() {                if (r_len >= common_box_width) {                    clearInterval(timer);                    flag = !flag;					common_box.style.width = common_box.clientWidth + "px";					mapDiv.style.width = mapDiv_width + "px";                    cli_on.innerHTML = "菜单栏";					mapDiv.innerHTML = "地图";                    return false;                } else {                    r_len += 5;                    common_box.style.width = r_len + "px";					mapDiv.style.width = body_client_width - common_box.clientWidth + "px";					mapDiv.innerHTML = "地图";                }            }        }</script><body>	<div>		<div id="common_box" style="background-color:yellow; overflow: hidden;">             <div id="cli_on">菜单栏</div>        </div>    		<div id="mapDiv" class ="mydiv" style="background-color:green;">地图</div>     </div></body></html>
登录后复制
登录后复制
登录后复制
登录后复制


嗯，按照你的帮助修改运行了一下代码，果真左面的菜单栏不会覆盖右面的地图了，但在菜单栏隐藏时，右面的地图会在右面留出15%的空白，没法被自动填充


感觉应该需要改变div的宽度。用left什么的左右移动菜单和地图，由于之前它们已经绘制完毕了，左右移动时，不是遮盖了自身的一部分(这个效果应该只是左侧菜单需要的），就是由于初始时加载的画面太小已经固定，不能动态适应宽度变化（当你向左侧移动地图时，右侧新增的部分应该不会被自动填充)。
因此，我建议应该在timer的事件中改变两侧div的宽度，同时重新填充div中的内容，使其适应宽度的变化。 

<!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"><style>#common_box{     width:15%;     height :100%;     position:fixed;     left:0;     top:40px;     border:1px solid #789;     background:#fff;     z-index:99;	 float:left;	 padding:0;    }    #cli_on{     width:10px;     height:100%;     float:right;     cursor:pointer;     background:#ccc;     text-align:center;     line-height:180px;     font-size:24px;     color:#f00;    }    .mydiv    {        position:fixed;        top:40px;        right:0px;        width: 85%;        height:650px;		float: right;		padding:0;        }</style><script type="text/javascript">	//左侧弹出菜单        window.onload = function () {            var common_box = document.getElementById("common_box");            var cli_on = document.getElementById("cli_on");			var mapDiv = document.getElementById("mapDiv");            var flag = true, r_len = 0, timer = null;						var mapDiv_width = mapDiv.clientWidth;			var common_box_width = common_box.clientWidth;			var body_client_width = mapDiv.clientWidth + common_box.clientWidth;			            cli_on.onclick = function () {                if (flag) {                    r_len = common_box_width;                    timer = setInterval(slideright, 10);                } else {                    r_len = 0;                    timer = setInterval(slideleft, 10);                }            }            function slideright() {                if (r_len <= 10) {                    flag = !flag;					common_box.style.width = 10 + "px";					mapDiv.style.width = body_client_width - common_box.clientWidth + "px";					cli_on.innerHTML = "菜单栏";					mapDiv.innerHTML = "地图";                    clearInterval(timer);                    return false;                } else {                    r_len -= 5;                    common_box.style.width = r_len + "px";					mapDiv.style.width = body_client_width - common_box.clientWidth + "px";					mapDiv.innerHTML = "地图";                }            }            function slideleft() {                if (r_len >= common_box_width) {                    clearInterval(timer);                    flag = !flag;					common_box.style.width = common_box.clientWidth + "px";					mapDiv.style.width = mapDiv_width + "px";                    cli_on.innerHTML = "菜单栏";					mapDiv.innerHTML = "地图";                    return false;                } else {                    r_len += 5;                    common_box.style.width = r_len + "px";					mapDiv.style.width = body_client_width - common_box.clientWidth + "px";					mapDiv.innerHTML = "地图";                }            }        }</script><body>	<div>		<div id="common_box" style="background-color:yellow; overflow: hidden;">             <div id="cli_on">菜单栏</div>        </div>    		<div id="mapDiv" class ="mydiv" style="background-color:green;">地图</div>     </div></body></html>
登录后复制
登录后复制
登录后复制
登录后复制


嗯，按照你的帮助修改运行了一下代码，果真左面的菜单栏不会覆盖右面的地图了，但在菜单栏隐藏时，右面的地图会在右面留出15%的空白，没法被自动填充


我写的效果就是需要手动重绘地图的，你需要将
mapDiv.innerHTML = "地图";
这些地方替换成地图的加载代码，这样地图才能自动适应画面变化。 

mydiv{	margin-top:40px;	background-color:#eee;	height:650px;	margin-left:280px;}
登录后复制
登录后复制


window.onload = function () {	var common_box = document.getElementById("common_box");	var cli_on = document.getElementById("cli_on");	var mapDiv = document.getElementById("mapDiv");	//zheli	var flag = true, r_len = 0, timer = null;	cli_on.onclick = function () {		if (flag) {			r_len = 0;			timer = setInterval(slideright, 10);		} else {			r_len = -270;			timer = setInterval(slideleft, 10);		}	}	function slideright() {		if (r_len <= -270) {			flag = !flag;			cli_on.innerHTML = "";			clearInterval(timer);			return false;		} else {			r_len -= 5;			common_box.style.left = r_len + "px";			mapDiv.style.marginLeft = 270 + r_len + "px";			//zheli		}	}	function slideleft() {		if (r_len >= 0) {			clearInterval(timer);			flag = !flag;			cli_on.innerHTML = "";			return false;		} else {			r_len += 5;			common_box.style.left = r_len + "px";			mapDiv.style.marginLeft = 270 + r_len + "px";			//zheli		}	}}
登录后复制
登录后复制


在你的基础上，稍微改了一点。试试是你要的效果吗？没有测兼容性。

不过，一些效果的话，html部分的布局也是很重要的，先想好布局，之后的js和css写起来，才会更简单的。


试了一下，效果实现了！是不是用position:fixed;直接固定位置挺不好的？



感觉应该需要改变div的宽度。用left什么的左右移动菜单和地图，由于之前它们已经绘制完毕了，左右移动时，不是遮盖了自身的一部分(这个效果应该只是左侧菜单需要的），就是由于初始时加载的画面太小已经固定，不能动态适应宽度变化（当你向左侧移动地图时，右侧新增的部分应该不会被自动填充)。
因此，我建议应该在timer的事件中改变两侧div的宽度，同时重新填充div中的内容，使其适应宽度的变化。 

<!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"><style>#common_box{     width:15%;     height :100%;     position:fixed;     left:0;     top:40px;     border:1px solid #789;     background:#fff;     z-index:99;	 float:left;	 padding:0;    }    #cli_on{     width:10px;     height:100%;     float:right;     cursor:pointer;     background:#ccc;     text-align:center;     line-height:180px;     font-size:24px;     color:#f00;    }    .mydiv    {        position:fixed;        top:40px;        right:0px;        width: 85%;        height:650px;		float: right;		padding:0;        }</style><script type="text/javascript">	//左侧弹出菜单        window.onload = function () {            var common_box = document.getElementById("common_box");            var cli_on = document.getElementById("cli_on");			var mapDiv = document.getElementById("mapDiv");            var flag = true, r_len = 0, timer = null;						var mapDiv_width = mapDiv.clientWidth;			var common_box_width = common_box.clientWidth;			var body_client_width = mapDiv.clientWidth + common_box.clientWidth;			            cli_on.onclick = function () {                if (flag) {                    r_len = common_box_width;                    timer = setInterval(slideright, 10);                } else {                    r_len = 0;                    timer = setInterval(slideleft, 10);                }            }            function slideright() {                if (r_len <= 10) {                    flag = !flag;					common_box.style.width = 10 + "px";					mapDiv.style.width = body_client_width - common_box.clientWidth + "px";					cli_on.innerHTML = "菜单栏";					mapDiv.innerHTML = "地图";                    clearInterval(timer);                    return false;                } else {                    r_len -= 5;                    common_box.style.width = r_len + "px";					mapDiv.style.width = body_client_width - common_box.clientWidth + "px";					mapDiv.innerHTML = "地图";                }            }            function slideleft() {                if (r_len >= common_box_width) {                    clearInterval(timer);                    flag = !flag;					common_box.style.width = common_box.clientWidth + "px";					mapDiv.style.width = mapDiv_width + "px";                    cli_on.innerHTML = "菜单栏";					mapDiv.innerHTML = "地图";                    return false;                } else {                    r_len += 5;                    common_box.style.width = r_len + "px";					mapDiv.style.width = body_client_width - common_box.clientWidth + "px";					mapDiv.innerHTML = "地图";                }            }        }</script><body>	<div>		<div id="common_box" style="background-color:yellow; overflow: hidden;">             <div id="cli_on">菜单栏</div>        </div>    		<div id="mapDiv" class ="mydiv" style="background-color:green;">地图</div>     </div></body></html>
登录后复制
登录后复制
登录后复制
登录后复制


嗯，按照你的帮助修改运行了一下代码，果真左面的菜单栏不会覆盖右面的地图了，但在菜单栏隐藏时，右面的地图会在右面留出15%的空白，没法被自动填充
我写的效果就是需要手动重绘地图的，你需要将
mapDiv.innerHTML = "地图";
这些地方替换成地图的加载代码，这样地图才能自动适应画面变化。
地图这个只在mapDiv里加载，想要完全加载只能靠改变div的宽度来实现了

定位浮动什么的，我会觉得，能少用，就尽量少用，如果用的太多，以后添加功能，更改样式时，都会变得更难。

当然，有时候也不得不用，只要不是把所有的布局，都用float，position这样就好了。

也算是个人习惯。

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

刺客信条阴影：贝壳谜语解决方案
3 周前 By DDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前 By DDD
在哪里可以找到原子中的起重机控制钥匙卡
3 周前 By DDD
刺客信条阴影 - 如何找到铁匠，解锁武器和装甲定制
1 个月前 By DDD
<🎜>：死铁路 - 如何完成所有挑战
3 周前 By DDD
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7615
15
CakePHP 教程
1387
52
steam的账户名称是什么格式
88
11
win11激活密钥永久
68
19
NYT连接提示和答案
29
136
显示更多
Related knowledge
如何在 Windows 11 上配置内容自适应亮度 如何在 Windows 11 上配置内容自适应亮度 Apr 14, 2023 pm 12:37 PM

自适应亮度是 Windows 11 计算机上的一项功能，可根据显示的内容或照明条件调整屏幕的亮度级别。由于部分用户还在习惯 Windows 11 的新界面，因此无法轻松找到自适应亮度，甚至有人说 Windows 11 上的自适应亮度功能缺失，所以本教程将把所有内容都弄清楚。例如，如果您正在观看 YouTube 视频并且视频突然显示黑暗场景，自适应亮度将使屏幕更亮并增加对比度级别。这与自动亮度不同，自动亮度是一种屏幕设置，可让计算机、智能手机或设备根据环境照明调整亮度级别。前置摄像头中有一个特殊的

css怎么实现div缺一个角 css怎么实现div缺一个角 Jan 30, 2023 am 09:23 AM

css实现div缺一个角的方法：1、创建一个HTML示例文件，并定义一个div；2、给div设置宽高背景色；3、给需要删除一角的div增加一个伪类，将伪类设置成跟背景色一样的颜色，然后旋转45度，再定位到需要去除的那个角即可。

如何用Vue构建自适应移动端界面？ 如何用Vue构建自适应移动端界面？ Jun 27, 2023 am 11:05 AM

随着移动互联网的普及，越来越多的网站和应用需要考虑在移动端的使用体验。Vue作为一种流行的前端框架，具有响应式布局和自适应能力，可以很好地帮助我们构建自适应移动端界面。本文将介绍如何用Vue构建自适应移动端界面。使用rem代替px作为单位在移动端界面中使用px作为单位，可能会导致在不同设备上的显示效果不一致。因此，建议使用rem代替px作为单位。rem是相对

使用 CSS Viewport 单位 vmin 和 vw 实现自适应图片大小的方法 使用 CSS Viewport 单位 vmin 和 vw 实现自适应图片大小的方法 Sep 13, 2023 am 08:18 AM

使用CSSViewport单位vmin和vw实现自适应图片大小的方法在网页设计中，经常会遇到需要让图片自适应屏幕大小的情况。为了实现这一目标，CSS提供了一种强大的单位——viewport单位。其中，vmin表示视口宽高中较小的一方的百分比，而vw表示视口宽度的百分比。所以，我们可以利用这两种单位来实现自适应图片大小的效果。下面将介绍具体

基于 ChatGPT API 的划词翻译浏览器脚本实现 基于 ChatGPT API 的划词翻译浏览器脚本实现 May 01, 2023 pm 03:28 PM

前言最近GitHub上有个基于ChatGPTAPI的浏览器脚本，openai-translator，短时间内star冲到了12k，功能上除了支持翻译外，还支持润色和总结功能，除了浏览器插件外，还使用了tauri打包了一个桌面客户端，那抛开tauri是使用rust部分，那浏览器部分实现还是比较简单的，今天我们就来手动实现一下。openAI提供的接口比如我们可以复制以下代码，在浏览器控制台中发起请求，就可以完成翻译//示例constOPENAI_API_KEY="s

div盒模型是什么 div盒模型是什么 Oct 09, 2023 pm 05:15 PM

div盒模型是一种用于网页布局的模型，它将网页中的元素视为一个个矩形的盒子，这个模型包含了四个部分：内容区域、内边距、边框和外边距。div盒模型的好处是可以方便地控制网页布局和元素之间的间距，通过调整内容区域、内边距、边框和外边距的大小，可以实现各种不同的布局效果，盒模型也提供了一些属性和方法，可以通过CSS和JavaScript来动态地改变盒子的样式和行为。

iframe和div有什么不同 iframe和div有什么不同 Aug 28, 2023 am 11:46 AM

iframe和div的不同是iframe主要用于引入外部内容，可以加载其他网站的内容或将一个网页分割成多个区域，每个区域有自己的独立的浏览上下文，而div主要用于分割和组织内容的区块，用于布局和样式控制。

vue能实现自适应吗 vue能实现自适应吗 Dec 30, 2022 pm 03:25 PM

vue能实现自适应，其实现自适应的方法有：1、通过“npm install”或“yarn add”命令安装“scale-box”组件，并使用“scale-box”实现适配缩放；2、通过设置设备像素比例实现自适应；3、通过JS设置zoom属性调整缩放比例来实现自适应即可。

See all articles