（附：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. lonlifeOJ1152 “玲珑杯”ACM比赛 Round #19 概率DP

    E -- Expected value of the expression DESCRIPTION You are given an expression: A0O1A1O2A2⋯OnAnA0O1A1 ...

  2. Node中的promise简说及入门

    Node的特色之一就是异步回调,可是回调过多,就会形成著名的回调金字塔. 直接上例子,我要读取1.txt里的内容,然后在这个内容上加上'test'并重新写入文件,如下代码所示: var fs = re ...

  3. 微信小程序引入外部js 方法

    步骤: 1.首先将外部js放在你指定的文件夹里(这都是废话...) 2.接下来 将该js文件中你要使用的方法给暴露出来 3.在您要使用的js中引入该js 4.使用暴露出来的方法 例子:使用md5加密 ...

  4. HDU4513 吉哥系列故事——完美队形II Manacher算法

    题目链接:https://vjudge.net/problem/HDU-4513 吉哥系列故事——完美队形II Time Limit: 3000/1000 MS (Java/Others)    Me ...

  5. 使用RAID进行磁盘管理

    转自http://www.linuxprobe.com/chapter-06/ 磁盘阵列(Redundant Arrays of Independent Disks,RAID),有“独立磁盘构成的具有 ...

  6. File.Copy的时候Could not find a part of the path

    https://developercommunity.visualstudio.com/content/problem/378265/filecopy-did-not-throw-the-correc ...

  7. hdu 1711 Number Sequence 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1711 题目意思:给出一条有n个数的序列a[1],a[2],......,a[n],和一条有m 个数的序 ...

  8. Opencv中视频播放与进度控制

    视频画面本质上是由一帧一帧的连续图像组成的,播放视频其实就是在播放窗口把一系列连续图像按一定的时间间隔一幅幅贴上去实现的. 人眼在连续图像的刷新最少达到每秒24帧的时候,就分辨不出来图像间的闪动了,使 ...

  9. 【HDU 4819】Mosaic

    [题目链接] 点击打开链接 [算法] 二维线段树(树套树) [代码] #include<bits/stdc++.h> using namespace std; #define MAXN 8 ...

  10. 1 model的创建

    extJs数据模型之Model博客分类: ExtJs   1 model的创建 //我们利用Ext.define来创建我们的模型类 //DB table person(name,age,email) ...