盒子模型

Posted 2020-12-01 nanhuaqiushui

盒子模型

背景

所有html元素都可以看做盒子，它包括：外边距（margin） + 内边距(padding) + 内容区域(content);

标注盒子模型：（W3C标准版，谷歌版）

IE非标准盒子模型：（低版本IE，IE5，6在怪异模式中使用自己的非标准模型）

区别：

• 在IE盒子模型中：宽高 = 内容宽高 + border + paddiing
• 标准盒子模型中：宽高 = 内容区域宽高

标准化处理方式：

方式一：CSS3样式box-sizing

• box-sizing: content-box | border-box | inherit;
• content-box: 宽度和高度分别应用到元素的内容框;
• border-box: 为元素设定的宽度和高度决定了元素的边框盒.为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制.

方式二：

使用HTML5的DOCTYP声明：<!DOCTYPE>
HTML4版本基于SGML，通过引用DTD声明标记语言的规则。
HTML5不基于SGML，所以不用引用DTD。

注意问题：

• 1.外边距合并
• 2.浏览器给body默认的margin为8px,因此body并非指整个页面，只是Document的一个子元素。