![]()
![]()
BFC
BFC的基础知识点：
css盒模型
清除浮动
div水平垂直居中
原型和原型链
回帖（5）
2020-11-5 11:33:29
css盒模型
盒模型有两种
1.标准盒模型:width+padding+margin+border
2.怪异盒模型:width+margin(width里面包括padding和border)
转换标准盒模型:box-sizing:content-box
转换怪异盒模型:box-sizing:border-box
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:38
BFC
当我们遇到双边距重叠的时候就可以用到BFC
父子重叠
比如一个大盒子里面一个小盒子 给子盒子添加margin-top,父盒子也会产生外边距,所以我们需要给父盒子添加overflow:hidden让父盒子变成BFC这样父子盒子就互不影响了
兄弟垂直重叠
如果是兄弟垂直重叠 那个外边距大以那个为准 需要添加空元素添加属性overflow:hidden解决。
BFC
当我们遇到双边距重叠的时候就可以用到BFC
父子重叠
比如一个大盒子里面一个小盒子 给子盒子添加margin-top,父盒子也会产生外边距,所以我们需要给父盒子添加overflow:hidden让父盒子变成BFC这样父子盒子就互不影响了
兄弟垂直重叠
如果是兄弟垂直重叠 那个外边距大以那个为准 需要添加空元素添加属性overflow:hidden解决。
举报
2020-11-5 11:33:53
清除浮动
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题
清除浮动有很多方法我平时常用的有四种
1.overflow:hidden
给父元素添加overflow:hidden解决
2.额外标签法
给谁清除浮动就在他后面添加一个空标签 并且添加clear:both属性即可解决
3.使用after伪元素清除浮动
4.使用before和after伪元素清除浮动
清除浮动
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题
清除浮动有很多方法我平时常用的有四种
1.overflow:hidden
给父元素添加overflow:hidden解决
2.额外标签法
给谁清除浮动就在他后面添加一个空标签 并且添加clear:both属性即可解决
3.使用after伪元素清除浮动
4.使用before和after伪元素清除浮动
举报
2020-11-5 11:34:04
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
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:39
原型和原型链
原型:
每个函数下都会有一个prototype显示原型
每个实例对象下都会有一个__proto__隐示原型
每个实例对象下的__proto__都指向自身构造函数的prototype显示原型
每个prototype都会有一个constructor指向他关联的构造函数
原型链:
找对象属性时,如果没有这个属性,就会去他的原型proto上去找,如果还找不到就会去原型的原型上去找,直到找到最顶部
原型和原型链
原型:
每个函数下都会有一个prototype显示原型
每个实例对象下都会有一个__proto__隐示原型
每个实例对象下的__proto__都指向自身构造函数的prototype显示原型
每个prototype都会有一个constructor指向他关联的构造函数
原型链:
找对象属性时,如果没有这个属性,就会去他的原型proto上去找,如果还找不到就会去原型的原型上去找,直到找到最顶部
举报
更多回帖
举报
