简述对css盒子模型的理解_谈谈你对css盒模型的理解

一、基本概念

标准模型 和 IE盒模型

内容：border + content+ margin+padding

两种盒模型的区别

计算高度和宽度的方式不同

1.png

标准盒模型的计算方式 是content 的高度和宽度

1.png

IE盒模型的计算方式是 content+padding+border

二、css如何设置这两种模型

box-sizing: border-box; // ```IE```盒模型

box-sizing: content-box; //标准盒模型

三、 js如何设置获取盒模型对应的宽和高

我是浮动元素

const content = document.getElementById('content');

1.获取内联样式的宽、高.. (只能获取内联样式)

content.style.width //500px

content.style.height //100px

2.内联和外联样式都能取到(只支持IE)

content.currentStyle.width / height

3. 所有的都支持

window.getComputedStyle(content).width/height

4. 计算绝对位置，能获取4个元素值 top right width height

content.getBoundingClientRect().width / height / top /right

三、盒模型边距重叠

对于行内元素 margin-top margin-bottom设置无效，margin-left margin-right有效！ 对于相邻的块级元素margin-top和margin-bottom两者叠加按照一定的规则

(1) 都是整数 margin值取两者的最大值

(2) 都是负数 margin值取最小值

(3)两者正负相反，margin值取两者之和

四、BFC(块级格式化上下文)解决边距重叠问题(也可以清除浮动)

原理：(渲染规则)

(1) BFC这个元素的垂直方向的边距会发生重叠。

(2)BFC的区域不会与浮动元素的box重叠

(3)BFC在页面是一个独立的容器，内外元素互补干涉

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

五、怎么创建BFC

根元素：

(1) float属性不为none

(2) position为 absolute或fixed

(3) display为inline-block table-cell`````` table-caption``````flex`````` inline-flex

(4) overflow不为visible

六、应用场景

(1) 父元素和子元素的边距重叠

1.png

#par {

width: 100px;

height: 100px;

overflow: hidden;

background-color: red;

margin: auto;

}

#child {

width: 50px;

height: 50px;

margin: 25px;

background: yellow;

}

(2) BFC不与float重叠

1.png

2.png

#layout {

width: 100%;

/* background-color: red; */

}

#layout .left {

width: 100px;

height: 100px;

background: darkcyan;

float: left;

}

#layout .right {

overflow: auto;

height: 130px;

background-color: darkgoldenrod;

}

左浮动

右自适应

(3)BFC子元素即使是浮动元素，也不影响父集元素的计算。

如果不创建BFC 父级元素的高为 0

#float {

margin-top: 10px;

background-color: red;

overflow: auto;

}

.content {

float: left;

font-size: 30px;

width: 500px;

height: 100px;

}

我是浮动元素