当前位置：Gxlcms > html代码 > 想要清晰的明白（一）：CSS视觉格式化模型|盒模型|定位方案|BFC_html/css_WEB-ITnose

想要清晰的明白（一）：CSS视觉格式化模型|盒模型|定位方案|BFC_html/css_WEB-ITnose

时间：2021-07-01 10:21:17 帮助过：37人阅读

视觉格式化模型

页面(文档树)可以想象成是由一个个的Box组合而成的，而视觉格式化模型(Visual formatting model)是一套规则，将这些框布局成访问者看到的样子。

哪些因素控制了这些布局

盒的尺寸和类型
定位体系 Positioning Scheme （常规流，浮动和绝对定位）
文档树中元素之间的关系
外部信息（如：视口大小，图片的固有尺寸等）

下文讲针对性的解释这些影响布局的因素，先来解释些概念~

元素框

css假设每个元素都会生成一个或者多个Box，称为元素框，元素框中心有内容区，内容区外周围包括了padding，border，margin，盒模型就是用来处理这些内容的一个模型

包含块

每个元素都是相对于包含块摆放，包含块就是一个元素的“布局上下文”,

    p的包含块是div
    //div的包含块是body

替换/非替换元素

替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

通过 CSS content 属性来插入的对象被称作匿名可替换元素

如果元素的内容包含在文档之中，则为非替换元素

非替换元素的所有规则同样适用于替换元素，只有一个例外，width如果是auto,元素的高宽就是内容的固有高宽，比如img就是图片的原始大

