盒子模型总结

什么是盒子模型

在一个文档中，每个元素都被表示为一个矩形的盒子。确定这些盒子的尺寸, 属性 — 像它的颜色，背景，边框方面 — 和位置是渲染引擎的目标。
在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边与内容边。
在这里插入图片描述

盒子模型和box-sizing

CSS中的盒子模型（Box model）分为两种：W3C标准盒子模型和IE标准盒子模型。
大多数的浏览器都采用W3C标准，而IE采用的是IE标准。而怪异模式是指“部分浏览器在支持W3C标准的同时还保留了原先的解析模式”，怪异模式主要表现在IE内核的浏览器中。
通过对比来分析标准模式和怪异模式对于块大小的定义

盒子模型总结

盒子模型是浏览器位页面中的每个HTML元素生成的矩形盒子，这些盒子都是要按照可见版式模型在页面上排布，而且每个盒子的边框是不可见的，背景也是透明的。所以它有控制属性和元素属性这两种属性来对它进行一个包装和控制效果
控制属性有3种，分别是position属性，display属性和float属性。

position属性控制页面上元素的位置关系。
display属性控制元素是堆叠，并排或者不在页面上显示。
float属性提供控制的方法，以便把元素组成多栏布局。
元素属性分为3组：
1边框（border）：设置边框的宽度，样式和颜色。
2内边距（padding）：可以设置盒子内容区和边框的间距。
3外边距（margin）:可以设置盒子和邻元素的间距。
这3中元素属性还有4种相同的属性值，别是：top,right,bottm,left.

————————————————
侵权必删