盒模型宽度的计算

普通盒模型

默认盒子属性：box-sizing:content-box;

width只包含内容宽度，不包含border和padding

offsetWidth =(width padding border),margin

width和height属性只会应用到这个元素的内容区

box-sizing:content–box;//定义引擎如何计算元素的总高度和总宽度

设置语句：box-sizing:border-box;

offsetWidth=width(padding和border都挤压到内容里面)

width和height包括内容区、padding和border,不算margin

左边宽度固定，右边宽度自适应。

利用flex布局，将左边元素设置为固定宽度200px,将右边的元素设置为flex:1
利用浮动。左边元素宽度设置为200px,且设置向左浮动。右边元素的margin-left设置为200px,宽度设置为auto
(默认为auto,撑满整个父元素)。margin-left/padding-left/calc
利用浮动。左边元素宽度固定，设置向左浮动。右侧元素设置overflow:hidden;这样右边就触发了BFC,BFC
的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。float+overflow:hidden
左列左浮动，将自身高度塌陷，使得其它块级元素可以和它占据同一行位置
右列利用自身流特性占满整行
右列设置overflow,触发BFC特性，使自身和左列浮动元素隔开，不沾满整行
绝对定位父级相对定位左边absolute定位，宽度固定。设置右边margin-left为左边元素的宽度值。
绝对定位，父级元素相对定位。左边元素宽度固定，右边元素absolute定位，left为宽度大小，其余方向为0。（有
歧义，谨慎使用)

使用calc计算

.left
display:inline-block;
width:240px;
}
right
display:inline-block;
width:calc(100%-240px);
}
//使用calc()函数计算<div>元素的宽度