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

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

时间:2021-07-01 10:21:17 帮助过:23人阅读

韩顺平_php从入门到精通_视频教程_第19讲_网站推荐_定位_学习笔记_源代码图解_PPT文档整理
书再多,视频再多,都不如自己动手写一个项目,就会有心得。
对于开源项目,跑起来,看懂,并二次修改。模仿 -------->创新,抓核心。

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



	
		
		relative 相对定位
	
	
		内容1
		内容2
		内容3
		内容4
	

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



	
		
		绝对定位
	
	
		内容1
		内容2
		内容3
		内容4
	

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



	
		
		绝对定位2
	
	
		内容1
		内容3
		内容4
		测试
			内容2	
		
	

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文档整理_目录

人气教程排行