css盒子的模型组成 |css滚动悬浮

下面是 CSS 盒模型的组成部分：

.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid #ccc;
margin: 10px;
}

上面代码中，.box 类设置了一个宽度为 200px、高度为 100px 的盒子。可以看到这个盒子由以下几部分组成：

1. Content (内容区域)

这是盒子中实际包含内容的部分。它的大小由 width 和 height 属性决定。

2. Padding (内边距)

内边距是从内容区域到边框之间的一片区域。它的大小由 padding 属性决定。

3. Border (边框)

边框是围绕在内边距和内容区域外的一条线，它的类型、颜色和大小可以通过 border 属性来设置。

4. Margin (外边距)

外边距是指盒子与周围元素之间的空间。可以通过 margin 属性来控制它的大小。

了解了盒模型的组成部分，大家就能更好地掌握如何定位和布局元素。