本文详细介绍了CSS中的盒子模型，包括content-box普通盒子模型和border-box怪异盒子模型。content-box的宽度和高度由内容区域、内边距和边框共同决定，导致盒子尺寸不固定。而border-box的宽度和高度仅包含元素设定的宽高，内边距和边框被包含在内，使得盒子尺寸固定。理解这两种模型对于精确布局至关重要。
谈一谈刚学的盒子理解
首先我们要知道盒子自身的宽高不包括外边距（margin）！！，包括的有宽高（width，height），内边距（padding），边框（border）。
1.我们先了解一下box-sizing:content-box普通盒子模型
1.1.我们先创建一个普通盒子模型设置好自身的css属性
1.2我们可以从中了解到content-box普通盒子模型自身的宽高是由设置的元素宽高（普通盒子模型下元素内容宽高等于元素宽高）+内边距+边框，所以普通盒子模型是不固定的。
2.接下来了解一下border-box怪异盒子模型
2.1..我们先创建一个怪异盒子模型设置好自身的css属性
2.2 从中我们可以了解到border-box怪异盒子模型自身的宽高其实是元素设置的宽高本身，我们所设置的内边距，边框，都填充挤压到元素宽高本身。而元素内容的宽高也就是元素宽高-内边距-边框。所以怪异盒子模型是固定的。
拓展：当元素本身没有设置box-sizing盒子模型时，其元素默认content-box普通盒子模型
扫一扫
217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
