盒子模型

1.默认盒子模型：W3C盒子

使用box-sizing属性可以改变盒子模型，取值“content-box”的盒子为默认盒子模型。

内容的高度一般由子元素填充，在框架布局时可以写上，内容填充好可以删除。

padding填充\margin间隔，都有四个属性值的设置-top、-right、-bottom、-left。速写时四个值（上左下右），两个值（上下、左右）。

margin上下间隔会叠加，上一个元素的margin-bottom，和下一个元素的margin-top会叠加，实际距离是两个中的最大值，左右不受影响。

border边框 border：1px solid red; /*粗细 样式 颜色*/

border-width：border-top-width，border-left-width，border-right-width，border-bottom-width

border-style：border-top-style，border-left-style，border-bottom-style，border-right-style

border-color：border-top-color，border-right-color，border-bottom-color，border-left-color

内容区的宽 width

内容区的高 height

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

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

所占屏幕空间的宽width+paddingLeft+paddingRight+borderLeft+borderRight+marginLeft+marginRight

所占屏幕空间的高height+paddingTop+paddingBottom+borderTop+borderBottom+marginTop+marginBottom

2.边框盒子模型:IE盒子 定宽定高

使用box-sizing属性可以改变盒子模型，取值“border-box”的盒子为边框盒子模型。IE5以下的默认模型

盒子的总宽度width

盒子的总高度height

内容区content的宽 width-paddingLeft-paddingRight-borderLeft-borderRight

内容区content的高 height-paddingTop-paddingBottom-borderTop-borderBottom

所占屏幕空间的宽 width+marginLeft+marginRight

所占屏幕空间的高 height+marginTop+marginBottom

盒子的背景样式

background-color	为元素设置一种颜色	rgb rgba
background-image	为元素设置一个背景图片	none url
background-size	设置背景的大小	cover 铺满整个屏幕 contain 图像适应内容区域 百分比 绝对值
background-repeat	设置背景图片的重复方式	repeat 重复覆盖 repeat-x x轴方向平铺一行 repeat-y y轴方向平铺一行 no-repeat 不重复
background-origin	设定背景的起始点	padding-box 图片从内边距的外边缘开始border-box 图片从边框的外边缘开始content-box 背景图片从内容区开始
background-clip	设定背景的覆盖范围	border-box 默认，背景位于边框以内padding-box 背景位于内边距以内content-box 背景位于内容区
background-attachment	设置背景图片的固定点	scrol 滚动条，背景随页面滚动而移动，即背景和元素绑定 fixed 随页面滚动背景不动 local 背景图相对于元素内容固定
background-position	设置为背景图像初始位置,相对于background-origin定义的位置，用来实现图片精灵(CSSsprites)技术	top 、left top center、top right center left、center center、center right bottom left、bottom center、bottom right

cover效果图 满满的拉伸缩小至盒子尺寸

contain效果图 以图片自身尺寸的最大值拉伸缩小至盒子尺寸

盒子的边框样式

border-width	为元素指定边框的宽度	关键字thin、medium、thick 单位px、em
border-style	为元素指定边框样式	none不设置 hidden隐藏 solid显示一条单一的实心直线 dotted显示一系列的点 dashed显示一系列小线段
border-color	为元素指定边框颜色	rgb rgba
border-radius	为元素指定圆角边框的半径为元素指定圆角边框的半径	绝对值px、mm、cm 相对值em、rem 与盒子同宽
box-shadow	为元素添加阴影

灯光效果

表格样式

border-collapse	指定表格的边框是合并还是分开	separate分开、 collapse合并
caption-side	指定caption坐落在表格的哪个位置上	bottom、top、left、right
background	为表格添加背景色	rgb、rgba