css盒模型
盒模型有两种
1.标准盒模型:width+padding+margin+border
2.怪异盒模型:width+margin(width里面包括padding和border)
转换标准盒模型:box-sizing:content-box
转换怪异盒模型:box-sizing:border-box
BFC
当我们遇到双边距重叠的时候就可以用到BFC
父子重叠
比如一个大盒子里面一个小盒子 给子盒子添加margin-top,父盒子也会产生外边距,所以我们需要给父盒子添加overflow:hidden让父盒子变成BFC这样父子盒子就互不影响了
兄弟垂直重叠
如果是兄弟垂直重叠 那个外边距大以那个为准 需要添加空元素添加属性overflow:hidden解决。
总结:
BFC是格式化上下文,是css的一种布局方式 ,但是我们可以拿他来解决边距重叠,BFC并不是专门用来解决这个问题而创的。
清除浮动
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题
清除浮动有很多方法我平时常用的有四种
1.overflow:hidden
给父元素添加overflow:hidden解决
2.额外标签法
给谁清除浮动就在他后面添加一个空标签 并且添加clear:both属性即可解决
3.使用after伪元素清除浮动
4.使用before和after伪元素清除浮动
div水平垂直居中
我常用的有三种
1.父相子绝
.父{
100px;
height:100px;
position:relative
}
.子{
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
原型 原型链
原型:
每个函数下都会有一个prototype显示原型
每个实例对象下都会有一个__proto__隐示原型
每个实例对象下的__proto__都指向自身构造函数的prototype显示原型
每个prototype都会有一个constructor指向他关联的构造函数
原型链:
找对象属性时,如果没有这个属性,就会去他的原型proto上去找,如果还找不到就会去原型的原型上去找,直到找到最顶部