（附：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. Pattern: Microservice Architecture

    Microservice Architecture pattern http://microservices.io/patterns/microservices.html Context You ar ...

  2. To verify Hadoop releases using GPG

    To verify Hadoop releases using GPG http://hadoop.apache.org/releases.html To verify Hadoop releases ...

  3. js中的关系操作符

    1.关于“小于(<)” a.关于数值的判断就是跟正常的比较一样: b.var result = “23” <"3" ;  //true 这两个是字符串,会比较他们的编码 ...

  4. Getting Started with xUnit.net (desktop)

    https://xunit.github.io/docs/getting-started-desktop.html In this article, we will demonstrate getti ...

  5. html5--6-13 CSS3中的颜色表示方式

    html5--6-13 CSS3中的颜色表示方式 学习要点 掌握选择器的优先级问题 掌握CSS3中新增的颜色表示方式 选择器的优先级问题 原则上:元素选择器<类选择器< ID选择器< ...

  6. ubuntu中使用apt-get安装zbar

    apt-get是linux中常用的shell命令,适用于deb包管理式的操作系统,主要用于自动从互联网的软件仓库中搜索.安装.升级.卸载软件或操作系统.apt-get命令一般需要root权限执行,所以 ...

  7. centos6.5下忘记mysql密码

    1.此方式会使得服务器处于不安全的情况,请尽量保证在安全的环境下进行,因为,此方式,会使得任何人任意地连接MySQL数据库. 2.#vim /etc/my.cnf 在[mysqld]的段中,加上ski ...

  8. 廖雪峰python3练习题一

    数据类型和变量 题目: 答案: print(123) print(456.789) print('\'Hello,world\'') print('\'Hello,\\\'Adam\\\'\'') p ...

  9. 浅谈getAttribute兼容性

    最近终于证实tag.setAttribute("style", "color:#000;");在IE7中不起作用.于是百度了一些解决办法. IE的setAttr ...

  10. web前端安全机制问题全解析

    摘要 web前端安全方面技术含有的东西较多,这里就来理一理web安全方面所涉及的一些问题 目录[-] 摘要 web前端安全方面技术含有的东西较多,这里就来理一理web安全方面所涉及的一些问题 web安 ...