Open XiZev opened 3 years ago
在浏览器布局的时候,会把每一个HTML元素渲染成一个矩形的区域,盒模型就是对这个形状的一个抽象描述。
根据具体盒子的形状和组成,又可以对它由外到内进行细分:
标签内部的文本会在content内显示,可设置margin、padding的大小自由控制伸缩盒子。
就像我们买东西,收到的快递之后发现,本来就只有一部小小的手机(content),收到的却是那么大一个盒子。手机的包装盒和手机之间有间隔层(padding),手机盒子有厚度(border),手机盒子和快递箱之间还有一层泡沫板(margin)。这就是一个典型的盒子。
根据设置box-sizing定义匹配某个区域的特定元素,分为标准W3C盒模型和IE盒模型,区别在于width 属性所包含的大小。
标准W3C盒模型 —— box-sizing:content-box
width = content
IE盒模型 —— box-sizing:border-box
width = 2 * border + 2 * padding + contentt
两者进行比较,把盒子设置为IE盒模型,不论内边距距,边框如何改变盒子的真实宽高都不会发生改变。
在自适应的网页中,容器里并排显示两个同样的盒子,宽度设置成50%,如何调整padding都会在两个盒子内部调整,不会影响页面布局。
默认情况下,浏览器设置box-sizing:content-box
预设情况下,设置全局css样式(optional):
* { margin: 0; padding: 0; box-sizing: border-box; }
基本概念
根据具体盒子的形状和组成,又可以对它由外到内进行细分:
标签内部的文本会在content内显示,可设置margin、padding的大小自由控制伸缩盒子。
就像我们买东西,收到的快递之后发现,本来就只有一部小小的手机(content),收到的却是那么大一个盒子。手机的包装盒和手机之间有间隔层(padding),手机盒子有厚度(border),手机盒子和快递箱之间还有一层泡沫板(margin)。这就是一个典型的盒子。
两种盒模型
标准W3C盒模型 —— box-sizing:content-box
width = content
IE盒模型 —— box-sizing:border-box
width = 2 * border + 2 * padding + contentt
在自适应的网页中,容器里并排显示两个同样的盒子,宽度设置成50%,如何调整padding都会在两个盒子内部调整,不会影响页面布局。