您的位置：首页 > Web前端 > CSS

CSS定位

2016-04-10 14:20 507 查看

CSS定位 [position]

通过使用position属性，我们可以选择4种不同类型的定位，这会影响元素框生成的方式。

position属性的含义：


属性值	含义
static	默认类型，元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative	元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute	元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed	元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

对于各个取值的含义：


属性类型	描述
static	默认值。没有定位，元素出现在正常的流中（忽略top, bottom,left,right或者z-index声明）。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20”会向元素的LEFT位置添加20像素。
absolute	生成绝对定位的元素，相对于最近的已定位祖先元素进行定位。如果不存在已定位的祖先元素，那么相对于最初的包含块。最初的包含块可能是画布或HTML元素。元素的位置通过”left”,”top”,”right”以及”bottom”属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过”left”,”top”,”right”以及”bottom”属性进行规定。

将图像与文字进行底部对齐：

img { vertical-align:text-bottom }

裁剪一幅图像：

img
{
position:absolute;
clip:rect(0px 50px 200px 0px) <!-- 裁剪成一个矩形 -->
}

在正文的下方放置一幅图像：

img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1; <!-- 将图像放置在z轴下方 -->
}

使用滚动条显示溢出的内容：

div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll <!-- 使用滚动条显示溢出内容，如果不设置，则溢出内容会显示在区域之外，也可设置为'auto' -->
}

浮动定位 [float]

float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

将段落的首字母特殊显示：

<html>
<head>
<style type="text/css">
span
{
float:left;
width:0.7em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
</head>

<body>
<p>
<span>T</span>his is some text.
This is some text. This is some text.
</p>

<p>
在上面的段落中，文本的第一个字母包含在一个 span 元素中。这个 span 元素的宽度是当前字体尺寸的 0.7 倍。span 元素的字体尺寸是 400%，行高是 80%。span 中的字母字体是 "Algerian"
</p>

</body>
</html>

创建水平菜单:

<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
li {display:inline}

a
{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}

</style>
</head>

<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

<p>
在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。我们添加了颜色和边框，以使其更漂亮。
</p>

</body>
</html>

不使用table创建表格布局的首页：

<html>
<head>
<style type="text/css">
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left; <!-- 防止左边围绕浮动框，强制(footer)在新的一行进行布局 -->
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;  <!-- 布局的关键 -->
width:160px;
margin:0;
padding:1em;
}
div.content
{
margin-left:190px;
border-left:1px solid gray;
padding:1em;
}
</style>
</head>
<body>

<div class="container">

<div class="header"><h1 class="header">W3School.com.cn</h1></div>

<div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>

<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At W3School.com.cn you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3School.com.cn - The Largest Web Developers Site On The Net!</p></div>

<div class="footer">Copyright 2008 by YingKe Investment.</div>
</div>

</body>
</html>

如何让包围元素在视觉上包围浮动元素？

.news {
background-color: gray;
border: solid 1px black;
}

.news img {
float: left;
}

.news p {
float: right;
}

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

上述代码中，因为浮动元素脱离了文档流，所以包围图片和文本的div不占据空间。

可通过强制添加一个空元素并清理(clear)它，如：

.news {
background-color: gray;
border: solid 1px black;
}

.news img {
float: left;
}

.news p {
float: right;
}

.clear {
clear: both;
}

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>    <!-- 添加一个空元素，并强制在新一行插入 -->
</div>

还有一种办法，就是对容器div进行浮动：

.news {
background-color: gray;
border: solid 1px black;
float: left;  <!-- 对div进行浮动处理 -->
}

.news img {
float: left;
}

.news p {
float: right;
}

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

不幸的是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消除不必要的标记。

更多请参考：W3School

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css position float

相关文章推荐

新的分享

章节导航