盒模型是HTML元素布局的基础，包括内容、内边距、边框和外边距四部分。存在标准盒模型和怪异盒模型两种，可通过`box-sizing`属性切换。BFC（块级格式上下文）是CSS布局的一个关键概念，用于解决外边距折叠等问题。创建BFC的方式包括设置`overflow`、`position`、`float`和`display`属性。理解并掌握这两者对于优化网页布局至关重要。
盒模型与BFC:
什么是盒模型：
在我们html中，每个元素都可以看做成一个盒子 ：分为 四个部分 分别是：1、内容区域（content）2、内边距（padding）3、外边距（margin）4、边框（border）四个部分组成！
盒模型有两种：
标准盒模型的总宽度=border+padding+width
怪异盒模型的总宽度=border+padding+margin+（内容宽度）
那如何在怪异盒模型宽度和标准盒模型总宽度之间怎么切换呢？
box-sizing:border-box 怪异盒模型
box-sizing:content-box 标准盒模型
BFC是什么？
BFC就是块级格式上下文的意思，一块独立的布局环境，保护外部不受外部影响，也不影响外部
也是一种css的布局方式，只是我们用来解决外边距折叠的问题，BFC并不是因为解决这个问题而创的！
怎样使用BFC如何触发？
在box属性值为这些的情况下，都会让所属的box产生BFC
1.overflow:auto/hidden;
2.position:absoiute/fixed;
3.float:left/right;
4.display:inline-block/flex
扫一扫
到【灌水乐园】发言
