三栏布局
方案一:position(绝对定位法) center的div需要放在最后面 绝对定位法原理将左右两边使用absolute定位,因为绝对定位使其脱离文档流,后面的center会自然流动到他们的上卖弄,然后margin属性,留出左右两边的宽度。就可以自适应了。
方案二:float 自身浮动法 center的div需要放到后面 自身浮动法的原理就是对左右使用float:left和float:right,float使左右两个元素脱离文档流,中间的正常文档流中,使用margin指定左右外边距对其进行一个定位。
方案三(圣杯布局):原理就是margin负值法。使用圣杯布局首先需要在center元素外部包含一个div,包含的div需要设置float属性使其形成一个BFC,并且这个宽度和margin的负值进行匹配
左边 定宽,右边自适应
方案一:左边设置浮动,右边宽度100% .left{float:left} .right{width:100%}
方案二:左边设置浮动,右边是总宽度减去左边的宽度.left{float:left} .right{width:calc(100vw-200px)}
方案三:父盒子display:flex right{flex:1}
这三种比较简单好记,别的方案过于复杂,实际情况也用不到