一文大白话讲清楚CSS盒子模型和块级格式化上下文（BFC）
一文大白话讲清楚CSS盒子模型和块级格式化上下文（BFC）
1.啥是个CSS盒子
- 鞋盒你家总有吧，方方正正，有长度有高度。
- css盒子跟这个八九不离十
- 当我们编写html页面时，写了很多的元素，比如"div","img"等，浏览器的渲染引擎会根据一定的标准（CSS基础框盒模型，CSS Basic box model），讲所有元素表示为一个个的盒子，然后按照你的css样式表去摆放这些盒子。
- 一个盒子有四个基本部分：
- content，盒子的主体，理解为家里鞋盒里的鞋；对应就是实际内容，比如说文字或者图片等
- padding，盒子的内边距，理解为鞋距离鞋盒内侧有多远
- border，盒子的边框，理解为鞋盒的面厚度
- margin，盒子的外边距，理解为鞋盒距离旁边的鞋盒有多远
-
来张图解释一下
-
上代码
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>.box{width: 200px;height: 100px;padding: 50px;margin: 40px;border: 30px solid red;overflow: hidden;box-sizing: content-box;}</style>
<div class="box">我是一个box1我是一个box1我是一个box1我是一个box1我是一个box1我是一个box
</div>
<div class="box">我是一个box2我是一个box2我是一个box2我是一个box2我是一个box2我是一个box2
</div>
- 发现问题没有，我们设置的width是200，height设置是100，可在浏览器面width和height变成了360x260
- 360怎么来的，200+50x2+30x2,也就是200+50+50+30+30，也就是width + padding-left + padding-right + border-let + border-right
- 当然这只是数字显示360，我们可以看到，当鼠标移动到box1上时，实际上最大圈的黄色也被选中了，也就说margin也被算在盒子的长宽里面了。
- 所以，盒子的实际宽度是440=360+40+40=360 + margin-left + margin-right
- 也就是说，盒子的真正宽度=width + padding-left + padding-right + border-let + border-right + margin-left + margin-right=440
- 这就是W3C标准盒子模型
- 问题来了，这咋就是标准盒子模型了呢，为啥叫模型呢，我们接着往下说