盒子与表格样式

盒子模型

默认的盒子模型
width:content 内容宽度100% 100px 10em
height：content 内容高度0 由子元素填充 100px 10em 100%
100%相对于父元素

border 边框

border:1px solid red; 粗细 样式 颜色

padding：填充

padding:10px; 上右下左
padding:10px 20px; 上下 左右
padding:10px 20px 30px 40px; 上右下左
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;

margin 间隔

margin:10px; 上右下左
margin:10px 20px;上下 左右
margin:10px 20px 30px 40px; 上右下左
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;

margin：上下间距会叠加，左右不受影响。建议margin不写负值，可能会出现盒子重叠（margin、padding有负值，但是不建议使用）

W3C盒子（主流使用）

内容区的宽 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

ie盒子（逐渐淘汰）

内容区的宽 width-paddingLeft-paddingRight-borderLeft-borderRight 
内容区的高 height-paddingTop-paddingBottom-borderTop-borderBottom 
盒子的宽 width 
盒子的高 height 
所占屏幕空间的宽 width+marginLeft+marginRight 
所占屏幕空间的高 height+marginTop+marginBottom

box-sizing 可以改变盒子模型

取值“content-box”的盒子为默认W3C盒子模型，div标签里的width属性只等于content的宽度
取值“border-box”即IE盒子模型，div标签里的width等于content、padding、border相加的宽度。IE盒子定宽定高，布局有优势

background 背景

background-color 为元素设置一种颜色 
background-image 为元素设置一个背景图片 
background-size 设置背景的大小 
background-repeat 设置背景图片的重复方式 
background-origin 设定背景的起始点 
background-clip 设定背景的覆盖范围 
background-attachment 设置背景图片的固定点 
background-position 设置为背景图像初始位置，可以实现图片精灵 
background 背景设置的速记写法

background-color 为元素设置一种颜色

取值 
	关键字 
	十六进制 
	RGB 
	HSL 
	RGBA 
	HSLA
content与padding都会受到background-color的影响

background-size 设置背景的大小

取值 
	cover  背景铺满整个屏幕，（尽量不要使用大图覆盖小范围） 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。按照背景定位区域的最大边扩展 。 
	contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。按照背景定位区域的最小边扩展，如果不重复，可能背景定位区域有一部分没有背景图片。 百分比 
	绝对值

background-repeat 设置为背景图像的重复方式

取值 
	repeat 为了覆盖整个背景范围，背景图片尽可能多的重复，在背景边缘切割(clipping)最后一个图片以使用整个背景范围
	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 设置为背景图像的固定点

取值 
	scroll 默认值，背景图像会随着页面其余部分的滚动而移动，背景固定在自身 元素上，背景图相对于元素固定，背景随页面滚动而移动，即背景和元素绑定 。 
	fixed 背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置 在了视口区上。 
	local 背景图相对于元素内容固定存在内部滚动条的情况下，scroll就相当于fixed，而local就相当于scroll

background-position 设置为背景图像初始位置,相对于background-origin定义的位置，用来实现图片精灵 (CSS sprites)技术

取值 
	关键字 
		top left 
		top center 
		top right 
		center left 
		center center 
		center right 
		bottom left 
		bottom center 
		bottom right 
	坐标

background 背景相关属性的速记写法

取值 [<attachment>][<clip>][<color>][<image>][<position>][<repeat>]

border边框

border-width 为元素指定边框的宽度 
border-style 为元素指定边框样式 
border-color 为元素指定边框颜色 
border-radius 为元素指定圆角边框的半径 
border 边框相关属性的速记写法

border-width 为元素指定边框的宽度

四个边可单独设置样式 
border-top-width
border-right-width
border-bottom-width
border-left-width
取值： 
	关键字 thin 、medium、thick 
	单位 px、em

border-style 为元素指定边框的样式

四个边可单独设置样式 
border-top-style
border-right-style
border-bottom-style
border-left-style
取值： 
	none 不设置 
	hidden 隐藏 
	dotted 显示一系列的点 
	dashed 显示一系列小线段 
	solid 显示一条单一的实心直线 
	double 显示两条实心直线 
	groove 边框雕刻效果(与ridge相反) 
	ridge 与groove相反 
	inset 嵌入式边界框(与outset相反) 
	outset 突出的边界框 
	 …

border-color 为元素指定边框的颜色

四个边可单独设置样式 
border-top-color
border-right-color
border-bottom-color
border-left-color
取值 
	关键字 
		十六进制 
		RGB 
		HSL 
		RGBA
		HSLA

border-radius 为元素指定圆角边框的半径

取值 
	绝对值 px、mm 、cm 
	相对值 em 、rem

border-image 可用图片做边框

表格样式

border-collapse 指定表格的边框是合并还是分开
caption-side 指定caption坐落在表格的哪个位置上
其他 
	background 为表格添加背景色

border-collapse 指定表格的边框是合并还是分开

取值 
	separate 【默认值】分开模式，表示相邻的两个格子都有独立边框 
	collapse 合并模式，表示相邻的两个格子共享边框

caption-side 指定caption坐落在表格的哪个位置上

取值 
	top 标题位于表格的上方 
	bottom 标题位于表格的下方 
	left 标题位于表格的左侧 
	right 标题位于表格的右侧