CSS*{保证金：0;填充：0}div{宽度：200px；height:200px;}.box1{背景色:orange;边框：20px纯灰色；填充：20px；边距：20px；}.box2{background-color:yellow;}打开CSS文件，定义通配符选择器，声明样式margin:0,padding:0。取消所有元素的默认margin和padding样式。定义div选择器，声明样式：width:200px,height:200px。为两个div元素添加宽度和高度。定义.box1选择器并声明样式：背景颜色：橙色。定义.box2选择器并声明样式：背景颜色：黄色。在浏览器中预览效果，两个背景色的方框就做好了。为box1添加样式：border:20pxsolidgrey，为橙色框添加边框。与黄色框相比，橙色框的总宽度增加了40px，总高度也增加了40px。继续给box1添加样式：padding:20px。此时橙色框继续变大。与黄色框相比，宽度和高度又增加了40px。继续给box1添加样式：margin:20px。这时候我们发现因为添加了margin，所以橙色框的位置发生了偏移。通过这个例子，我们发现给元素添加padding、border、margin后，盒子会变大，位置也会发生变化。那么，如何在所有浏览器中正确设置元素的宽度和高度呢？这对于精确的页面布局意义重大！计算盒子的宽和高，请牢记这两个公式：盒子宽度=内容宽度+左内边距+右内边距+左边框+右边框+左外边距+右外边距盒子高度=内容高度+顶部内边距+底部padding+TopBorder+BottomBorder+TopMargin+BottomMargin同样：当你应用CSS设置元素的宽度和高度属性时，你只设置了元素内容区域的宽度和高度。要计算元素的完整大小，必须添加填充、边框和边距。在标准盒模型之上我们称计算元素大小的盒模型。给元素设置了margin和padding属性后，元素本身的宽高是否可以固定为设置值？这就需要应用另一种盒模型，称为怪盒模型。为元素声明box-sizing属性，值为border-box，元素将根据奇怪的盒子模型调整大小。让我们从一个例子开始。在019-css-box-model文件夹下，创建一个box-model-2.html文件和一个box-model-2.css文件。构建html基本代码并导入样式文件。为了对比效果，我们还是定义两个div元素，添加不同的类名，补全文字。HTML我是一个div，用来演示奇怪的盒子