发 帖  
原厂入驻New
[问答]

BFC的基础知识点有哪些?

36 BFC
分享
BFC的基础知识点:
css盒模型
清除浮动
div水平垂直居中
原型和原型链  
0
2020-11-5 06:02:23   评论 分享淘帖 邀请回答
5个回答
css盒模型

盒模型有两种
1.标准盒模型:width+padding+margin+border
2.怪异盒模型:width+margin(width里面包括padding和border)
转换标准盒模型:box-sizing:content-box
转换怪异盒模型:box-sizing:border-box
2020-11-5 11:33:29 评论

举报

BFC

当我们遇到双边距重叠的时候就可以用到BFC
父子重叠
比如一个大盒子里面一个小盒子 给子盒子添加margin-top,父盒子也会产生外边距,所以我们需要给父盒子添加overflow:hidden让父盒子变成BFC这样父子盒子就互不影响了
兄弟垂直重叠
如果是兄弟垂直重叠 那个外边距大以那个为准 需要添加空元素添加属性overflow:hidden解决。
2020-11-5 11:33:38 评论

举报

清除浮动

清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题
清除浮动有很多方法我平时常用的有四种
1.overflow:hidden
给父元素添加overflow:hidden解决
2.额外标签法
给谁清除浮动就在他后面添加一个空标签 并且添加clear:both属性即可解决
3.使用after伪元素清除浮动
4.使用before和after伪元素清除浮动
2020-11-5 11:33:53 评论

举报

div水平垂直居中

我常用的有三种
1.父相子绝
.父{ width:100px; height:100px; position:relative } .子{ width:50px; height:50px; position:absolute; left:50%; top:50%; margin-left:-25px; margin-top:-25px; }  父元素添加:position:relative
子元素添加:position:absolute然后添加left:50%,top:50%现在差不多已经居中,再移动自身的一半:margin-left:100px,margin-top:100px
2.父相子绝+margin:auto
父元素添加:position:relative
子元素添加:position:absolute然后添加left:0,top:0,bottom:0,right:0现在差不多已经居中,再移动自身的一半:margin:auto
3.弹性盒子
父元素添加:display:flex,jistify-content:center,align-items:center
2020-11-5 11:34:04 评论

举报

原型和原型链  

原型:
每个函数下都会有一个prototype显示原型
每个实例对象下都会有一个__proto__隐示原型
每个实例对象下的__proto__都指向自身构造函数的prototype显示原型
每个prototype都会有一个constructor指向他关联的构造函数
原型链:
找对象属性时,如果没有这个属性,就会去他的原型proto上去找,如果还找不到就会去原型的原型上去找,直到找到最顶部
2020-11-5 11:34:39 评论

举报

撰写答案

你正在撰写答案

如果你是对答案或其他答案精选点评或询问,请使用“评论”功能。

高级模式
您需要登录后才可以回帖 登录 | 注册

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容图片侵权或者其他问题,请联系本站作侵删。 侵权投诉
我要提问
关闭

站长推荐 上一条 /9 下一条

快速回复 返回顶部 返回列表