[分享]css两种合模型

CSS盒模型指的是CSS中对于元素盒子的一种抽象表示方式，它将元素看做一个矩形方块，由内到外分别是元素的内容区域、内边距区域、边框区域、外边距区域。CSS的盒模型有两种不同的表示方式： boxsizi...

CSS盒模型指的是CSS中对于元素盒子的一种抽象表示方式，它将元素看做一个矩形方块，由内到外分别是元素的内容区域、内边距区域、边框区域、外边距区域。CSS的盒模型有两种不同的表示方式：

 box-sizing: content-box; 

这种盒模型是默认的盒模型，它表示元素的宽度和高度只包括内容的宽度和高度，不包括边框（border）和内边距（padding）。

另一种盒模型是：

 box-sizing: border-box; 

这种盒模型表示元素的宽度和高度包括了内容区域、内边距和边框的宽度和高度，即使设置了元素的宽度和高度，其实际显示的宽度和高度也不会超出设定的值。

随着web页面逐渐复杂，许多开发者都将border-box作为首选盒模型。原因在于，使用border-box可以更好地控制边框的宽度，同时可以更方便地根据百分比设置元素宽度和高度。