精通CSS与HTML设计模式 第八章（盒型模型属性）
代码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<style type="text/css">
div
{
border: solid 1px;
}
.gp
{
position: relative;
width: 500px;
height: 200px;
margin-left:150px;
margin-top:150px;
}
.parent
{
width: 300px;
height: 150px;
margin-left: 20px;
}
#hss
{
margin-left: 30px;
margin-right: 30px;
width: auto;
}
#vsa
{
position:absolute;
width:120px;
left:auto;
margin-left:auto;
right:0;
margin-right:70px;
height:auto;
top:0;
margin-top:-30px;
bottom:0;
margin-bottom:-30px;
z-index:1000;
}
#hsa
{
position:absolute;
margin-left:-30px;
margin-right:-30px;
margin-top:30px;
margin-bottom:-30px;
width:auto;
left:0;
right:0;
}
</style>
</head>
<body>
<div class="gp">
定位的祖父元素
<div class="parent">
没有定位的父元素
<div id="hss">
水平拉伸的静态元素</div>
<div id="vsa">
垂直拉伸的绝对元素</div>
<div id="hsa">
水平拉伸的绝对元素</div>
</div>
</div>
</body>
</html>
一、缩进
static 缩进 水平拉伸静态元素
父元素width为300px
{
width:auto;
margin-left:50px;
margin-right:50px;
width:auto;
}
这样的话子元素左右各缩进了50px 子元素宽度为100px
总结：对于静态元素设置了width:auto，除去左右空隙就是其剩下的宽度
absolute 缩进 垂直拉伸的绝对元素
绝对定位的margin值必须要知道它的top,bottom,left,right,因为只有这样才能知道它外框，不然他是包围元素的内容
总结：对于绝对定位的，如果想要其垂直拉伸，必须指定其top,bottom 将其拉伸，同理可得left,rigth将其左右拉伸
二、静态元素偏移
静态元素偏移一般采用margin-left margin-right margin-top margin-bottom 进行偏移
但是这里对于偏移出父元素，maggin-left:-30px 这种IE6,7都采取截断的方式，只有IE8显示超出部分
三、浮动元素的偏移
对于float 来说它与绝对定位（absolute）和固定定位（fixed）不同的是前者同为folat的元素相互影响，而后者两者之间不相互影响。
四、绝对元素和固定元素的偏移
绝对定位和固定定位（相对于屏幕的位置，不应滚动条滚动而滚动 ，IE6下不支持position:fixed）
在绝对定位和固定定位中根据位置进行margin后左右上下偏移
五、静态内联元素的对齐 左对齐的内容
居中(行高48px)
居右
要由用户代理（而不是 CSS）来确定两端对齐文本如何拉伸，以填满父元素左右边界之间的空间。例如，有些浏览器可能只在单词之间增加额外的空间，而另外一些浏览器可能会平均分布字母间的额外空间（不过 CSS 规范特别指出，如果 letter-spacing 属性指定为一个长度值，“用户代理不能进一步增加或减少字符间的空间”）。还有一些用户代理可能会减少某些行的空间，使文本挤得更紧密。所有这些做法都会影响元素的外观，甚至改变其高度，这取决于用户代理的对齐选择影响了多少文本行。
基准低于基准高于基准
line-height:是设置行高的
vertical-align: baseline(基准线) +V（基准线向上移V） -V（基准线向下移V）
text-align:left(靠左)，right(靠右)，center(居中)，justify(实现两端对齐文本效果，慎用，问题多)
六、静态块状元素的对齐与偏移
1、margin-left:auto;margin-right:auto 这样可以使块状元素居中
2、不指定块状元素的宽度时，margin-left:Value 这样使其缩进Value距离
七、静态表格的对齐与偏移
1、块状元素不能被包裹、除非他设定为定位或浮动
2、内联元素不能设定尺寸，除非他们被设置成定位或浮动
3、Table既可以包裹又可以设定尺寸，多才多艺啊
总结：浮动或定位以后其就具有设置宽度和包裹内容的特性，而table本身就具有这个特性
八、绝对元素的对齐与偏移
左上角对齐&偏移
左下角对齐&偏移
中心对齐
右上角对齐&偏移
右下角对齐&偏移
中心对称的兼容性有点问题
