css的盒子模型介绍,CSS盒模型详解

盒模型基本概念

盒模型本质是一个盒子，包括边距，边框，填充，和实际内容。

标准盒模型和IE盒模型

不同在于高度和宽度计算的不同，标准模型width和height只是指content，IE盒模型的width和height是content、padding、border的和。

获取盒模型的宽高

JS：dom.style.width/height

但是页面中样式有三种设置方式：

设置元素中style属性

head标签中style标签写样式

link元素引入外部样式表

而style.width/height方式只能获得内联方式(第一种)设置的宽高

dom.style.currentStyle.width/height只有IE支持

widow.getComputedStyle(dom).width/height兼容到Chrome和Firefox

dom.getBoundingClientRect().width/height

边距重叠

父子元素的边距重叠

*{

margin: 0px;

padding: 0px;

}

.parent{

background-color: cadetblue;

width: 100px;

}

.child{

margin-top:10px;

background-color: greenyellow;

height: 100px;

}

当子元素高度为100px，且有一个10px的margin-top，此时父元素的高度为100px，而不是110px，效果如下：

image.png

相邻元素边距重叠

image.png

边距重叠规则

1、水平边距永远不会重合。

2、在规范文档中，2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下：

a、全部都为正值，取最大者；

b、不全是正值，则都取绝对值，然后用正值减去最大值；

c、没有正值，则都取绝对值，然后用0减去最大值。

注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。

3、相邻的盒模型中，如果其中的一个是浮动的(float)，垂直margin不会重叠，并且浮动的盒模型和它的子元素之间也是这样。

4、设置了overflow属性的元素和它的子元素之间的margin不被重叠(overflow取值为visible除外)。

5、设置了绝对定位(position:absolute)的盒模型，垂直margin不会被重叠，并且和他们的子元素之间也是一样。

6、设置了display:inline-block的元素，垂直margin不会重叠，甚至和他们的子元素之间也是一样。

7、如果一个盒模型的上下margin相邻，这时它的margin可能重叠覆盖(collapse through)它。在这种情况下，元素的位置(position)取决于它的相邻元素的margin是否重叠。

a、如果元素的margin和它的父元素的margin-top重叠在一起，盒模型border-top的边界定义和它的父元素相同。

b、另外，任意元素的父元素不参与margin的重叠，或者说只有父元素的margin-bottom是参与计算的。如果元素的border-top非零，那么元素的border-top边界位置和原来一样。

一个应用了清除操作的元素的margin-top绝不会和它的块级父元素的margin-bottom重叠。

注意，那些已经被重叠覆盖的元素的位置对其他已经重叠的元素的位置没有任何影响；只有在对这些元素的子元素定位时，border-top边界位置才是必需的。

8、根元素的垂直margin不会被重叠。

防止外边距重叠解决方案：

虽然外边距的重叠有其一定的意义，但有时候我们在设计上却不想让元素之间产生重叠，那么可以有如下几个建议可供参考：

外层元素padding代替

内层元素透明边框 border:1px solid transparent;

内层元素绝对定位 postion:absolute:

外层元素 overflow:hidden;

内层元素 加float:left;或display:inline-block;

内层元素padding:1px;

BFC

块级格式化上下文

BFC渲染规则(原理)：

BFC元素垂直

BFC区域不会与浮动元素的边距重叠

BFC在页面上是一个独立的容器，外面的元素不会影响里面，里面也不会影响外面

计算BFC高度的时候，浮动元素也会参与计算

应用场景：

解决边距重叠

清除浮动

怎么创建BFC：

float值不为none都行，只要浮动就想

position的值不是relative或者static

display为table

overflow不会visible就行 hidden和auto都行