前端Demo|页面布局|适合学习前端一个月的同学
前端Demo|页面布局|适合学习前端一个月的同学
如果能娴熟地将层布局在页面中，页面看起来就会很清爽，浏览也更便捷。基于positon属性的运用，我们可以将页面定位分为静态定位、相对定位、绝对定位、固定定位和浮动五种方式。
静态定位
position默认情况下为static属性，一般在代码中省略该属性。如果不设置position，就是像block1、block3一样，和block2的样式相同哦！
例：
<style>
/* 静态定位 */
body{
font-size: 1.5em;
color: white;
text-align: center;
/* 定义文本居中对齐 */
}
#block1{
background: navy;
padding: 1em;
/* 设置空距 */
}
#block2{
position: static;
left: 20px;
top: 20px;
/* 这两行在static属性下不起作用 */
background-color: orange;
padding: 1em;
}
#block3{
background-color: green;
padding: 1em;
}
</style>
<body>
<div id="block1">区域一</div>
<div id="block2">区域二</div>
<div id="block3">区域三</div>
</body>
相对位置
当position属性为relative，上例这时表示相对定位。它相对的参照物就是static属性下的位置，我们可以通过top、bottom、right、left属性来控制位移。
我们将上面block2的CSS代码改为
position: relative;效果变成了这样
这时，block2样式中的这两行就起作用了
left: 20px;
top：20px;绝对定位
绝对定位的属性是 absolute，相较之于相对定位，它的改变在于当对象发生位移时，原先的初始位置如同被挖去了一样。这个对象独立于其他的页面内容，而初始位置的空白会被其他内容自然填补。 它相对于上一级的对象的初始位置发生位移。如果上一级的对象是浏览器窗口，那么它就是相对于整个页面来发生位移。同样，绝对定位也可以使用 top、right、bottom 和 left 属性来控制位移。
我们再次修改block2样式代码为
position: absolute;这一次区域二被独立了出来
那么，什么是相对于上一级发生位移呢？
我们将block2放置在<span>标签内，那么它就是block2框的上一级
<span>区域二相对移动的位置
<div id="block2">区域二</div>
</span>然后在<style>标签中加入
span{
position: relative;
background-color: black;}这时区域二的位置就不再是相对浏览器页面改变
固定定位
固定定位比较类似于绝对定位，当页面长度超出浏览器窗口时，此时会出现滚动条。区别就在于绝对定位下的页面对象的框，会随着滚动条和页面一起移动，而固定定位下的页面对象的框则不会随之滚动。同样，固定定位也可以使用 top、right、bottom 和 left 属性来控制位移。
固定定位属性：
position: fixed;固定定位和绝对定位的性质是一样的，它们所定义的框的位置是独立于其他页面内容之外的。这样，有时候它们难免会叠加在一起，这种情况可以使用 Z轴属性，即层的叠加特性来改变它们的顺序。
层的叠加特性
根据层依次出现的顺序来判定层的上下级关系（也可在div的样式中添加z-index：1，让该层被放在最下面）
<body>
<div id="d1"></div> //定义最下面的层
<div id="d2"></div> //定义中间的层
<div id="d3"></div> //定义最上面的层
</body>浏览器最终显示的是d1层的内容
浮动层
浮动层可以将所定义的页面内容放置在页面的左边或者右边，通常放入图像时使用这种方法会很方便。事实上，浮动层中可以应用任何对象，浮动框的代码写法如下：
float:left;也可以定义成right 和none
例：创建浮动层
<style type="text/css" >
body {font: 80%/1.5 黑体;
}
h3 {font:1.2em 幼圆;}
#box {width: 12em;
/* 定义这个框模型的宽度 */
float: left;
/* 定义在左侧的浮动层 */
color: white;
/* 设置文本的颜色 */
background: #060;
padding: 1em;
margin: 0;
/* 设置边距大小 */
}
</style>
<body>
<h3>一月一日 领导者必须正直 <h3>
<p>组织的精神是自上而下树立起来的
</p>
<p id="box">摘自：彼得.德鲁克 《管理：任务、责任与务实》</p>
<p>当考察管理者是否诚信时，人们必定会非常重视他的人品是否正直，这一点必定首先会在管理者的人事任用上体现出来，因为领导者正是通过其正直
的人品，才能够实现其领导,领导者也正是通过其正直的人品，才树立了别人效仿的榜样，在人品这一点上，人们无法弄虚作假，一个领导者的同事，
尤其是他的下属们，只要和领导者共事几周，就会知道他是否正直，他们可以原谅别人的无能，疏忽，缺乏安全感甚至是粗鲁无礼，但是他们却无法
宽恕别人的不正直，他们也无法宽恕领导者选用不够正直的人。
</p>
<p>这一点对企业最高领导层的重要性是毋庸置疑的，因为一个组织的精神是自上而下树立起来的。如果一个组织富有精神，那是因为它的最高领导者的
精神崇高，如果一个组织腐败，其根源在它的最高领导者。正所谓“上梁不正下梁歪”，如果一个员工的人品不能成为其下属的效仿榜样，最高领导者
就决不应该将他提拔到重要的工作岗位。
</p>
</body>效果：
浮动层定义在文本的左边，而文本被挤压在右边。所以，浮动层并不是会浮动在页面的上方而盖住下面的文本。相反，浮动层像是可随意嵌入页面的一个技术。此外，如果不需要浮动层的左右存在页面内容，可以使用alear 属性求清除页面的其他的内容。在代码的样式表定义中，加入clear 属性的声明，代码如下：
span {clear:left;}clear后还可以定义为right、both
知识点总结
静态定位：页面布局的默认属性
position: static;相对定位：相对静态定位的默认位置改变对象定位
position: relative;绝对定位：相对于上一级对象的初始位置发生位移
position: absolute;固定定位：独立于其他页面内容外，将页面位置固定不动（不随滚动条和页面一起移动）
positon: fixed;浮动层：可以将所定义的页面内容放置在页面的左边或者右边
float: left;
float: right;E N D