Highcharts 图表中大部分元素都可以通过 x 和 y 参数设置偏移量来改变其位置，偏移是相对其水平对齐和竖直对齐方式的；水平对齐可用的值有 “left”、“right” 和 “center”，默认是 “left”；竖直对齐可用在值有 “top”、“bottom” 和 “middle”。
图表布局
Highcharts 图表在网页中的位置和布局是由 CSS 控制图表容器 div 来实现的，图表的宽度和高度可以是指定容器 div 的宽度和高度，也可以直接通过图表配置 chart.width 和 chart.height 来指定。
图表绘图区（plotArea）是指包含在坐标轴内，用于绘制数据列的区域。绘图区的定位由两个配置集：外边距（margin，包括 marginLeft、marginRight等）和内边距（spacing，包含 spacingLeft、spacingRight 等）来决定。外边距指的是绘图区与图表的外边距，内边距指的是图表元素（包括标题、坐标轴等）与图表的内边距。 默认情况下，外边距值为 null，即自动计算外边距，外边距只用于旧版本的图表或在多个图表中需要对齐绘图区的情况下，另外外边距配置会覆盖相对应的内边距配置。
对许多不熟悉HTML的朋友来说，还以为是使用了CSS、JavaScript等技术，其实不然。 看完下面的内容你就会明白了。控制表格边框的显示
对使用Dreamweaver、FrontPage等所见即所得的网页编辑软件的朋友来说，很难控制表格的上下左右的边框显示与隐藏，其实你只要在HTML中的〈table〉〈/table〉标签页中添加一项 “frame” 属性即可。
不显示表格边框(frame=void)
只显示表格的上边框(frame=above )
只显示表格的下边框(frame=below )
只显示表格的上下边框(frame=hsides)
只显示表格的左右边框(frame=vsides)
只显示表格的左边框(frame=lhs)
只显示表格的右边框(frame=rhs)
例如，〈table width="75%" border="1" frame=void/above/below/hsides/vsides/lhs/rhs cellpadding="0" cellspacing="0"〉〈/table〉控制表格行与列的分割线
在网页设计中，如果版面没设计好，那么这个网页可以说是失败的。利用表格进行分栏，可以达到整齐排版的目的，美化你的网页外观。所谓分栏，就是让你的网页变成一个大表格，然后根据你的版面设计和内容安排，将这个表格分成不同的行和列，调整各个行和列的宽度和高度，以达到你排版的要求。当然了，你还可以在表格之中再嵌套表格，以达到更加复杂的排版需要。在设计过程中你可以灵活设置单元格边距和单元格间距的数值。在HTML语言中表格的分割线是由“rules” 属性来决定的。所以我们可以通过手工修改源代码的方法来控制分割线的显示与隐藏。
1、显示所有分割线(rules=all)
如〈table width="75%" border="1" rules=all cellpadding="0" cellspacing="0"〉
2、不显示任何分割线(rules=none)
3、只显示行与行之间的分割线(rules=rows)
4、只显示列与列之间分割线(rules=cols)
用表格边框实现单线显示
用线条来美化网页是网页设计者经常使用的手法之一。在网页中除了用〈hr〉标记来实现插入水平线外，我们还可以用表格来实现。FrontPage 2000默认的表格线比较粗，但只要稍加处理，就可以制作出一个细线表格，细线表格非常娟秀小巧，很有个性。它的具体操作方法是：在表格属性中将边框粗细设为“1”，将单元格边距和单元格间距设置为“0”，同时将亮边框设置成与表格背景相同的颜色，暗边框设成你想要的任一颜色即可，怎么样，细线表格出现了吧。
加个css box-sizing：border-box
设我们需要一个五列的布局。我们要考虑的第一件事就是外边距（margins）.假设所有的列都需要4%的外边距，我们需要为所有的外边距保留20%（4%*5（5列）=20%）的占宽比；然后我们从总宽比（100%）里面减去20%，得到的就是所有列实际占的总宽比。所以每一列的占宽比即16%（80% /5）。下面是一个详细的图表：
相应的CSS代码如下：
.column{
width:16%
margin: 2% 2%
float: left
background: #03a8d2
}
对应的界面是：
当我们给每一列添加一个2px的边框时，问题出现了，如下图，最后一列被挤到下面去了。
解决方案当然应该是：在之前的计算中我们应该考虑到边框（border），但是我们怎么去做呢？结论是，我们不能用百分比去设置border边框的大小，只能用一个固定的值。因为如果所有的都使用百分比设置，那么我们留给border的空间也会是一个变化的值，也就是说当页面宽度变化时，border的值也会跟着变化，这样是有问题的。这使得我们没有办法去决定我们边框的宽度！
解决方案
设置CSS的box-sizing属性值为“border-box”，这样就会把borders和padding全都包含在定义的宽高里面。这就意味着一个带有2px边框的200px的div仍然宽度是200px!!是不是很神奇呢？
.column{
width: 16%
margin: 2% 2%
float: left
background:#03a8d2
border: 2px solid black
box-sizing: border-box
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
}
即使我们加上padding，也同样可以正常显示：
