当css样式表遇到层
（附：White-space:pre可以是样式表里卖弄body的属性，作用是保持html源代码的空格与换行，等同<pre>标签。）
Css样式表可以通过被封在层里的方式来限制页面所修饰的内容。这就是说，为了使样式表只对页面局部起修饰作用，设计者可以将页面的局部内容定义在某个范围之内，这个范围变称为CSS-layer（css层）css层可以通过HTML标签来定义，这种使用方法是web设计中的一枚利器。
1.行<span>和层<div>
设计者常常把css样式表放在<span>和<div>这两个布局页面的标签中。这两者的区别是<span>标签是指行内的对象，而<div>标签针对的是层内的对象。
如果<div>标签中没有引用样式表，那么其作用就相当于<p>标签。
两者最明显的区别在于div是块级元素，而span是行内元素（也叫内嵌元素） 所谓块元素是另起一行开始渲染的元素，行内元素则不用另起一行。
您好<span>您拨打的电话暂时无人接听</span>请稍后再拨
<br><br>
您好<div>您拨打的电话暂时无人接听</div>请稍后再拨
显示出来的效果就是：
您好您拨打的电话暂时无人接听请稍后再拨
您好
您拨打的电话暂时无人接听
请稍后再拨
2.层的基本定位：
通过一些基本的属性可以将层定位在页面中的任何位置： left 相当于窗口左边的位置 left:10;
right 相当于窗口右边的位置
top 相当于敞口上边的位置
bottom 相当于窗口下边的位置
width 表示层的宽度
height 表示层的高度
position 用来控制采用什么样的方式定位图层 position属性的属性值有absolute,relative,static三个。 absolute表示层的位置可以用网页的左上角为基准来设置。 elative表示层的位置以其原始值的位置来设置。 Static表示层的位置可以以HTML默认的位置来设置。
事实上只要通过left和top属性就可以控制层在页面中的位置了。通过width和height属性设置层的大小。
<html> <head> <title>层的定位</title> <style> div{ position:absolute; width:300px; height:300px; left:5em; right:5em; top:5em; } </style> <body> <div> 夕阳武士为了筹措盘缠回故乡而出战马贼，但小时医生的告诫他会在着一年失明，虽然光纤在他的眼中已经日渐昏暗，但他还是坚持出战最终战死。欧阳锋很奇怪他为何要记者赶回去？武士回答数家乡的桃花很美，他要回去看桃花。欧阳锋好奇去了武士的家乡，发现那里根本没有桃花，只有一个女人，她的名字叫做桃花。 </div> </body> </head> </html>
如图网页中文本距离窗口顶部是5em，距离窗口左侧也是5em，文本层的长度和宽度都是300px。
（在层中，文本内容不足height属性的高度时，层的大小会默认为300px；如果层的内容超出内容heigh的属性高度时，浏览器会自动修改原始层的高度来适应文本的内容。）
3.层的叠加：
层不同于表格、框架的最大优势是可以叠加的。因为层有一个z轴的特性，z轴就好比三维坐标中的z轴，是一个上下层级的关系。就是可以说一个层可以覆盖在另一个层上面。
根据层依次出现的顺序来判定层的上下级关系。
<html> <head> <title>层的叠加</title> <style> div{ height:300; width:300; } #d1{ position:absolute; background-color:green; left:2em; top:2em; } #d2{ position:absolute; background-color:blue; left:4em; top:4em; } #d3{ position:absolute; background-color:red; left:6em; top:6em; } </style> <body> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> </body> </head> </html>
4.框模型：
层的内部便是一个框模型。
层中内容的外面被很多空间级概念的物质包围，如空距（padding）边框（border）和边距（margin）
空距就是页面内容距离边框的位置，边距就是边框以外的距离，页面中任意一个层内容中的周围理论上是这样被包围的。
页面内容（元素）可以为任何内容，如果设计者愿意，可以是一段文字，一个图像，一个表格甚至是一个框架集，当然也可以是一个层。
<html> <head> <title>框模型的大小</title> <style> #a{ background-color:#F9C; width:20em; height:10em; padding:1em; border:1em solid #99F; margin:1em; } #b{ background-color:#F9C; width:20em; height:13em; padding:3em; border:1em solid #99F; margin:3em; } </style> </head> <body> <div id="a"> 灰烬路像是一个历经沧桑的百岁老人所写，但是当时的张爱玲只有24岁。她队自己的自私和冷酷，有一种抽离。 </div> <p> <div id="b"> 灰烬路像是一个历经沧桑的百岁老人所写，但是当时的张爱玲只有24岁。她队自己的自私和冷酷，有一种抽离。 </div> </body> </html>
Height属性值得是从边框上沿border到下沿border的距离
层的实际高度为内容的高度+上空距+上边框+上边距+下空距+下边框+下边距。
如果事先设的height值大于层中上下边框的距离，页面内容会以空白部分填补缺少的高度。 如果height的值小于边框之间的距离，那么height将不起作用。
如果上下两层放在一起，那么两个层的边距margi将会出现合并，最终以较大的边距为标准，如上面的例子，上下层的边距是3em，而不是3+1=4em。
5.空距padding属性：
Padding属性又常被称为内边距。Padding属性可以细分为padding-top,padding-right,padding-bottom,padding-left四个属性。通过他们可以控制一个框模型中的每一边的空距。此外，为了方便设计者可以使用快捷的写法来分别设置四条边，如下所视。
Padding:1em 2em 表示所有框模型空距顶边和底边为1em，左边和右边为2em
Padding:1em 2em 3em 表示所有框模型空距顶边为1em，左边和右边为2em，底边为3em。
Padding:1em 2em 3em 4em 表示所有框模型将按照顺时针方向，由顶边为1em开始，依次右边2
em，底边3em，左4em
还有一种有趣的用法就是借助padding属性可以使用自定义图像来作为空距，但在浏览器中这种方法只能定义其中一条边。
6.边框border的扩展属性
border是一张使用频率非常高的属性。用于表格，边框中。对于边框，不仅可以改变它的宽度，而且还可以只当其他格式和颜色。 其属性可以细分为border-width,boder-style,boder-color
Border-width 表示边框的宽度
Boder-style 表示边框的样式，常用的有solid，dotted和dashed等
这个也有快捷方式 border:epx dotted red
或者用快捷方式定义每一条边框 border:1em 2em 3em 4em;
7.边距margin：
Padding属性不能为负值，但margin属性可以为负值，以此对内容进行叠加。
类似于空距和边框，边距属性也可以分为上下左右四条边来控制。Margin-top,margin-bottom,margin-left,margin-right
8.框模型的溢出：
有时候如果层的内容太多，以至于超出层的初始设定范围时，Ie浏览器会自动拉伸层的范围。为了改变这种情况，使层的大小不会法发生改变，可以使用overflow睡醒。在默认情况下overflow属性的值为visible，意思是页面内容可见。这是层的大小失去控制的原因。
效果如图，它就像浮动框架一样内嵌在页面中。
Overflow设为auto，则窗口会根据页面内容的多少来决定是否出现滚动条。Overflow属性值还可以设为hedden和scroll 前者会严格按照属性性质来设定框的大小，后者无论页面是否溢出框架都出现滚动条
