当前位置: 首页 > Web前端 > HTML

十分钟复习CSS盒模型和BFC

时间:2023-04-02 15:50:05 HTML

css盒模型和BFC本文收集整理网上资源系统复习CSS盒模型和BFC,节省复习时间。10分钟阅读什么是盒子模型?在每个文档中,每个元素都表示为一个矩形框,它会有内容区域、padding、border、margin。高度是内容区域的宽度和高度。IE盒子模型的宽高是border+padding+contentarea。如何切换盒子模型?使用box-sizing将border-box切换为IE框模型content-box。默认属性为standardmodebox模型的marginoverlap主要分为三种overlap。重叠规则:一大一小取最大,一正一负取相邻元素之间的重叠。父子嵌套重叠。空块级元素1.相邻元素之间Between//css*{margin:0;填充:0;边框:0;}#d1{宽度:100px;高度:100px;边距顶部:20px;底部边距:20px;背景色:红色;}#d2{宽度:100px;高度:100px;边距顶部:10px;background-color:blue;}//html

2.父子嵌套重叠//css*{margin:0;填充:0;边框:0;}#outer{宽度:300px;高度:300px;背景颜色:红色;margin-top:20px;}#inner{width:50px;高度:50px;背景色:蓝色;margin-top:10px;}//html
3.空块级元素BFC(marginoverlapprocessingscheme)是什么BFC块格式化上下文(BlockFormattingContext(BFC)是网页可视化CSS渲染的一部分,是布局过程中产生块级框的区域。也是浮动元素与其他元素交互的限定区域。每个块级框都会参与块格式化上下文(blockformattingcontext)的创建,每个块级元素都会生成至少一个块级框,即主块级框(principalblock-levelbox)有时会定义一个块级元素,尽管设置了宽度和高度。chrome中一行会找到一个除元素外与margin颜色相同的wrappingbox,即块级box;每个块级元素将生成块级框的几个特征。块级盒子会在垂直方向上,一个接一个地放置,每个盒子水平占据整个容器空间。块级框的垂直距离由上边距和下边距决定。属于同一BFC的两个或多个块级框的相邻边距将重叠。BFC是页面的一个隔离的独立容器,容器内的子元素不会影响到外部的元素。BFC计算高度时,浮动元素也参与计算。如何创建BFC?根元素或包含根元素的元素浮动元素(元素的float不是none)绝对定位元素(元素的位置是绝对的或固定的)溢出值不可见块元素显示值是inline-block,table-cell,table-captionBFC应用程序?清除浮动布局解决块级框边距重叠布局的原理是触发BFC重新计算元素大小//html

开始清除浮动Clearfloating清除浮动....

//css*{边距:0;填充:0;}div{宽度:100px;高度:100px;背景:绿色;向左飘浮;}p{背景:#f0faa5;溢出:隐藏;}clearfloat//htmlfloat1float2//css*{边距:0;填充:0;}div{宽度:100px;高度:100px;背景:绿色;float:left;}.div2{background:red;}.divwrap{border:3pxsolid#000;overflow:hidden;}解决margin重叠//html

helloworld

helloworld

helloworld

//css*{margin:0;填充:0;}.BFC{溢出:隐藏;}p{颜色:黑色;背景:#D499B9;行高:100px;宽度:200px;文本对齐:居中;各位阅读小伙伴和大家写博客分享参考资料MDN-CSSboxmodelMDN-marginmergew3school-marginoverlapMDN-visualformattingmodelMDN-blockformattingcontextTaro-CSSBFC详解OBKoro1-深入理解布局关于CSS-BFC的概念

猜你喜欢