목차
div自适应宽度的问题，求高手帮忙！_html/css_WEB-ITnose
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
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션
3 몇 주 전
By DDD
Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법
2 몇 주 전
By DDD
Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다
3 몇 주 전
By DDD
어 ass 신 크리드 섀도우 - 대장장이를 찾고 무기 및 갑옷 커스터마 화 잠금 해제 방법
1 몇 달 전
By DDD
<s> : 데드 레일 - 모든 도전을 완료하는 방법
3 몇 주 전
By DDD
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7622
15
7622
15
Cakephp 튜토리얼
1389
52
1389
52
Steam의 계정 이름 형식은 무엇입니까?
89
11
89
11
Win11 활성화 키 영구
70
19
70
19
NYT 연결 힌트와 답변
31
138
31
138
Windows 11에서 콘텐츠 적응형 밝기를 구성하는 방법
Apr 14, 2023 pm 12:37 PM
적응형 밝기는 표시되는 콘텐츠나 조명 조건에 따라 화면의 밝기 수준을 조정하는 Windows 11 컴퓨터의 기능입니다. 일부 사용자는 여전히 Windows 11의 새로운 인터페이스에 익숙해지고 있기 때문에 적응형 밝기를 쉽게 찾을 수 없으며 일부 사용자는 적응형 밝기 기능이 Windows 11에 없다고 말하기도 하므로 이 튜토리얼에서는 모든 문제를 해결합니다. 예를 들어 YouTube 동영상을 시청할 때 동영상에 갑자기 어두운 장면이 표시되는 경우 적응형 밝기가 화면을 더 밝게 만들고 대비 수준을 높입니다. 이는 컴퓨터, 스마트폰 또는 장치가 주변 조명에 따라 밝기 수준을 조정할 수 있는 화면 설정인 자동 밝기와 다릅니다. 전면 카메라에 특별한 것이 있습니다
CSS를 사용하여 div에 모서리가 누락되었음을 인식하는 방법
Jan 30, 2023 am 09:23 AM
div에 모서리가 없음을 인식하는 CSS 방법: 1. HTML 샘플 파일을 만들고 div를 정의합니다. 2. div의 너비와 높이 배경색을 설정합니다. 3. 삭제해야 하는 div에 의사 클래스를 추가합니다. 모서리를 지정하고 의사 클래스를 배경색과 동일한 색상 사용으로 설정한 다음 45도 회전한 다음 제거해야 할 모서리에 배치합니다.
Vue로 적응형 모바일 인터페이스를 구축하는 방법은 무엇입니까?
Jun 27, 2023 am 11:05 AM
모바일 인터넷의 인기로 인해 점점 더 많은 웹사이트와 애플리케이션에서 모바일 경험을 고려해야 합니다. 널리 사용되는 프런트엔드 프레임워크인 Vue는 반응형 레이아웃과 적응형 기능을 갖추고 있어 적응형 모바일 인터페이스를 구축하는 데 도움이 될 수 있습니다. 이 기사에서는 Vue를 사용하여 적응형 모바일 인터페이스를 구축하는 방법을 소개합니다. px 대신 rem을 단위로 사용하고 모바일 인터페이스에서 px를 단위로 사용하면 여러 장치에서 표시 효과가 일관되지 않을 수 있습니다. 따라서 단위는 px 대신 rem을 사용하는 것이 좋습니다. 렘은 상대적이다
CSS 뷰포트 단위 vmin 및 vw를 사용하여 적응형 이미지 크기를 구현하는 방법
Sep 13, 2023 am 08:18 AM
적응형 이미지 크기를 구현하기 위해 CSSViewport 단위 vmin 및 vw를 사용하는 방법 웹 디자인에서는 이미지가 화면 크기에 적응해야 하는 상황에 자주 직면합니다. 이 목표를 달성하기 위해 CSS는 강력한 단위인 뷰포트 단위를 제공합니다. 그 중 vmin은 뷰포트 너비의 작은 쪽의 백분율을 나타내고, vw는 뷰포트 너비의 백분율을 나타냅니다. 따라서 이 두 단위를 사용하여 적응형 이미지 크기의 효과를 얻을 수 있습니다. 구체적인 내용은 아래에서 소개하겠습니다
ChatGPT API를 기반으로 한 단어 표시 번역 브라우저 스크립트 구현
May 01, 2023 pm 03:28 PM
머리말 최근에는 GitHub에 ChatGPTAPI 기반의 브라우저 스크립트인 openai-translator가 있습니다. 단기간 내에 번역 지원 외에도 다듬기 및 요약 기능도 지원됩니다. -ins, 또한 Tauri 패키징을 사용합니다. Tauri가 Rust 부분을 사용한다는 사실을 제외하면, 브라우저 부분은 여전히 수동으로 구현하기가 쉽습니다. 예를 들어 openAI에서 제공하는 인터페이스에서는 다음 코드를 복사하고 브라우저 콘솔에서 요청을 시작하여 번역을 완료할 수 있습니다. //예제 constOPENAI_API_KEY="s
div 상자 모델은 무엇입니까
Oct 09, 2023 pm 05:15 PM
div 상자 모델은 웹 페이지 레이아웃에 사용되는 모델입니다. 이 모델은 콘텐츠 영역, 패딩, 테두리 및 여백의 네 부분으로 구성됩니다. div 박스 모델의 장점은 웹 페이지의 레이아웃과 요소 사이의 간격을 쉽게 제어할 수 있다는 것입니다. 콘텐츠 영역의 크기, 내부 여백, 테두리 및 외부 여백을 조정하여 다양한 레이아웃 효과를 얻을 수 있습니다. 상자 모델은 또한 일부 속성을 제공하며 메서드는 CSS 및 JavaScript를 통해 상자의 스타일과 동작을 동적으로 변경할 수 있습니다.
iframe과 div의 차이점은 무엇입니까
Aug 28, 2023 am 11:46 AM
iframe과 div의 차이점은 iframe은 주로 다른 웹사이트의 콘텐츠를 로드하거나 웹페이지를 여러 영역으로 나눌 수 있는 외부 콘텐츠를 도입하는 데 사용된다는 점입니다. 레이아웃 및 스타일 제어를 위해 콘텐츠를 구성합니다.
vue는 적응형이 될 수 있나요?
Dec 30, 2022 pm 03:25 PM
Vue는 자체 적응을 달성하는 방법은 다음과 같습니다. 1. "npm install" 또는 "yarn add" 명령을 통해 "scale-box" 구성 요소를 설치하고 "scale-box"를 사용하여 적응형 스케일링을 달성합니다. 2. 자체 적응을 달성하기 위해 장치 픽셀 비율 설정을 통해 3. JS를 통해 줌 속성을 설정하여 자체 적응을 달성합니다.
