content-box和border-box

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了content-box和border-box相关的知识,希望对你有一定的参考价值。

参考技术A

content-box是符合w3c标准的盒模型(默认的盒模型)
content-box是根据设定的样式确定元素content的宽高,有border和padding的情况下 额外增加盒子的宽高,内容宽高不受影响。

border-box是不符合w3c标准的盒模型(怪异盒子)
border-box是先根据设定的样式固定盒子的宽高,如果有border和padding的情况下, 再根据盒子的宽高减去border或者padding,内容的宽高会受到影响,会被减去border或者padding。

content-box,border-box与width100%,BFC与自适应布局

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=右边宽度可以解决)

 







以上是关于content-box和border-box的主要内容,如果未能解决你的问题,请参考以下文章

border-box与content-box的区别

content-box跟border-box的区别

content-box和border-box

width height 与 box-sizing : border-box ,content-box 的关系

理解box-sizing属性border-box,content-box

content-box