盒模型
2020-12-15 本文已影响0人
撑船的摆渡人
盒模型
CSS 基础框盒模型是 CSS 规范的一个模块，它定义了一种矩形的盒子——包括它们各自的内边距（padding）与外边距（margin ），并根据视觉格式化模型来生成元素，对其进行布置、编排、布局（lay out）。常被直译为盒子模型、盒模型或框模型。
CSS 基础框盒模型一般仅针对单个元素及其边距、内容进行布局，而非对多个元素进行综合的排版，即使外边距合并等特性涉及二个或二个以上元素之间部分属性的交互反馈。
不同部分的说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
标准盒模型
标准盒子模型.jpg
IE盒模型、怪异盒模型
IE盒子模型.jpg
浏览器兼容性
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。
解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。
如何在CSS 设置这两个模型
标准盒模型：box-sizing: content-box;
怪异盒模型：box-sizing: border-box;
说到这了可能就得再了解一个概念 BFC
