CSS盒模型（详解）

目录

前言

一、什么是CSS盒模型

二、标准模型+IE模型的区别

1.CSS如何设置两种盒模型

2.JS如何设置/获取盒模型对应宽高：

---

前言

什么是css,css有几种，让我带你来了解一下

---

一、什么是CSS盒模型

css的盒模型由里到外包括：content（内容）、padding（内边距）、border（边框）、margin（外边距）四个部分。

css盒模型有两种：标准模型（浏览器默认）+ IE模型

二、标准模型+IE模型的区别

IE盒模型与W3C盒模型的唯一区别就是元素的宽度，元素的width=border + padding + content

标准盒子模型（content-box）：内容就是盒子的边界

IE盒子模型（border-box）：边框才是盒子边界

标准盒子模型（content-box）：元素的宽度width=内容宽度

IE盒子模型（border-box）：元素的宽度width=内容宽度 + padding + border

1.CSS如何设置两种盒模型

//在不设置box-sizing的情况下，box-sizing 默认是(标准盒子)content-box .

/* 标准模型 */
box-sizing:content-box;
 /*IE模型*/
box-sizing:border-box;

2.JS如何设置/获取盒模型对应宽高：

dom.style.width/height
//缺点：仅适用于有内联样式的
dom.currentStyle.width/height
//优点：获取渲染之后的运行的结果，相对更准确
//缺点：只有IE浏览器支持
window.getComputedStyle(dom).width/height
//优点：原理和2相同，但兼容性更好
dom.getBoundingClientRect().width/height
//原理同上，经常用于计算元素的绝对位置（根据视窗左顶点获得），getBoundingClientRect()方法可获得四个值：left/top/width/height

先到这里~ 

今日更新~

---

三、根据盒模型解释边距重叠 

父子元素、兄弟元素，当有外边距时，会取其中一个边距的最大值，作为实际的边距。
空元素的有上下边距时，也会取其中更大的边距值，作为实际的边距。
这就是边距折叠

四、BFC（边距重叠解决方案）

1、什么是BFC：

BFC是块级格式化上下文的意思。 它是CSS 2.1规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

2、触发BFC的条件：

浮动元素float值不为none
定位元素position值不为static和absolute
display属性值为flex、inline-block、table、table-cell等与table相关的值
overflow值不为visible  （ overflow (值为hidden/atuo/srcoll)设置有这些属性的box，都会产生BFC）

3、BFC原理： 

1.在BFC这个元素垂直方向的边距会发生重叠；
（垂直方向上地距离由margin决定，在同一个BFC的box 中，相邻的两个box的边距会重叠）
2.BFC的区域不会与float元素的box重叠
3.BFC在页面上是一个独立的容器，其里外的元素不会相互影响
4.计算BFC高度时，浮动元素也会参加计算

4、常见应用场景： 

清除浮动
外边距合并问题：解决兄弟元素垂直方向边距重叠 （给子元素增加了父元素div）外边距将不会重叠

解决margin重叠问题（添加独立BFC）
解决浮动高度塌陷问题（在父元素添加overflow：hidden）

关于CSS盒模型就到这里了~加油！冲冲冲