.box{ width: 200px; height: 200px; padding: 20px; border: 1px solid #000; margin: 20px; }
其中,内容区即为盒子内部的内容所占区域,它的大小可以由width和height属性来进行控制。内边距则是相对于内容区的内部空白区域,可以使用padding属性来进行设定。边框则是位于内边距之外的一层外框,可以使用border属性来进行设定。最后,外边距则是盒子与其他元素的间隔距离,可以使用margin属性来进行设定。
通过对这四个基本部分的灵活运用,可以实现诸如居中布局、多列布局、响应式布局等不同的页面布局方式,让web页面呈现出更加丰富多彩的效果。