关于使用CSS的position属性控制页面布局,下面是一个完整攻略:
一、什么是position属性
position是CSS的一个布局属性,它可以用来控制元素的定位方式。常见的定位方式有三种:相对定位(relative)、绝对定位(absolute)和固定定位(fixed)。
相对定位是指相对于元素原来的位置进行定位,元素所占的空间始终保留在文档流中,通常可以用left、right、top、bottom属性来进行微调,语法如下:
position: relative;
left: 20px;
top: 10px;
绝对定位则是指相对于其包含元素(父元素)的位置进行定位,如果没有包含元素,就相对于html元素,不占用文档流。通常用left、right、top、bottom属性来指定元素的位置,语法如下:
position: absolute;
left: 50px;
top: 50px;
固定定位跟绝对定位类似,不过是相对于浏览器窗口固定的位置进行定位,不随页面滚动而改变。通常用left、right、top、bottom属性来指定元素的位置,语法如下:
position: fixed;
left: 0;
top: 0;
二、如何使用position属性
1. 简单定位
我们可以先通过设置元素的position属性为relative或absolute来进行简单的定位,以relative为例,代码如下:
<div class="container">
<div class="box">
<p>我是一个盒子</p>
</div>
</div>
.box {
position: relative;
top: 50px;
left: 50px;
}
这个例子中,我们先使用了一个盒子元素.box,然后设置其position属性为relative,最后通过top和left属性分别设置距离顶部和左边的偏移量,这样就可以让盒子元素相对于原来位置上下左右移动。
2. 绝对定位
绝对定位是使用比较频繁,下面给出一个例子,以清单菜单的实现为例:
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
header {
background-color: #333;
height: 50px;
line-height: 50px;
}
nav {
position: absolute;
bottom: 0;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
margin-right: 20px;
}
a {
color: #fff;
text-decoration: none;
}
在这个例子中,我们先设置header的高度为50px,并设置nav的position属性为absolute并bottom:0,然后在nav中放置ul菜单,设置li浮动,使用margin-right包含每个菜单项之间的间距,最后设置文字颜色和样式。
三、总结
通过上面两个例子,我们可以看出,使用position属性控制页面布局可以让页面更加灵活,但要注意在使用时掌握好各个属性值之间的关系,避免出现意外。
希望本文对初学者有所帮助,如果有任何疑问,欢迎留言交流。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:使用CSS的position属性控制页面布局的入门教程 - Python技术站