文档中的每个元素都可以被看作是一个矩形盒子。
width&height用于设置内容区的宽高，该片区域用于显示内容。盒子高度默认为内容的高度。
padding代表内容盒子的外边界与外边框的内边界之间的距离。
border设定介于padding的外边缘与margin的内边缘之间，默认值为0。
margin代表盒子四周的区域。设值方法与padding类似。相邻元素的边框会合并（margincollapsing）
默认盒子模型
使用box-sizing属性可以改变盒子模型，取值“content-box”的盒子为默认盒子模型。width属性仅表示盒子内容所占的宽度height属性仅表示盒子内容所占的高度
边框盒子模型
使用box-sizing属性可以改变盒子模型，取值“border-box”的盒子为边框盒子模型。width=width+padding-left+padding-right+border-left+border-right
背景（backgrounds）
background-color 为元素设置一种颜色background-image 为原素设置一个背景图片background-clip 设定背景的覆盖范围background-origin 设定背景的起始点background-position设置为背景图像初始位置background-repeat设置背景图片的重复方式background-attachment设置背景图片的固定点background-size设置背景的大小background背景设置的速记写法background-color
为元素设置颜色
取值
关键字red、orange、yellow… color:red;
十六进制#333333 ==> #333 color:#333;
RGBr 红色 g 绿色 b 蓝色 color:rgb(0,0,0);
HSLRGBAHSLAbackground-image
为元素设置一个背景图片
取值
noneurl（）background-clip
设置背景的覆盖范围
取值
border-box：背景位于边框以外padding-box：背景位于内边距以内content-box：背景位于内容区background-origin
设定背景图片的起始覆盖点
取值
border-box：背景图片从边框的外边缘开始绘制padding-box：背景图片从内边距的外边缘开始绘制content-box：背景图片绘制在内容区background-position
设定背景图片的起始覆盖点
取值
关键字坐标background-repeat
设置为背景图像的重复方式
取值
repeat:为了覆盖整个背景范围，背景图片尽可能多的重复，在背景边缘切割(clipping)最后一个图片以使用整个背景范围。space:使用空白分隔开图片，尽可能使背景图片占满整个屏幕而不使用切割(clipping)round:将图片压缩或者是扩展以适应整个背景范围，不使用切割no-repeat:不重复background-attachment
设置为背景图像的固定点
取值
fixed:背景固定在视口上scroll:背景固定在自身元素上local:背景固定在自身元素的内容上background-size
设置背景的大小
取值
cover:背景铺满整个屏幕，（尽量不要使用大图覆盖小范围）background
背景相关属性的速记写法
取值
[<attachment>][<clip>][<color>][<image>][<position>][<repeat>]边框（border）
border-width：为元素指定边框的宽度border-style为元素指定边框样式border-color为元素指定边框颜色border-radius为元素指定圆角边框的半径border-image为元素设定边框背景border-image-source用于加载作为边框的图片 border-image-slice用于切割边框图片 border-image-repeat用于设置边框图片重复方式
border边框相关属性的速记写法border-width
为元素指定边框的宽度
取值
关键字:thin、medium、thick单位:px、emborder-style
为元素指定边框的样式
取值
none:不设置hidden:隐藏dotted:显示一系列的点dashed:显示一系列小线段solid:显示一条单一的实心直线double:显示两条实心直线groove:边框雕刻效果(与ridge相反)ridge:与groove相反inset:嵌入式边界框(与outset相反)outset:突出的边界框…border-color
为元素指定边框的颜色
取值
关键字十六进制RGBHSLRGBAHSLAborder-radius
为元素指定圆角边框的半径
取值
绝对值:px、mm、cm相对值:em、remborder-image
为元素设定边框背景的速记写法
子属性：
border-image-source用于加载作为边框的图片
url()
border-image-slice用于切割边框图片
onevalue:alltheslicesarethesamesize Twovalues:topandbottom,leftandright Threevalues:Top,leftandright,bottom Fourvalues:Top,right,bottom,left
border-image-repeat用于设置边框图片重复方式stretch:拉伸，不推荐；repeat:重复切割； round:重复自适应；space:重复自适应；
表格（Stylingtables）
table-layout指定显示表格的盒子，行，列的算法border-collapse指定表格的边框是合并还是分开caption-side指定caption坐落在表格的哪个位置上其他background为表格添加背景色table-layout
指定显示表格的盒子，行，列的算法
取值
auto:【默认值】绝大多数浏览器采用的一种布局表格的方式。table以及cell的宽度取决于包含在其中的内容fixed:table的宽度以及列的宽度取决于表格的第一行各列设定的宽度表格样式tablelborder-collapse
指定表格的边框是合并还是分开
取值
separate:【默认值】分开模式，表示相邻的两个格子都有独立边框collapse:合并模式，表示相邻的两个格子共享边框caption-side
指定caption坐落在表格的哪个位置上
取值
top:标题位于表格的上方bottom:标题位于表格的下方