css#box{width:400px;高度：400px；边距：70px；填充：20px；border:5pxsolidblack;}#child{width:100%;height:100%;}先看标准模式：元素父元素子元素标准模式，我们设置#box的宽高为400px，对应的内容（内容区域）宽高为400px，父元素为#box内容区域高度+上下边框+上下padding，结果为450px，子元素高度为#box内容区域高度然后再来看怪模态的css添加代码div{box-sizing:border-box;}元素父元素子元素标准模式，我们设置#box的宽高为400px，对应的内容（内容区域）宽高分别为width-top和bottompadding-上下边框，结果为350px；父元素的高度为#boxcontentareaheight+topandbottomborder+topandbottompadding，结果为400px，子元素的高度为#boxcontentareaheight350px在标准盒模型中，css设置宽度为x，对应元素的内容为x。在怪异模式下，元素的内容宽度是通过x减去左右padding，再减去左右外边距得到的。以上我们了解了标准盒子模式和怪异模式的区别。接下来，我们举一个应用的例子，仅供参考：创建一个div，div的左侧距离屏幕左侧20px，div的右侧在屏幕中间的标准模式可以轻松实现。位置：绝对；左：20px；右：50%；如果将右边位置改为屏幕中间位置左边30px，如何实现呢？您可以设置一个父元素，使div的右侧距离父元素30px。为了显示方便，这里使用行内样式