（附：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 前者会严格按照属性性质来设定框的大小，后者无论页面是否溢出框架都出现滚动条

当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. linux网络配置及IP绑定

    在学习时,参考了这篇文章:http://blog.csdn.net/collection4u/article/details/14127671:在这篇文章中作者讲述了VMware中虚机的三种网络模式: ...

  2. 数据结构之 图论---图的深度遍历（ 输出dfs的先后遍历序列 ）

    图的深度遍历 Time Limit: 1000MS Memory limit: 65536K 题目描述 请定一个无向图,顶点编号从0到n-1,用深度优先搜索(DFS),遍历并输出.遍历时,先遍历节点编 ...

  3. lucene Index Store TermVector 说明

    最新的lucene 3.0的field是这样的: Field options for indexingIndex.ANALYZED – use the analyzer to break the Fi ...

  4. [Selenium] Grid 介绍

    Selenium Grid 支持分布式测试,使测试人员可在分布式环境中进行测试 一般而言,在面临以下情况时可考虑使用Selenium Grid : 1.测试多个浏览器或单个浏览器多个版本,或测试不同操 ...

  5. U3D Navigation

    让我们来一起粗步认识一下NavMesh的简单使用 首先我们建立一个新场景,在新场景我们创建 一个地形或者创建一个Plane, 然后在其上面用Cube或者其它的建立一些障碍物 再创建自己需要为其设置自动 ...

  6. MySQL数据库学习----理论基础

    一:数据存储发展过程 1. 人工管理阶段 主要存储在纸带.磁带等介质中,手工记录,效率低下. 2. 文件系统阶段 存储在计算机磁盘中,以文件形式出现,数据管理变得简单,但是数据没有结构化处理,不易于查 ...

  7. poj1830开关问题——异或高斯消元

    题目:http://poj.org/problem?id=1830 根据题意,构造出n元方程组: a(1,1)x1 ^ a(1,2)x2 ^ a(1,3)x3 ... a(1,n)xn = st1 ^ ...

  8. java利用Aspose.words.jar将本地word文档转化成pdf（完美破解版 无水印 无中文乱码）

    package doc; import java.io.*; import junit.framework.Test; import com.aspose.words.*; public class ...

  9. linux 下 读取某个文件的某一行或者某几行

    wc -l  a.txt  统计a.txt 行数 查看文件a.txt的第190行到196行, sed -n '190,196p' a.txt  如果查看某一行用 sed -n 'a,bp' a.txt ...

  10. hadoop推荐

    hadoop官网 我以Hadoop 2.7.3为例. hadoop 2.7.3 官网  . 用的操作系统是64bit Ubuntu14.04. 其中我们还可以学习 Apache Maven Proje ...