1.content-box:with指其content width100%的话往往会出现超出的情况
border-box;width指content+padding+borderwidth
现在一般都用border-box width100%实现自适应布局
2.另外说说border与outline的区别 outline不占任何空间 并且不一定是矩形
width:auto对块级元素来讲就是占据整行
与height:auto 是指根据内容决定高度
3.bfc 块级格式化上下文
bfc元素的特点:BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
1、内部的Box会在垂直方向上一个接一个的放置
2、垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）
3、每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
4、BFC的区域不会与float的元素区域重叠
5、计算BFC的高度时，浮动子元素也参与计算
6、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然
触发BFC的条件:
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
BFC也会带来很多弊端
1、display: table 可能引发响应性问题
2、overflow: scroll 可能产生多余的滚动条
3、float: left 将把元素移至左侧，并被其他元素环绕
4、overflow: hidden 将裁切溢出元素
5.根元素
因而无论什么时候需要创建BFC，都要基于自身的需要来考虑
实际应用:
1.margin重叠
2.浮动高度坍塌
3.实现自适应布局(用postion absolute left=右边宽度可以解决)
原文地址：https://www.cnblogs.com/stephenleee/p/10275698.html