一文大白话讲清楚CSS盒子和盒子模型
一文大白话讲清楚CSS盒子和盒子模型
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;}</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标准盒子模型
- 问题来了，这咋就是标准盒子模型了呢，为啥叫模型呢，我们接着往下说
2. 啥是盒子模型
- 上面我们讲了，本来width是200，后面成了440了，原因是加了border，padding,那是不是所有的情况下都这么加呢，还真不是。
- 所以我们怎么加，按照什么规则加就是盒子模型
- 说白了，盒子模型就是怎么以什么样的方式计算盒子的真实长宽。加哪个，哪个不加
- 好吗，接下来说具体怎么个划分法
3. 常见的盒子模型
3.1 W3C标准盒子模型
- 既然说了，盒子模型就是怎么计算盒子的真实长宽，那直接上规则
- 宽=width(内容宽度) + padding-left + padding-right + border-left + border-right + margin-left + margin-right
- 高=height(内容高度)+ padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
- 也就是说，width只是内容的高度。
- 而且浏览器默认的盒子模型就是W3C标准盒子模型
3.2 IE怪异盒子模型
-
IE净出幺蛾子，没办法，人家是祖先，那他怪异在哪呢
-
她怪异在
-
宽=width(内容宽度+padding+border)+margin
-
高=height(内容高度+padding+border)+margin
-
啥意思，就是我们css写了width=200，这个width就包含内容的宽，border和padding的值
-
对比，W3C盒子模型，我们设置了width=200，这个宽就只是内容的宽，border和padding不在里面。
-
而IE怪异模型，内容的宽+border+padding=width;也就是内容的宽+100+60=200，所以内容的宽其实只有40
-
我们可以把1.0的代码切换成IE怪异盒子模型
-
上图
-
看到了吧，内容就被挤得剩一点点了
4.怎么切换盒子模型呢
- 问得好，通过box-sizing:—
- box-sizing:content-box;内容盒子，意思内容就是原盒子，没错了，这就是W3C标准盒子模型了
- box-sizing:border-box;边框盒子，意思边框以内的东西才是原盒子，没错了，这是IE怪异模型了
- box-sizing：inherit;继承父元素的盒子模型，这个好理解吧，我爹啥模型我就啥模型
- 上代码
<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;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>