您的位置：首页 > 运维架构 > 网站架构

韩顺平_php从入门到精通_视频教程_第19讲_网站推荐_定位_学习笔记_源代码图解_PPT文档整理

2012-11-19 17:19 1336 查看
文西马龙：http://blog.csdn.net/wenximalong/

书再多，视频再多，都不如自己动手写一个项目，就会有心得。

对于开源项目，跑起来，看懂，并二次修改。模仿 -------->创新，抓核心。

CSS核心内容——定位

定位—基本概念

CSS定位(Positioning)属性允许你对元素进行定位。Positioning属性值：

static(默认值)：元素框正常生成。块级元素生成一个矩形框，作为文档流/标准流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative：元素框偏离某个距离。元素仍保持其为定位前的形状，它原本所占的空间仍保留，从这一角度看，好像该元素仍然在文档流/标准流一样。

absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed：元素框的表现类似于将position设置为absolute,不过其包含块是视窗本身。

这几个定位，真正要搞明白，并不是特别容易的事情，借助案例来明白。

常见的定位有四种

1.stacit 定位(默认值)

2.relative相对定位（相对谁）

3.absolute 绝对定位（相对于谁参照呢）

4.fixed固定定位

（1）静态定位不讲了，前面讲的都是静态定位。

（2）定位——相对定位:relative



内容2虽然脱离了它原有的文档流，但是它的位置不希望被别人占用。我走了，但是位置还是我的，停薪留职。



改变内容2位置

relative相对谁呢，相对它原先应该在的位置，进行重新定位。



这里我们可以看出，所谓相对定位是指，相对该元素应当显示的左上角重新定位，虽然它脱离了标准流，但是它的空间，不能被占用。

relative.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="relative.css" />
<title>relative 相对定位</title>
</head>
<body>
<div class="div1">内容1</div>
<div class="div1" id="spe">内容2</div>
<div class="div1">内容3</div>
<div class="div1">内容4</div>
</body>
</html>


relative.css

.div1{
width: 70px;
height: 30px;
background: silver;
float: left;
margin-left: 5px;
}

#spe{
position: relative;
left: 40px;
top: 100px;
}


（3）定位——绝对定位absolute



===



从上图看，所谓绝对定位是指，对该元素最近的那个脱离了标准流的元素定位，如果没有父元素（或者有父元素，但是父元素没有脱离标准流），则相对body左上角定位。

绝对定位，究竟是对哪个点定位。

absolute.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="absolute.css" />
<title>绝对定位</title>
</head>
<body>
<div class="div1">内容1</div>
<div class="div1" id="spe">内容2</div>
<div class="div1">内容3</div>
<div class="div1">内容4</div>
</body>
</html>


absolute.css

*{
margin: 0px;
padding: 0px;
}

.div1{
width: 70px;
height: 30px;
background: silver;
float: left;
margin-left: 5px;
}

#spe{
position: absolute; /*绝对定位(究竟对谁)*/
left: 40px; /*left为正，则向右移动*/
top: 100px; /*top为正，则向下移动*/
}


用一个div把内容2包起来，重点讲解“对该元素最近的那个脱离了标准流的元素定位”

absolute2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="absolute2.css" />
<title>绝对定位2</title>
</head>
<body>
<div class="div1">内容1</div>
<div class="div1">内容3</div>
<div class="div1">内容4</div>
<div class="div2">测试
<div class="div1" id="spe">内容2</div>
</div>
</body>
</html>


absolute2.css

*{
margin: 0px;
padding: 0px;
}

.div1{
width: 70px;
height: 30px;
background: silver;
float: left;
margin-left: 5px;
}

#spe{
position: absolute;/*绝对定位(究竟对谁)*/
left: 40px; /*left为正，则向右移动*/
top: 100px; /*top为正，则向下移动*/
}

.div2{
width: 200px;
height: 150px;
background: pink;
float: left;
}


（1）把内容2被div2包起来，并把原来的内容2删除，则如下图所示，代码如上。因为div2还是标准流，所以内容2还是相对body左上角定位。



（2）让div2脱离标准流，则显示如下图所示。那么内容2不再按照body来定位，而是按照包含它的div2来进行定位，因为div2是距离内容2最近的脱离了标准流的元素。“对该元素最近的那个脱离了标准流的元素定位”

相应的div2的css属性修改如下

.div2{
position: relative;
left: 100px;
top: 100px;
width: 200px;
height: 150px;
background: pink;
float: left;
}


动手操作就明白。



（4）定位——fixed定位（绝绝对对）

把内容2修改为绝对定位，则显示如下图所示。不管谁包我还是不包我，我永远对视窗的左上角，body的左上角定位，绝绝对对。



相应的内容2的css属性修改如下

#spe{
/*position: absolute;*/ /*绝对定位(究竟对谁)*/
position: fixed;
left: 40px; /*left为正，则向右移动*/
top: 100px; /*top为正，则向下移动*/
}


所谓fixed定位就是不管怎样，总是以视窗的左上角定位。

注意：left和top对static没有效果的，★★★static静态定位的左右移动用的margin★★★

z-index

设置对象的层叠顺序



z-index的值越小，越在下面

用于设置对象（div）显示时候，层叠的属性，z-index值越小，则越在下层显示。

韩顺平_php从入门到精通_视频教程_学习笔记_源代码图解_PPT文档整理_目录
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航