前端（六）之盒模型显隐、定位与流式布局思想-范文大全|优秀作文-实用文体写作网

盒子的显隐</title"/> <meta property="og:author" content=""/> <meta property="og:bbs:replay" content=""/> <meta name="author" content="范文大全|优秀作文-实用文体写作网" /> <link rel="canonical" href="https://www.wtabcd.cn/fanwen/zuowen/114bf019a664d339c6f1fc3c29b6b8b2.html"/> <div class="container"> <div class="row">  <div class="col-md-12 col-xs-12"> <div class="tab_title"> <i class="iconfont icon-dizhi"></i> <a href="https://www.wtabcd.cn/fanwen/">首页</a> > <a href="https://www.wtabcd.cn/fanwen/list/92_0.html">作文</a></div> </div> <div class="col-md-9 col-xs-12"> <section class="thjingxuan_sec th_top"> <h1 class="detail-title">前端（六）之盒模型显隐、定位与流式布局思想</h1> <div class="detail-icon"> <p class="meta"> <span>更新时间:2023-04-03 12:02:44</span> <span>阅读：<script src=https://www.wtabcd.cn/fanwen/e/public/ViewClick/?classid=92&id=448269&addclick=1></script></span> <span>评论：0</span></p> </div>  <div class="th_ad3 th_top"> <div class="pcd_ad"><script src="https://www.wtabcd.cn/fanwen/d/js/acmsd/thea20.js"></script></div> <div class="mbd_ad"></div> </div> <div class="detail-con"> <h1>前端之盒模型显隐、定位与流式布局思想</h1><h2>盒模型的显隐</h2><pre><!doctype html><html><head> <meta chart="utf-8"> <title>盒子的显隐</title> <style type="text/css"> .box, .wrap { width: 200px; height: 200px; background: red; } .wrap { background: orange; } /*display: none; 通过控制盒子的显示方式来隐藏盒子*/ /*该隐藏方式在页面中不占位*/ .box { display: none; } /*opacity: 0; 通过控制盒子的透明度来隐藏盒子*/ /*该隐藏方式在页面中占位*/ .box { /*opacity: 0*/ } /*注: 一般显隐操作的盒子都是采用定位布局*/ /*悬浮父级显示子级*/ body:hover .box { display: block; } /*将盒子藏到屏幕外: 不能通过盒模型布局, 也不建议通过浮动布局, 可以采用定位布局*/ .box { /*margin-top: -208px*/ } </style></head><body> <div class="box"></div> <div class="wrap"></div></body></html></pre><h2>定位</h2><h3>相对定位</h3><pre><!doctype html><html><head> <meta chart="utf-8"> <title>相对定位布局</title> <style type="text/css"> /*定位布局的导入*/ /*需求: */ /*1.子级在父级的右下角显示*/ /*2.子级完成布局后,父级做content后,子级不需要重新布局*/ .sup { width: 300px; height: 300px; background: pink; border: 10px solid black; } .sub { width: 50px; height: 50px; background: red; margin-left: auto; margin-top: 150px; } /*能不能有一种定位, 让盒子可以通过上下左右四个方位均操作自身布局 => 定位布局*/ /*什么是定位布局: 可以通过上下左右四个方位完成自身布局的布局方式*/ .sup { display: none; } </style> <style type="text/css"> /*相对定位布局*/ .box { width: 200px; height: 200px; background: pink; } .b2 { background: orange } .b1 { /*1.设置定位属性，就会打开定位方位*/ position: relative; /*2.通过定位方位完成布局*/ top: 300px; left: 300px; /*bottom: 100px;*/ /*right: 100px;*/ /*margin-top: 200px;*/ /*结论*/ /*1.左右取左,上下取上(eg:left与right共存是,left生效)*/ 学习新党章 /*2.left=-right, top=-bottom*/ /*3.参考系: 自身原有位置(不是某一个点,eg: right参考的就是原有位置的右边界)*/ /*4.自身布局后不会影响自身原有位置*/ /*5.不脱离文档流(脱离文档流: 不再撑开父级高度)*/ } </style></head><body> <div class="box b1">1</div> <div class="box b2"></div> <div class="sup"> <div class="sub"></div> </div></body></html></pre><h3>绝对定位</h3><pre><!doctype html><html><head> <meta chart="utf-8"> <title>绝对定位布局</title> <style type="text/css"> .box { width: 200px; height: 300px; background: orange; } .sup { width: 200px; height: 200px; background: pink; /*position: absolute;*/ } .sub { width: 50px; height: 50px; background: red; /*1.开的定位*/ position: absolute; /*2.采用定位方位完成布局*/ right: 0; bottom: 0; } body { position: relative; } /*注: 一般父级采用的是相对定位布局, 一般情况下,父级不需要脱离文档流*/ /*如果父级需要脱离文档流,用绝对定位父级完成布局,完全可以,十大元帅不会影响子级相对于自身的布局,但是自身又要需要一个在文档流中的(不脱离文档流中的)定位参考父级 => 父相子绝*/ /*相对定位的应用场景大部分都是辅助于子级的绝对定位*/ .sup { 高干文推荐 position: relative; } .sub { /*left: 0;*/ right: 0; } </style></head><body>    <div class="sup"> <div class="sub"></div> </div>  </body></html></pre><h3>固定定位</h3><pre><!doctype html><html><head> <meta chart="utf-8"> <title>固定定位</title> <style type="text/css"> /*参考系: 页面窗口*/ /*1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左*/ /*2.相对于页面窗口是静止的*/ /*3.完全脱离文档流*/ .box { width: 200px; height: 300px; background: orange; } .box { position: fixed; top: 200px; right: 50px; } </style></head><body> <div class="box"></div> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> &上海体育学院lt;br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br></body></html></pre><h2>z-index 属性</h2><pre><!doctype html><html><head> <meta chart="utf-8"> <title>z-index</title> <style type="text/css"> .wrap { width: 200px; height: 200px; background: pink; /*父级做相对定位处理,并不是自己需要用定位完成布局,最主要的原因是辅助于子级完成绝对定位布局*/ position: relative; } .box { width: 75px; height: 75px; font: normal 30px/75px "stsong"; text-align: center; background: cyan; /*绝对定位需要大家脱离文档流,相互不会影响布局,每个都是独立相对于父级进行布局的个体*/ position: absolute; /*top: 0;*/ /*bottom: 0;*/ /*left: 0;*/ } .b1 { left: 0; top: 0; background: red; } .b2 { right: 0; top: 0; background: yellow; } .b3 { /*虽然子级脱离了文档流,但是父子关系以及存在,子级获取100%,得到的还是父级对应的值*/ left: calc((100% - 75px) / 2); top: calc((100% - 75px) / 2);; background: green; /*z-index改变显示层乡村野花朵朵开级, 显示层级的值为正整数, 值越大,显示层级越高*/ z-index: 1; } .b4 { left: 0; bottom: 0; background: blue; /*z-index: 88889;*/ } .b5 { right: 0; bottom: 0; background: white; } </style></head><body> <div class="wrap"> <div class="box b1">1</div> <div class="box b2">2</div> <div class="box b3">3</div> <div class="box b4">4</div> <div class="box b5">5</div> </div>`</body></html></pre><h2>流式布局思想</h2><pre><!doctype html><html><head> <meta chart="utf-8"> <title>流式布局思想</title> <style type="text/css"> html, body { margin: 0; width: 100%; /*辅助body内部的子级有height流式布局的基础*/ height: 100%; } /*流式布局思想: 尽可能不去使用固定属性值*/ /*通过父级来获取相应的属性值*/ .b1 { width: 100%; height: 100%; background: red; } .b2 { /*view-width view-height*/ width: 80vw; height: 80vh; background: orange; /*流式布局限制条件: 流式布局下宽度最大只能放大到800px,最小只能缩小到600px*/ max-width: 800px; min-width: 600px; } html { font-size: 200px; } body { font-size: 100px; } span { /*设置自身字体时 em = ?px 父级字体的大小*/ font-size: 2em; display: block; /*宽高em在自身设置字体大小后,值又会更改为相应大小*/ /*eg: body: 100px => 设置自身字体时em=100px, */ /*自身设置字体大小为2em,自身字体大小为200px => width=2em的em=200px*/ /*结果自身宽度是400pk*/ /*自身非设置字体时使用em单位,em值取自身字体大小*/ width: 2em; /*rem = html字体的大小*/ height: 2rem; background: red; } </style> <style type="text/css"> .sup { width: 200px; height: 200px; padding: 50px; background: red; } .sub { /*父级的content是提供给子级盒子利用的*/ margin: 0 5px; border: 5px solid black; padding: 5px; /*auto <= 100%*/ width: auto; /*width: 100%;*/ height: 50px; background: orange; } </style></head><body>    <div class="sup"> <div class="sub"></div> </div></body></html></pre><h2>hover 父子悬浮</h2><pre><!doctype html><html><head> <meta chart="utf-8"> <title></title> <style type="text/css"> .sup { width: 120px; height: 40px; background: pink; position: relative; } .sub { width: 120px; height: 100px; background: black; position: absolute; left: 0; top: 40px; display: none; } .sup:hover .sub { display: block; } </style></head><body> <div class="sup"> <div class="sub"></div> </div></body></html></pre><h1>总结</h1><h2>一.浮动布局的总结</h2><pre>1.同一结构下, 如果采用浮动布局,所有的同级别兄弟标签都要采用浮动布局2.浮动布局的盒子宽度在没有设定时会自适应内容宽度</pre><h2>二.盒子的显隐</h2><pre>display: none;在页面中不占位, 采用定位布局后, 显示隐藏都不会影响其他标签布局, 不需要用动画处理时opacity: 0;在页面中占位, 采用定位布局后, 显示隐藏都不会影响其他标签布局, 需要采用动画处理时</pre><h2>三.定位布局</h2><pre>什么是定位布局: 可以通过上下左右四个方位完成自身布局的布局方式</pre>相对定位<pre>参考系: 自身原有位置position: relative; => 打开了四个定位方位1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左2.left = -right | top = -bottom3.布局后不影响自身原有位置4.不脱离文档流</pre>绝对定位<pre>参考系: 最近的定位父级position: absolute; => 打开了四个定位方位1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左2.父级必须自己设置宽高3.完全离文档流</pre>固定定位<pre>参考系: 页面窗口position: fixed; => 打开了四个定位方位1.top|bottom|left|right都可以完成自身布局, 上下取上,左右取左2.相对于页面窗口是静止的3.完全脱离文档流</pre>z-index<pre>修改显示层级(在发生重叠时使用), 值取正整数, 值不需要排序随意规定, 值大的显示层级高</pre><h2>四.流式布局思想</h2><pre>1. 百分比2. vw | vh => max-width(height) | min-width(height)3. em | rem</pre> </div>  <div class="th_page th_page_color4 th_top"> </div>  <div class="th_ad3 th_top"> <div class="pcd_ad"><script src="https://www.wtabcd.cn/fanwen/d/js/acmsd/thea22.js"></script></div> <div class="mbd_ad"></div> </div> <div class="umCopyright"> <p>本文发布于:2023-04-03 12:02:43，感谢您对本站的认可！</p> <p>本文链接：<a href="https://www.wtabcd.cn/fanwen/zuowen/114bf019a664d339c6f1fc3c29b6b8b2.html" target="_blank" style="color:#999">https://www.wtabcd.cn/fanwen/zuowen/114bf019a664d339c6f1fc3c29b6b8b2.html</a></p> <p>版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。</p> </div> <p>本文word下载地址：<a href="https://www.wtabcd.cn/fanwen/e/dongpo/doc/?classid=92&id=448269" target="_blank">前端（六）之盒模型显隐、定位与流式布局思想.doc</a></p> <p>本文 PDF 下载地址：<a href="https://www.wtabcd.cn/fanwen/e/dongpo/doc/pdf/?classid=92&id=448269" target="_blank">前端（六）之盒模型显隐、定位与流式布局思想.pdf</a> <br /> </p>  <div class="detail-arr"> <div class="detail-arr-left">上一篇：<a href='https://www.wtabcd.cn/fanwen/zuowen/846ffde1f578d40b678eba9bf8752fa1.html'>今天打麻将测算每日牌运，麻将测今日牌运</a></div> <div class="detail-arr-right">下一篇：<a href='https://www.wtabcd.cn/fanwen/list/92_0.html'>返回列表</a></div> </div>  <div class="detail-tags"> <i class="iconfont icon-x-tags"></i> 标签：<a href="https://www.wtabcd.cn/fanwen/tags/%E5%B8%83%E5%B1%80_0.html" target="_blank">布局</a> <a href="https://www.wtabcd.cn/fanwen/tags/%E5%8F%82%E8%80%83%E7%B3%BB_0.html" target="_blank">参考系</a> <a href="https://www.wtabcd.cn/fanwen/tags/%E6%96%87%E6%A1%A3_0.html" target="_blank">文档</a> <a href="https://www.wtabcd.cn/fanwen/tags/%E7%9B%92%E5%AD%90_0.html" target="_blank">盒子</a></div> </section> <div class="thleftcon th_top"> <div class="thleftbt thwenzhang thsec4"> <span class="th_cl4">相关文章</span> </div> <ul class="th-5"> </ul> </div>  <a name="comments" id="comments"></a> <div class="showpage" id="plpost"> <link href="https://www.wtabcd.cn/fanwen/skin/ecmspl/css/pl.css" rel="stylesheet"> <div class="showpage" id="plpost"> <table width="100%" border="0" cellpadding="0" cellspacing="0" style="line-height: 25px; padding: 5px 3px 1px 8px; font-size: 18px;"> <tr><td><strong><font color="#333333">留言与评论（共有 <span id="infocommentnumarea">0</span> 条评论）</font></strong></td></tr> </table> <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您没什么话要说吗？"); obj.saytext.focus(); return false; } return true; } </script> <form action="https://www.wtabcd.cn/fanwen/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td> <script src="https://www.wtabcd.cn/fanwen/e/pl/loginjspl.php"></script> <textarea name="saytext" rows="6" id="saytext" placeholder="请遵守互联网相关规定，不要发布广告和违法内容!"></textarea> <script src="https://www.wtabcd.cn/fanwen/d/js/js/plface.js"></script> <table width='100%' align='left' cellpadding=3 cellspacing=1 bgcolor='#FFF'> <tr> <td width="80%" height="40" bgcolor="#FFFFFF">验证码：<input name="key" type="text" class="inputText" size="16" /> <img src="https://www.wtabcd.cn/fanwen/e/ShowKey/?v=pl" align="absmiddle" name="plKeyImg" id="plKeyImg" onclick="plKeyImg.src='https://www.wtabcd.cn/fanwen/e/ShowKey/?v=pl&t='+Math.random()" title="看不清楚,点击刷新" /> </td> <td width="20%" height="40" bgcolor="#FFFFFF"> <input name="sumbit" type="submit" value="提交评论" tabindex="6" style="border-radius: 5px;font-size: 16px;background: #e94c3d none repeat scroll 0% 0%;border: 0px none;margin: 0px 16px;padding: 1px 16px;height: 33px;line-height: 30px;color: rgb(255, 255, 255);opacity: 0.95;"> <input name="id" type="hidden" id="id" value="448269" /> <input name="classid" type="hidden" id="classid" value="92" /> <input name="enews" type="hidden" id="enews" value="AddPl" /> <input name="repid" type="hidden" id="repid" value="0" /> <input type="hidden" name="ecmsfrom" value="https://www.wtabcd.cn/fanwen/zuowen/114bf019a664d339c6f1fc3c29b6b8b2.html"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table></form> <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF"> <tr> <td bgcolor="#FFFFFF" id="infocommentarea"></td> </tr> </table> <script src="https://www.wtabcd.cn/fanwen/e/extend/infocomment/commentajax.php?classid=92&id=448269"></script> </div> </div> </div>  <div class="col-md-3 col-xs-12">  <div class="thleftcon wap_top th_top"> <div class="thleftbt thwenzhang thsec4"><span class="th_cl4">推荐文章</span></div> <ul class="th-5" style="padding-top:0px"> </ul> </div>  <div class="th_ad3 th_top"> <div> <script src='https://www.wtabcd.cn/fanwen/d/js/acmsd/thea15.js'></script> </div> </div>  <div class="thleftcon th_top"> <div class="thleftbt thwenzhang thsec4"><span class="th_cl4">排行榜</span></div> <ul class="th-5"> <li class="th_li"> <div class="bottom1 gundongimg"> <a href="https://www.wtabcd.cn/fanwen/zuowen/114bf019a664d339c6f1fc3c29b6b8b2.html" title="前端（六）之盒模型显隐、定位与流式布局思想"><img class="th_img banner_bottom" style="height:90px" src="/d/file/2023-02-27/89b893097424747d6f133333c8b8972c.jpg" /></a> </div> <div class="bottom2 gundongimg"> <a class="th_hover_a4" href="https://www.wtabcd.cn/fanwen/zuowen/114bf019a664d339c6f1fc3c29b6b8b2.html" title="前端（六）之盒模型显隐、定位与流式布局思想" target="_blank">前端（六）之盒模型显隐、定位与流式布局思想</a> <div class="bottom2_info"> 前端之盒模型显隐、定位与流式布局思想盒模型的显隐<!doctype html><html><head> <meta charset="utf-8"> <title>盒子的显隐

0℃今天打麻将测算每日牌运，麻将测今日牌运

0℃猫咪最新地域网名是什么，关于猫咪的网名

0℃科学的使用笔记本电池操作指南

0℃免费紫微斗数双人合盘，请帮看紫薇合盘

0℃代充平台最好的是哪个（海外代充哪个平台最好）

0℃CSS格式化排版–排版

0℃云顶之弈vn阵容搭配及出装 lol云顶之弈阵容搭配vn

0℃易经1一100吉祥数，1到100之内那个是吉利的数字

0℃最近手气不好老输钱怎么办，这两天老是输钱已经输了4千几了

热门标签