盒子属性和盒子模型(11)

目录

一、盒子属性

二、盒子模型

(1)、盒模型，又称标准盒子、内容盒子、w3c盒子

(2)、边框盒模型，又称IE盒子、边框盒子、怪异盒子

---

一、盒子属性

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。
• Border-radius -允许你设置元素的外边框圆角。

二、盒子模型

(1)、盒模型，又称标准盒子、内容盒子、w3c盒子

其中width和height是设置给内容区的宽高。

相关属性计算公式为:

盒子的宽:width+paddingLeft+paddingRight+borderLeft+borderRight

盒子的高:height+paddingTop+paddingBottom+borderTop+borderBottom

盒子所占页面宽:盒子宽+marginLeft+marginRight

盒子所占页面高:盒子高+marginTop+marginBottom

(2)、边框盒模型，又称IE盒子、边框盒子、怪异盒子

其中width是设置给盒子本身的。

相关属性计算公式为:

IE盒子宽:width=contentWidth+paddingLeft+paddingRight+borderLeft+borderRight

IE盒子高:height=contentHeight+paddingTop+paddingBottom+borderTop+borderBottom

IE盒子所占页面宽:width+marginLeft+marginRight

IE盒子所占页面高:height+marginTop+marginBottom