盒子模型四边走，冷门知识别错过！

盒子模型四边走，冷门知识别错过！

我们知道的盒子模型主要由4个区域组成，分别是内容区域（content），内边距区域（padding），边框区域（border）和外边距区域（margin）。对于不了解盒子模型的朋友可以移步到这里了解一下。

除了这4个区域外，盒子模型还有一些鲜为人知的冷门知识，比如：

• 替换元素

替换元素（replaced element），顾名思义，是指那些被浏览器用其他内容替换的元素，比如<img>元素和<video>元素。替换元素的盒子模型与其他元素不同，它没有内边距和边框，只有内容区域和外边距。

• 行内元素和块级元素

行内元素（inline element）和块级元素（block element）是两种不同的元素类型。行内元素在同一行内排列，而块级元素独占一行。大多数元素都是块级元素，比如<div>元素和<p>元素。一些特殊的元素是行内元素，比如<span>元素和<a>元素。

• 浮动元素

浮动元素（floated element）是指那些被设置了float属性的元素。浮动元素可以脱离文档流，在页面中自由移动。浮动元素的盒子模型与其他元素不同，它没有外边距，只有内容区域、内边距和边框。

• 绝对定位元素

绝对定位元素（absolutely positioned element）是指那些被设置了position: absolute属性的元素。绝对定位元素脱离文档流，它的位置由top、right、bottom和left属性决定。绝对定位元素的盒子模型与其他元素不同，它没有外边距，只有内容区域、内边距和边框。

• 百分比

百分比（percentage）是一种相对单位，它相对于父元素的尺寸。比如，width: 50%表示元素的宽度是其父元素宽度的50%。百分比可以用于设置元素的宽度、高度、内边距、边框和外边距。

• 负边距

负边距（negative margin）是指元素的外边距为负值。负边距可以用于将元素重叠在一起。比如，我们可以使用负边距来创建一个两列布局，其中两列内容重叠在一起。

• 伪类和伪元素

伪类（pseudo-class）和伪元素（pseudo-element）是CSS中两种特殊的选择器。伪类用于选择元素的特定状态，比如:hover伪类用于选择鼠标悬停在元素上的状态。伪元素用于选择元素的特定部分，比如::before伪元素用于选择元素前面的内容。

• 盒阴影

盒阴影（box-shadow）是一种CSS属性，它可以在元素周围创建阴影效果。盒阴影可以用于突出元素或为元素添加深度感。

以上这些就是一些鲜为人知的盒子模型冷门知识。希望这些知识对你有帮助，让你更好地理解和使用盒子模型。