• 976阅读
  • 2回复

CSS定位方案 [复制链接]

上一主题 下一主题
离线啊冲
 

只看楼主 倒序阅读 使用道具 楼主  发表于: 2016-02-02


CSS定位方案

发表于 2015 年 11 月 14 日


CSS2.1规定了三种定位方案:


1:  Normal flow
2:     Floats
3:     Absolute  position
        除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定,块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距(margin)计算出来
1-1:  普通流中的元素是以block显示的

html源码如下    
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body style="margin:0">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
css源码如下:
#div1{
height:200px;
width:200px;
background-color:red;
}

#div2{
height:200px;
width:200px;
background-color:yellow;
}
#div3{
height:200px;
width:200px;
background-color:blue;
}

如下图所示,block会以br结尾,作为换行,如果不想换行,可以使用display:inline-block添加到div中


1-2:         相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。具体如下:

稍微修改下CSS
#div2{
height:200px;
width:200px;
background-color:yellow;
position:relative;
top:10px;
left:20px;
}
设置相对位置后的显示如下:

注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框 (但是如果下面的DIV是绝对定位,第二个DIV就不会覆盖它,因为绝对定位会覆盖普通文档流)
1-3  这里通过relative写个好玩的页面,源码如下
<html>
<head>
<style>
h1.top{
position:relative;
top:-25px;
}
h1.left{
position:relative;
left:-25px;
}
h1.right{
position:relative;
left:30px;
}
</style>
</head>
<body>
<h1>相对于正常位置向上移动</h1>
<h1>相对于正常位置向左移动</h1>
<h1>相对于正常位置向右移动</h1>
</body>
</html>

1-2 Floats 浮动元素:
html源码如下:
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body style="margin:0">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
css源码如下:
#div1{
height:200px;
width:200px;
background-color:red;
}
#div2{
height:200px;
width:200px;
background-color:yellow;
float:right;
}
#div3{
height:200px;
width:200px;
background-color:blue;
position:absolute;
}

1-3  绝对定位,这个很简单
<html>
<head>
<style>
p{
position:absolute;
left:20px;
top:50px;
}
</style>
</head>
<body style="margin:0">
<p>这是绝对定位</p>
</body>
</html>

善者 慈悲心常在 无怨无恨 以苦为乐
默认压缩密码www.hifyl.com
文件分享密码问题:http://www.hifyl.com/read-htm-tid-4444.html
离线v2680267313

只看该作者 沙发  发表于: 2016-04-30
用户被禁言,该主题自动屏蔽!
离线tbno9

只看该作者 板凳  发表于: 2017-08-06
风帆股份官匪勾结共和国
快速回复
限100 字节
批量上传需要先选择文件,再选择上传
 
上一个 下一个