Question

默认情况下,如何计算css盒子模型幅面大小？

Answer 1

标准盒子模型的尺寸为：“内容的宽高+两侧内边距padding的大小+两侧边框border的大小”；而IE盒子模型的尺寸直接就为：“内容的宽高”，盒子设置的宽/高属性就是盒子自身的整体尺寸，如果带有内边距或边框，则通过缩小内容区域来实现。

盒子模型（Box Modle）可以用来对元素进行布局，包括实际内容（content）、内边距（padding）、边框（border）与外边距（margin）这几个部分。

一、盒模型的分类

盒子模型分为两种：ie盒子模型（怪异盒模型）和标准w3c盒模型。

二、标准模型与 IE 模型的尺寸计算

1、标准盒子的尺寸计算

盒子自身的尺寸：内容的宽高+两侧内边距的大小+两侧边框的大小

盒子在页面中占位的尺寸：内容的宽高+两侧内边距+两侧边框+两侧外边距

2、 IE盒子的尺寸计算

盒子自身的尺寸：内容的宽高

盒子在页面中占位的尺寸：内容的宽高+两侧外边距

IE盒子直接将宽/高属性设定为盒子自身的整体尺寸，如果带有内边距或边框，则通过缩小内容区域来实现

Answer 2

默认情况下，计算 CSS 盒子模型的尺寸时，需要考虑元素的内容区域（content）、内边距（padding）、边框（border）以及可选的外边距（margin）。
以下是 CSS 盒子模型中各部分的计算方式：
1. 内容区域（Content）：内容区域指的是元素实际用于显示内容的区域，包括文本、图片或其他嵌套元素。默认情况下，元素的宽度和高度由内容的大小决定。可以使用 `width` 和 `height` 属性来显式设置内容区域的尺寸。
2. 内边距（Padding）：内边距指的是元素内容区域与边框之间的空白区域。可以使用 `padding` 属性来设置内边距的大小，可以分别指定上、右、下、左四个方向的内边距值，或者使用缩写形式同时设置四个方向的内边距。
3. 边框（Border）：边框是围绕内容和内边距的线条或样式。可以使用 `border` 属性来设置边框的样式、宽度和颜色。边框的尺寸会增加元素的宽度和高度。
4. 外边距（Margin）：外边距指的是元素与周围元素之间的空白区域。可以使用 `margin` 属性来设置外边距的大小，类似于内边距，可以分别指定上、右、下、左四个方向的外边距值，或者使用缩写形式同时设置四个方向的外边距。
在计算盒子模型的尺寸时，通常采用以下公式：
总宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
总高度 = 内容高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距
默认情况下，盒子模型的尺寸计算基于内容区域的大小。通过添加内边距、边框和外边距，可以增加元素的尺寸并改变其在页面中的布局和显示效果。
需要注意的是，CSS 盒子模型的计算方式可以通过 `box-sizing` 属性进行调整。默认情况下，`box-sizing` 的值为 `content-box`，即尺寸计算不包括内边距和边框。但是，你可以将 `box-sizing` 设置为 `border-box`，使尺寸计算包括内边距和边框，从而更方便地控制盒子模型的大小。