盒子模型是css中用来描述元素布局的一种概念,是将每个元素看作是由content padding border margin组成的矩形盒子。
内容区域content是用来显示内容的,大小是通过width和height属性来控制
内边距padding是指内容区域外到边框的区域,大小是通过padding相关属性来控制
边框border是指外绕在内边距之外的框线,大小是通过border相关属性来控制
外边距margin是指边框以外,盒子框线与其他元素之间的空白区域,大小是通过margin相关属性来控制
盒子模型分为两种,标准盒子模型和怪异盒子模型
标准盒子模型中,设置的width和height是实际设置在content部分,盒子的实际占用空间还需要加上padding border margin的大小
在怪异盒子模型中,设置的width和height是设置在content padding border的总和上
在两种盒子模型中,padding都是需要另外计算的
默认值为标准盒子模型,可以通过box-sizing:border-box 来将标准盒子模型切换为怪异盒子模型