【学习笔记12】CSS：盒子模型及背景样式

盒子模型：

1. 默认盒子模型，又叫W3C盒子，取值为content-box

其中，width/height仅表示盒子内容所占的宽度/高度。

盒子的宽=width+padding_left+padding_right+border_left+border_right

盒子的高=height+padding_top+padding_bottom+border_top+border_bottom

所占屏幕的宽=盒子的宽+margin_left+margin_right

所占屏幕的高=盒子的高+margin_top+margin_bottom

2.边框盒子模型，又称IE模型，取值border_box

盒子的宽：Width=width+padding_left+padding_right+border_left+border_right

盒子的高：Height=height+padding_top+padding_bottom+border_top+border_bottom

内容区的宽=Width-padding_left-padding_right-border_left-border_right

内容区的高=Height-padding_top-padding_bottom-border_top-border_bottom

所占屏幕空间的宽=Width+margin_left+margin_right

所占屏幕的高=Height+margin_top+margin_bottom

3.盒子背景样式

• background-color：背景颜色，取值有关键字、十六进制、RGB、RGBA、HSL、HSLA
• background-image：插入背景图片，取值有none（默认）、url（图片地址）
• background-size：背景的大小，取值有cover、contain、百分比
• background-repeat：平铺效果，取值有repeat（默认）、repeat-x/y（横轴/竖轴平铺）、no-repeat（不重复）
• background-origin：设置背景图片的起始覆盖点，取值有padding-box,border-box,content-box
• background-clip:设置背景的覆盖范围，取值同origin.
• background-attachment:设置为背景图像的固定点，取值有scroll（默认滚动，即背景和元素是相绑定的），fixed（相对于视角固定），local（相对于内容元素固定）
• background-position：设置背景图像初始位置，可用来实现图片精灵技术，取值方式有关键字和坐标（注意正负）