CSS知识归纳—2

css盒模型

每个元素都有其对应的盒模型：

border边框，border-width、border-style（solid实线、dashed虚线、dotted点状、double双线）、border-color；

padding内边距 ；

margin外边框，可以为赋值，使元素内容区域向外展开；元素间上下外边距会合并，取两元素间较大外边距作为间距，左右外边距则不存在合并；

若一个元素为空元素只有外边距，则上下外边距会合并，在遇到另一个元素后仍会与其外边距合并。

*一些元素默认设定了盒模型属性值，所以在样式表开头一般先去除这些元素的默认样式，方便我们自定义样式。

相关属性计算：

offsetWidth=元素内容区宽度+左右内边距+左右边框宽度；

offsetHeight=元素内容区高度+上下内边距+上下边框宽度；

clientWidth=元素内容区宽度+左右内边距；

clientHeight==元素内容区高度+上下内边距；

css3里border-sizing属性可以重新定义盒模型：

当border-sizing：content-box

width=元素内容区宽度；

height=元素内容区高度；

当border-sizing：border-box

width=元素内容区宽度+左右内边距+左右边框宽度；

height=元素内容区高度+上下内边距+上下边框宽度；

*下一篇是元素的定位