我
说说你对盒模型的理解，以及如何告知浏览器使用不同的盒模型渲染布局。
难度：
CSS 盒模型描述了以文档树中的元素而生成的矩形框，并根据排版模式进行布局。每个盒子都有一个内容区域（例如文本，图像等）以及周围可选的padding、border和margin区域。
CSS 盒模型负责计算：
- 块级元素占用多少空间。
- 边框是否重叠，边距是否合并。
- 盒子的尺寸。
盒模型有以下规则：
- 块级元素的大小由
width、height、padding、border和margin决定。 - 如果没有指定
height，则块级元素的高度等于其包含子元素的内容高度加上padding（除非有浮动元素，请参阅下文）。 - 如果没有指定
width，则非浮动块级元素的宽度等于其父元素的宽度减去父元素的padding。 - 元素的
height是由内容的height来计算的。 - 元素的
width是由内容的width来计算的。 - 默认情况下，
padding和border不是元素width和height的组成部分。