（附：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属性设置层的大小。

  1. <html>
  2.     <head>
  3.         <title>层的定位</title>
  4.         <style>
  5.             div{
  6.                 position:absolute;
  7.                 width:300px;
  8.                 height:300px;
  9.                 left:5em;
  10.                 right:5em;
  11.                 top:5em;
  12.             }
  13.         </style>
  14.         <body>
  15.             <div>
  16.                 夕阳武士为了筹措盘缠回故乡而出战马贼，但小时医生的告诫他会在着一年失明，虽然光纤在他的眼中已经日渐昏暗，但他还是坚持出战最终战死。欧阳锋很奇怪他为何要记者赶回去？武士回答数家乡的桃花很美，他要回去看桃花。欧阳锋好奇去了武士的家乡，发现那里根本没有桃花，只有一个女人，她的名字叫做桃花。
  17.             </div>
  18.         </body>
  19.     </head>
  20. </html>

如图网页中文本距离窗口顶部是5em，距离窗口左侧也是5em，文本层的长度和宽度都是300px。

（在层中，文本内容不足height属性的高度时，层的大小会默认为300px；如果层的内容超出内容heigh的属性高度时，浏览器会自动修改原始层的高度来适应文本的内容。）

3.层的叠加：
层不同于表格、框架的最大优势是可以叠加的。因为层有一个z轴的特性，z轴就好比三维坐标中的z轴，是一个上下层级的关系。就是可以说一个层可以覆盖在另一个层上面。
根据层依次出现的顺序来判定层的上下级关系。

  1. <html>
  2.     <head>
  3.         <title>层的叠加</title>
  4.         <style>
  5.             div{
  6.                 height:300;
  7.                 width:300;
  8.             }
  9.             #d1{
  10.                 position:absolute;
  11.                 background-color:green;
  12.                 left:2em;
  13.                 top:2em;
  14.             }
  15.             #d2{
  16.                 position:absolute;
  17.                 background-color:blue;
  18.                 left:4em;
  19.                 top:4em;
  20.             }
  21.             #d3{
  22.                 position:absolute;
  23.                 background-color:red;
  24.                 left:6em;
  25.                 top:6em;
  26.             }
  27.         </style>
  28.         <body>
  29.             <div id="d1"></div>
  30.             <div id="d2"></div>
  31.             <div id="d3"></div>
  32.         </body>
  33.     </head>
  34. </html>

4.框模型：
层的内部便是一个框模型。
层中内容的外面被很多空间级概念的物质包围，如空距（padding）边框（border）和边距（margin）
空距就是页面内容距离边框的位置，边距就是边框以外的距离，页面中任意一个层内容中的周围理论上是这样被包围的。

页面内容（元素）可以为任何内容，如果设计者愿意，可以是一段文字，一个图像，一个表格甚至是一个框架集，当然也可以是一个层。

  1. <html>
  2.     <head>
  3.         <title>框模型的大小</title>
  4.         <style>
  5.             #a{
  6.                 background-color:#F9C;
  7.                 width:20em;
  8.                 height:10em;
  9.                 padding:1em;
  10.                 border:1em solid #99F;
  11.                 margin:1em;
  12.             }
  13.             #b{
  14.                 background-color:#F9C;
  15.                 width:20em;
  16.                 height:13em;
  17.                 padding:3em;
  18.                 border:1em solid #99F;
  19.                 margin:3em;
  20.             }
  21.         </style>
  22.     </head>
  23.     <body>
  24.         <div id="a">
  25.             灰烬路像是一个历经沧桑的百岁老人所写，但是当时的张爱玲只有24岁。她队自己的自私和冷酷，有一种抽离。
  26.         </div>
  27.         <p>
  28.         <div id="b">
  29.             灰烬路像是一个历经沧桑的百岁老人所写，但是当时的张爱玲只有24岁。她队自己的自私和冷酷，有一种抽离。
  30.         </div>
  31.     </body>
  32. </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 前者会严格按照属性性质来设定框的大小，后者无论页面是否溢出框架都出现滚动条

当css样式表遇到层的更多相关文章

  1. 当css样式表遇到层2

    9.定制层的display属性:层的表现是通过框这种结构来实现的.框可以是块级对象也可以是行内对象. Display属性就是用来控制其中内容是块级还是行级.定义为block则为kuai块级,inlin ...

  2. 2016/2/19 css样式表 Cascading Style Sheet 叠层样式表 美化HTML网页

    一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联 ...

  3. HTML基础（三）——css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...

  4. HTML静态网页 css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

  5. 3月22日 html(三)css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例 ...

  6. HTML静态网页（css样式表）

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

  7. css样式表及属性

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

  8. CSS样式表的写作规范

    推荐大家使用的CSS书写规范.顺序 写了这么久的CSS,但自己都没有按照良好的CSS书写规范来写CSS代码,东写一段西写一段,命名也是想到什么写什么,过一段时间自己都不知道写的是那一块内容, 这样会影 ...

  9. CSS样式----CSS样式表的继承性和层叠性（图文详解）

    本文最初于2017-07-29发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重点 CSS的继承性 CSS的层叠性 计算权重 ...

随机推荐

  1. set -- $variable

    1 set --的用途 给位置参数赋值. 2 $variable是如何赋值给位置参数的 假如variable=a b c?或者variable=a;b;c? 这里果然和IFS有关,默认情况下,vari ...

  2. Unity3D集成腾讯语音GVoice SDK

    友情提示:最近发现腾讯GVoice有另一个官网,叫做腾讯游戏服务,经过对比发现这个网站才是最新的,下面我介绍的那个估计是已经废弃的,但不知道为啥老的网站没有直接链接到新网址而是仍然保留了.不过新官网的 ...

  3. 搭建java运行环境

    安装IDE 集成开发环境(IDE,Integrated Development Environment ) 1.安装jdk,jre(jdk自带jre),记住他们的安装位置. 2.配置环境变量.(JAV ...

  4. POJ2752 Seek the Name, Seek the Fame —— KMP next数组

    题目链接:https://vjudge.net/problem/POJ-2752 Seek the Name, Seek the Fame Time Limit: 2000MS   Memory Li ...

  5. XMLHttp.send()不传参时必须传null吗？

    xmlhttp的send是传递参数用的,但是只有在使用post方式提交请求的时候才有用如下:xmlhttp.open("post",url,true); ...xmlhttp.se ...

  6. 解决post乱码之web.xml

    <!-- 解决post乱码 --> <filter> <filter-name>characterEncodingFilter</filter-name> ...

  7. js生成随机编码并赋值给input文本框

    效果图如下: 页面代码: <div class="form-item form-width-in fr"> <label>产 品 编 码</label ...

  8. Java虚拟机一览表

    免费和开源的 Java 虚拟机AegisVM (inactive since 2004).Apache Harmony — supports several architectures and sys ...

  9. Java 绘制环形的文字 (Circle Text Demo)

    1. [代码]CircleTextDemo.java     import java.awt.*;import java.awt.event.*;import java.awt.geom.*; /** ...

  10. javaScript实现增删改查

    自己写的一个html+javaScript实现增删改查小实例.下面是js代码​1. [代码][JavaScript]代码   //1.创建受捐单位数组var arrOrgData = [    { & ...