例如浏览器会根据标签的 src 属性的值来读取图片信息并显示出来，查看HTML代码，则看不到图片的实际内容；标签的 type 属性来决定是显示输入框，还是单选按钮等。HTML中的、、、<select>、<object> 都是替换元素。 </p> <p>这些元素往往没有实际的内容，即是一个空元素,例如：</p> </p> <pre class="sycode" name="code"><img src=https://www.gxlcms.com/”cat.jpg” /><input type="submit" name="Submit" value="提交" /></script></pre> <p>浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。</p> <h2>CSS Box(盒模型/框模型)</h2> <p> <p>CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式</p> </p> <h3>Block Box</h3> <p> (图自《css权威指南》) </p> <pre class="sycode" name="code">display ： block 、 list-item 以及 table 会让一个元素成为块级元素。正常流中，包含块的宽度 = 其父元素的width = margin + padding+ border+自身width</script></pre> <p>在Block Box中，会被水平格式化，垂直格式化</p> <h3>Line Box</h3> <p>每一行称为一条Line Box，它又是由这一行的许多inline-box组成，它的高度可以直接由line-height决定，line boxes的高度垂直堆叠形成了containing box的高度，就是我们见到的div或是p标签之类的高度了。</p> <pre class="sycode" name="code"><div style="width:100px;height:10px"></div>//这个div调整line-height不会发生变化，因为里面没有文字<span style="line-height:10px;border：1px solid green"></span> //span的高度会随着line-height的变化而变化</script></pre> <h3>inline-block</h3> <p> <p>将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。</p> </p> <p>觉得这篇写多了，这块的详细理解放到下篇吧<(￣3￣)></p> <h2>Formatting context</h2> <p> <p>每个元素，或者说每个Box会根据设置的display值，去选择渲染它的方式，不同的display有不同层级：block-level box（块级）inline-level box(行级)，run-in box(插入型框 css3)，不同的层级会参与不同的环境（formatting context）去渲染</p> </p> <p>上文提到的环境就是这个Formatting context（格式化上下文），他是一个有渲染规则的渲染区域，不同的层级有不同的渲染规则，比如BFC和IFC</p> <h2>BFC</h2> <h3>什么是BFC</h3> <p> <p>块级格式化上下文，Block formatting context(简称BFC)，规定了块级盒子的渲染布局方式，他在计算盒子高度，margin值计算等地方有区别于其他环境。</p> </p> <h3>BFC有什么特点</h3> <p> <ol> <li> <p class="no-text-indent">内部盒子会在垂直方向排列</p> </li> <li> <p class="no-text-indent">同一个BFC中的元素可能会发生margin collapse；</p> </li> <li> <p class="no-text-indent">BFC就是页面上的一个隔离的独立容器，里外互相不影响</p> </li> <li> <p class="no-text-indent">计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；</p> </li> <li> <p class="no-text-indent">浮动盒区域不叠加到BFC上</p> </li> </ol> </p> <h3>什么元素会触发产生一个新的BFC</h3> <p> <ol> <li> <p class="no-text-indent">根元素 <html></p> </li> <li> <p class="no-text-indent">float属性不为none</p> </li> <li> <p class="no-text-indent">position为absolute或fixed</p> </li> <li> <p class="no-text-indent">display为inline-block, table-cell, table-caption, flex, inline-flex</p> </li> <li> <p class="no-text-indent">overflow不为visible</p> </li> </ol> </p> <h3>再认真理解下这张图</h3> <pre class="sycode" name="code"><style>html{background-color: #009a61}.a{ width: 100%; height: 80px; background-color: #f3f3f3; margin-bottom: 30px;}.b{ width: 100%; background-color: #f3f3f3; height:40px; margin-bottom: 80px;}.c{ float: left; width: 80%; height: 80px; background-color: #333333;}.d{ margin-top: 80px; width: 100%; background-color: #f3f3f3; overflow: hidden;}</style><body > <div class="a"></div> <div class="b"> <div class="c"> </div> </div> <div class="d"> <div class="c"></div> </div></body></script></pre> <p> </p> <h3>我们可以用BFC来干嘛</h3> <ol> <li> <p class="no-text-indent">清除浮动</p> </li> <li> <p class="no-text-indent">阻止边距折叠</p> </li> <li> <p class="no-text-indent">用于布局，什么两栏自适应高度之类的</p> </li> </ol> <h3>BFC兼容性</h3> <p>IE6-7不支持BFC，而是使用私有属性hasLayout。表现上来看hasLayout和BFC相似，触发hasLayout条件与BFC相似，另外需要为元素设置IE特有的CSS属性zoom:1; zoom用于设置或检索元素的缩放比例，值为1即使用元素实际尺寸，使用zoom既可以触发hasLayout又不会对元素产生其他影响，相对来说更加方便</p> <h2>CSS定位方案</h2> <p> <p>css布局宏观上来说是受定位方案影响，定位方案包括普通流，浮动，定位</p> </p> <h3>普通流</h3> <pre class="sycode" name="code">元素按照其在 HTML 中的位置顺序决定排布的过程。并且这种过程遵循标准的描述只要不是float和绝对定位方式布局的，都在普通流里面。</script></pre> <h3>浮动</h3> <pre class="sycode" name="code">浮动框不在文档的普通流中，浮动的流会漂浮在普通的流上面。浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。</script></pre> <h3>定位</h3> <ol> <li> <p class="no-text-indent">相对定位在普通流之中，是相对于它在普通流中的位置中进行移动，元素占据原来位置</p> </li> <li> <p class="no-text-indent">绝对定位脱离普通流，不占据空间相对于距离它最近的那个已定位的祖先(相对/绝对)元素决定的。</p> </li> <li> <p>固定定位，相对于浏览器窗口定位，脱离普通流，不占据空间</p> <p>剩下的下篇见！！！(*￣3￣)╭</p> </li> </ol> <h2>参考资料</h2> <ol> <li> <p class="no-text-indent"> caopen.net </p> </li> <li> <p class="no-text-indent"> CSS三种基本定位机制 </p> </li> <li> <p class="no-text-indent"> css之BFC详解 </p> </li> <li> <p class="no-text-indent"> inline-boxd的前世今生 </p> </li> <li> <p class="no-text-indent"> 《 CSS.The.Definitive.Guide 》 </p> </li> <li> <p class="no-text-indent"> CSS float浮动的深入研究、详解及拓展 </p> </li> </ol> </div> <div class=""> <ul class="m-news-opt fix"> <li class="opt-item"> <a href='/htmldaima-266665.html' target='_blank'><p>< 上一篇</p><p class="ellipsis">HTML学习笔记之（二）颜色体系_html/css_WEB-ITnose</p></a> </li> <li class="opt-item ta-r"> <a href='/htmldaima-266667.html' target='_blank'><p>下一篇 ></p><p class="ellipsis">问个关于浮动的问题_html/css_WEB-ITnose</p></a> </li> </ul> </div> </div> </div> <div class="g-title fix"> <h2 class="title-txt">人气教程排行</h2> </div> <div class="m-rank u-dashed mb40"> <ul> <li class="rank-item"> <a href="/htmldaima-274978.html" title='如何生成一个调查问卷_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">230次</span> <span class="g-sort-num top">1</span> 如何生成一个调查问卷_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-274080.html" title='在页面直接显示日历_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">230次</span> <span class="g-sort-num second">2</span> 在页面直接显示日历_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-262106.html" title='如何点击a标签实现弹出inputfile上传文件对话框_HTML/Xhtml_网页制作' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">230次</span> <span class="g-sort-num third">3</span> 如何点击a标签实现弹出inputfile上传文件对话框_HTML/Xhtml_网页制作 </a> </li> <li class="rank-item"> <a href="/htmldaima-278863.html" title='关于列表标记的详细介绍' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">229次</span> <span class="g-sort-num ">4</span> 关于列表标记的详细介绍 </a> </li> <li class="rank-item"> <a href="/htmldaima-277331.html" title='cssborder-bottom（指定下边线的样式、宽度及颜色）' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">229次</span> <span class="g-sort-num ">5</span> cssborder-bottom（指定下边线的样式、宽度及颜色） </a> </li> <li class="rank-item"> <a href="/htmldaima-270548.html" title='html新闻详情页_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">229次</span> <span class="g-sort-num ">6</span> html新闻详情页_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-268070.html" title='为何页面内容和网页边缘有空隙_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">229次</span> <span class="g-sort-num ">7</span> 为何页面内容和网页边缘有空隙_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-269054.html" title='position:fixed定位时“高度坍塌”问题的解决_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">228次</span> <span class="g-sort-num ">8</span> position:fixed定位时“高度坍塌”问题的解决_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-280863.html" title='htmlp标签怎么换行？htmlp标签添加br换行标签的应用' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">227次</span> <span class="g-sort-num ">9</span> htmlp标签怎么换行？htmlp标签添加br换行标签的应用 </a> </li> <li class="rank-item"> <a href="/htmldaima-281519.html" title='HTML的<!DOCTYPE>标签' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">10</span> HTML的<!DOCTYPE>标签 </a> </li> <li class="rank-item"> <a href="/htmldaima-280725.html" title='html页面中友情链接怎么进行添加设置？（代码示例）' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">11</span> html页面中友情链接怎么进行添加设置？（代码示例） </a> </li> <li class="rank-item"> <a href="/htmldaima-278651.html" title='form表单中属性及功能应用介绍汇总' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">12</span> form表单中属性及功能应用介绍汇总 </a> </li> <li class="rank-item"> <a href="/htmldaima-278586.html" title='详解form标签中的method属性' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">13</span> 详解form标签中的method属性 </a> </li> <li class="rank-item"> <a href="/htmldaima-277758.html" title='HTML5Canvas逼真烟雾效果js插件' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">14</span> HTML5Canvas逼真烟雾效果js插件 </a> </li> <li class="rank-item"> <a href="/htmldaima-275669.html" title='页面跳转特效_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">15</span> 页面跳转特效_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-271209.html" title='改变鼠标选中区域的样式。_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">226次</span> <span class="g-sort-num ">16</span> 改变鼠标选中区域的样式。_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-273428.html" title='关于$("body").append()一段html代码，在页面写能触发事件，写在js文件里写就没有_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">225次</span> <span class="g-sort-num ">17</span> 关于$("body").append()一段html代码，在页面写能触发事件，写在js文件里写就没有_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-271182.html" title='CSS3悬浮动画效果_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">225次</span> <span class="g-sort-num ">18</span> CSS3悬浮动画效果_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-271093.html" title='纯C语言实现的CSS解析器：katana_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">225次</span> <span class="g-sort-num ">19</span> 纯C语言实现的CSS解析器：katana_html/css_WEB-ITnose </a> </li> <li class="rank-item"> <a href="/htmldaima-267953.html" title='body在默认情况下是具有margin外边距的_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank"> <span class="g-art-count fr">225次</span> <span class="g-sort-num ">20</span> body在默认情况下是具有margin外边距的_html/css_WEB-ITnose </a> </li> </ul> </div> </div> </div>  </div> </div>  <div class="footer"> 本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！</div>  <script type="text/javascript" src="/kan/js/read.js"></script> <div style="display:none"> <div class="login-box" id="login-dialog"> <div class="login-top"><a class="current" rel="nofollow" id="login1" onclick="setTab('login',1,2);" >登录</a></div> <div class="login-form" id="nav-signin">  <div class="login-box-form" id="con_login_1"> <form id="loginform" action="/user-center-login.html" method="post" onsubmit="return false;"> <p class="int-text"> <input class="email" id="username" name="username" type="text" value="用户名或Email" onfocus="if(this.value=='用户名或Email'){this.value='';}" onblur="if(this.value==''){this.value='用户名或Email';};" ></p> <p class="int-text"> <input class="password1" type="password" id="password" name="password" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';" > </p> <p class="int-info"> <label class="ui-label"> </label> <label for="agreement" class="ui-label-checkbox"> <input type="checkbox" value="" name="cookietime" id="cookietime" checked="checked" value="2592000"> <input type="hidden" name="notforward" id="notforward" value="1"> <input type="hidden" name="dosubmit" id="dosubmit" value="1">记住我的登录 </label> <a rel="nofollow" class="aright" href="/user-center-forgetpwd.html" target="_blank"> 忘记密码？ </a></p> <p class="int-btn"><a rel="nofollow" id="loginbt" class="loginbtn"><span>登录</span></a></p> </form> </div> <form id="regform" action="/user-center-reg.html" method="post"> <div class="login-reg" style="display: none;" id="con_login_2"> <input type="hidden" name="t" id="t"/> <p class="int-text"> <input id="email" name="email" type="text" value="Email" onfocus="if(this.value=='Email'){this.value='';}" onblur="if(this.value==''){this.value='Email';};"></p> <p class="int-text"> <input id="uname" name="username" type="text" value="用户名或昵称" onfocus="if(this.value=='用户名或昵称'){this.value='';}" onblur="if(this.value==''){this.value='用户名或昵称';};"></p> <p class="int-text"> <input type="password" id="pwd" name="password" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';"> </p> <p class="int-text1"><span class="inputbox"> <input id="validate" name="validate" type="text" value="验证码" onfocus="if(this.value=='验证码'){this.value='';}" onblur="if(this.value==''){this.value='验证码';};"> </span><span class="yzm-img"><img src="/user-checkcode-index" alt="看不清楚换一张" id="indexlogin"></p> <p class="int-info"> <label> <input value="" name="agreement" id="agreement" CHECKED="checked" type="checkbox"> 我已阅读<a rel="nofollow" href="/user-center-agreement.html">用户协议</a>及<a rel="nofollow" href="/user-center-agreement.html">版权声明</a></label> </p> <p class="int-btn"><input type="hidden" name="dosubmit"/> <a rel="nofollow" class="loginbtn" id="register"><span>注册</span></a></p> </div> </form> </div> </div> </div> </div> <script type="text/javascript" src="/kan/js/foot_js.js"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6dc1c3c5281cf70f49bc0bc860ec24f2"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript" src="/layui/layui.js"></script> <script> layui.use('code', function() { layui.code({ elem: 'pre', //默认值为.layui-code about: false, skin: 'notepad', title: 'php怎么实现数据库验证跳转代码块', encode: true //是否转义html标签。默认不开启 }); }); </script> </body> </html>