前端零基础教学开始第六天 06 – day 多种定位方法 和 精灵图使用 元素的显示与隐藏…[通俗易懂]

1、定位与浮动的区别：浮动只能浮动到左面与右面

2、定位想定在页面上想定到哪里可以定到任意位置。

定位一共有四种position：

固定定位: fixed

绝对定位：absolute

相对定位：relative

静态定位：static

固定定位

 ## 固定定位

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: #ccc;
			/*静态定位 默认值 标准流 不会动*/ 
			position: static;
			left: 1000px;
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>
复制代码

相对定位 不脱离标准流 相对于自身位置偏移relative

## 相对定位 不脱离标准流 相对于自身位置偏移
<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
		}
		.top{
			background-color: red;
		}
		.bottom{
			background-color: pink;
	/*相对定位不脱离标准流 相对定位 是元素相对于它，在标准流中的位置 + 边偏移属性 来设置元素的位置
	相对定位以 自己在标准流位置的左上角为基点 + 边偏移属性，定位元素新的位置
	*/
			position: relative;
			left: 300px;
			top: 300px;
		}
		.left{
			background-color: orange;
		}
	</style>
</head>
<body>
	<div class="top"></div>
	<div class="bottom"></div>
    <div class="left"></div>
</body>
</html>
复制代码

绝对定位 absolute

绝对定位有两个重要的概念

1、完全脱标 —-完全不占位

2、父元素要有定位 —- 父元素在标准六中的位置 + 边偏移属性 来设置 元素的位置

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.father{
		width: 800px;
		height: 500px;
		background-color: pink;
		margin:50px auto;
		/* 相对定位  如果当前父元素没有定位则寻找上一级有定位的父元素*/
		position: relative;
	}
	.son{
		width: 500px;
		height: 400px;
		background-color: orange;
		/*相对定位  绝对定位会寻找离他最近的父元素位置偏移*/
		position: relative;

	}
	/*子代选择器*/
	.son > div{
		width: 100px;
		height: 100px;
	}
	.grandson {
		background-color: green;
		/*绝对定位
		  脱离标准流不占据原来的位置
		  父元素要有定位，如果父元素都没有定位，则以浏览器为准定位
		*/
		position: absolute;
		right: 0;
		top: 0;
	}
	.grand{
		background-color: #ccc;
	}
	</style>
</head>
<body>
	<div class="father">
		<div class="son">
			<div class="grandson"></div>
			<div class="grand"></div>
		</div>
	</div>
</body>
</html>

复制代码

定位口诀 —-子绝父相 *** 重点

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.nav{
			width: 800px;
			height: 200px;
			background-color: #ccc;
			/*子绝父绝 会脱标准流
			position: absolute;
			*/
			/*父级要占有位置，字节要任意摆放，这就是子绝父相的由来  父元素*/
			position: relative;
		}
		.box{
			width: 100px;
			height: 100px;
			background-color: red;
			/*子绝父绝 会脱标准流
			position: absolute;
			*/
			/*父级要占有位置，字节要任意摆放，这就是子绝父相的由来 子元素*/
			position: absolute;
			right: 0;
			top: 0;
		}
		.footer{
			width: 1000px;
			height: 200px;
			background-color: blue;
		}
	</style>
</head>
<body>
	<!-- 
	定位口诀 ----子绝父相
	 -->
	<div class="nav"> //父元素
		<div class="box"></div> //子元素
	</div>
	<div class="footer"></div>
</body>
</html>
复制代码

固定定位

固定定位

1、完全脱标 — 完全不占位

2、只认浏览器的可视窗口,就是人看见的浏览器的地方

3、不随着滚动条滚动

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
		}
		.top{
			background-color: #ccc;
			/*固定定位*/
			position: fixed;
			right: 0;
			bottom: 200px;
		}
		.bot{
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="top"></div>
	<div class="bot"></div>
</body>
</html>
复制代码

绝对定位的盒子居中显示

注意 绝对定位不能通过设置margin：auto 设置水平居中

在底部居中 
 <!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.father{
			position: relative;
			width: 800px;
			height: 500px;
			background-color: #ccc;
		}
		.son{
			position: absolute;
			bottom: 0;
			/*往右走的50% 依据父元素的尺寸进行计算的*/
			left: 50%;
			/*需要在往回走自身的一半*/
			margin-left: -50px;
			width: 100px;
			height: 100px;
			background-color: red;
			/*只能对标准流的块元素有效 对 脱标的无效
			margin: 0  auto; 下面需要注释 层叠性
			*/
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>
复制代码

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.father{
			position: relative;
			width: 800px;
			height: 500px;
			background-color: #ccc;
		}
		.son{
			position: absolute;
			width: 100px;
			height: 100px;
			
			/*绝对定位的盒子居中显示*/
			top: 50%;
			margin-top: -50px;

			left: 50%;
			margin-left: -50px;

			background-color: red;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>
复制代码

绝对定位的居中显示 简便的写法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.father{
			position: relative;
			width: 800px;
			height: 500px;
			background-color: #ccc;
	
		}
		.son{
			position: absolute;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin:auto;
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>
复制代码

层叠顺序 z-index

z-index 的特性如下
	1、属性值：正整数，负整数或者0 默认值是0 数值越大，盒子越靠上
	2、如果属性值相同，则按照书写顺序，后来者居上
	3、数字后面不能加单位
	4、注意： z-index只能应用于相对定位，绝对定位和固定定位的元素，其他标准流浮动和静态定位无效
复制代码

	<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
		}
		.top{
			background-color: red;
			position: relative;
			/*
			调用性对定位，绝对定位，固定定位的层叠顺序，默认值0值越大，元素越在上边。可以为负值
			*/
			z-index: 1;
		}
		.mid{
			background-color: #ccc;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 2;

		}
		.bot{
			background-color: green;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 2;
		}
	</style>
</head>
<body>
	<div class="top"></div>
	<div class="mid "></div>
	<div class="bot"></div>
</body>
</html>
复制代码

行内块元素特性

特性：一行可以有多个，可以设置宽高，大小受到内容的影响
可以使用inline-block 转换为行内块
可以用浮动float 默认转换为行内块
绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块
所以：一个行内盒子，如果加了浮动，固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度

注意给行内元素设置宽高就是脱离标准流
复制代码

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.top{
			background-color: #ccc;
			display: inline-block;
			width: 100px;
			height: 100px;
		}
		p{
			float:left;
			/*脱离了标准流转换成了行内块显示*/
		}
	</style>
</head>
<body>
	<div class="top">嘿哈</div>
	<!-- 
		如果里面没有内容就是空的一行是0 
	 -->
	 <p>浮动脱离</p>
</body>
</html>
复制代码

综合定位Demo

< 左箭头
>右箭头
复制代码

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 500px;
			height: 500px;
			background-color: pink;
			margin: 0 auto;
			/*这里是第二部 使用 子绝父相 */
			position: relative;
		}
		.arrow-l,.arrow-r{
			position: absolute;
			width: 20px;
			height: 40px;
			/* 这里是第一步
			使用rgba  a 代表alpha是背景透明，前面三个0 是黑色，后面的0.5是透明度 值越小越透明*/
			background-color: rgba(0,0,0,0.5);
			position: absolute;
			/*第三步使用地址*/
			top: 0;
			bottom:0;
			margin: auto;
			text-align:center;
			line-height: 40px;
		}
		/*第四步 使&gt右面*/
		.arrow-r{
			right: 0;
		}
		.round {
				position: absolute;
				left: 0;
				right: 0;
				margin:0 auto  ;
			}
		/*创建小圆点*/
		.round i{
			/*display: inline-block;*/
			float: left;  /*可以使用left 进行浮动*/
			width: 10px;
			height: 10px;
			border:1px solid #000;
			border-radius: 50%;
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="">
		<div class="arrow-l">&lt;</div>
		<div class="arrow-r">&gt;</div>
		<div class="round">
			<i></i>
			<i></i>
			<i></i>
			<i></i>
			<i></i>
			<i></i>
			<i></i>
		</div>
	</div>
</body>
</html>
复制代码

透明属性 opacity 与 rgba 使用

opacity 的透明度范围大 rgba 的作用范围小 他们俩的共性是 都是透明度，区别作用范围

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
	
			width:590px;
			height: 470px;
			/*背景颜色和背景图片撑不开盒子 所以需要给宽高*/
			background-image: url(images/jd.jpg);
		}
		.son{
			width: 200px;
			height: 200px;
			/*rgba a代表的是alpha，透明度，值越小，越透明,范围从零到1*/
			/*background-color: rgba(0,0,0,0.4);*/

			background-color: red;

			/*这里使用到了上面学到的让盒子居中*/
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			/*字体颜色透明*/
			font-size:60px;
			/*color: rgba(0,0,254,0.4);*/

			/*opacity 范围也是0到1 控制元素整体的透明度*/
			opacity: 0.3;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="son">嘿哈</div>
	</div>
</body>
</html>
复制代码

overflow 家族的几个成员

/*visible溢出可见
		overflow: visible;*/

/*超出自动显示滚动条不超出不显示滚动条
		overflow: auto;*/

/*不显示超过尺寸的内容超出部分隐藏
		overflow: hidden;*/	
		
/*不管超出内容否，总是显示滚动条
		overflow: scroll;*/
复制代码

 <!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 100px;
			height: 100px;
			background-color: #ccc;
			/*visible溢出可见
			overflow: visible;*/

			/*超出自动显示滚动条不超出不显示滚动条
			overflow: auto;*/
			
			/*不显示超过尺寸的内容超出部分隐藏
			overflow: hidden;*/
	
			/*不管超出内容否，总是显示滚动条
			overflow: scroll;*/
		}
	</style>
</head>
<body>
	<div class="box">这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍这里开心一下玩耍</div>
</body>
</html>
复制代码

元素的显示与隐藏

在css 中三个显示和隐藏的单词比较常见，我们要区分开他们分别是display visibility 和 overflow

display 显示

display:none 隐藏对象与它相反的是display:block除了转换为块元素之外，同时还有显示元素的意思 特点：隐藏之后，不在保留位置

visibility 可见性

设置或检索是否显示对象

visible ：对象可视 hidden：对象隐藏

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
		}
		.red{
			background-color: red;
			/*隐藏对象 之后不占位
			display: none;*/

			/*对象隐藏 之后占位*/
			visibility: hidden;
		}
		.blue{
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="red"></div>
	<div class="blue"></div>
</body>
</html>
复制代码

显示与隐藏的小Demo

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 60px;
			height: 60px;
			background-color: pink;
			/*溢出隐藏
			overflow: hidden;*/
			position: relative;
		}
		.box img{
			/*第一步定位到这里 */
			position: absolute;
			left: 60px;
			/*显示元素 和 转换块的意思
			display: block;*/

			/*第二位隐藏*/
			display:none;
		}
		/* 第三步 鼠标放上面的时候是谁显示 与隐藏*/
		.box:hover img{
			/*第四步显示*/
			display: block;
		}
	</style>
</head>
<body>
	<div class="box">
		<!-- 这里是前景图片  -->
		<img src="images/jd.jpg">
	</div>
</body>
</html>
复制代码

改变鼠标样式

鼠标样式cursor

cursor:default;		白色
cursor: pointer;	小手
cursor: move;		移动
cursor: text;		文本
复制代码

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background-color: #ccc;
			/*
			鼠标样式cursor
			cursor:default;		白色
			cursor: pointer;	小手
			cursor: move;		移动
			cursor: text;		文本
			*/

		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>
复制代码

轮廓线 outline 和 防止拖拽 resize

轮廓线 多用于input 表单，轮廓线在盒子外面

我们平时都是去掉，最直接的写法是outline：0； 或者outline:none; outline 就是光标外面的蓝色圆框。

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	input{
	/*清除轮廓线*/ 
		outline: none;
	}
	</style>
</head>
<body>
	<input type="text" name="">
</body>
</html>
复制代码

resize：none；

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		textarea{
			outline: 0;
			/*防止文本域拖拽 */
			resize: none;
		}
	</style>
</head>
<body>
	<textarea cols="30" rows="20"></textarea>
</body>
</html>
复制代码

vertical-align 垂直对齐的方法

vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特别是行内块元素，通常用来控制图片/表单/与文字的对齐

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			background-color: red;
		}
		img{
			/*	底部对齐
				vertical-align: bottom;
			*/
			/*	中间对齐
				vertical-align: middle;
			*/
			/* 	顶部对齐
				vertical-align: top;
			*/
			/*	基线对齐，默认的是文字和图片基线对齐
				vertical-align: baseline;
			*/
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="images/adv.jpg"> 你好
	</div>
</body>
</html>

复制代码

去掉图片和文本的空白缝隙

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			background-color: red;
		}
		img{
			/*vertical-align: top;*/
			/*display: block;*/
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="images/adv.jpg">
	</div>
</body>
</html>
复制代码

溢出的文字隐藏 显示三个 小点

white-space 设置或检索对象内文本显示方式通常我们使用于强制一行显示内容

normal：默认处理方式

nowrap：强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行

text-overflow:ellipsis; 显示省略号

谨记想让文字后面实现三个小点点一定要 配合他们三个使用缺一不可
white-space: nowrap;  // 强制不换行
overflow: hidden;  //溢出隐藏
text-overflow: ellipsis;  //显示三个小点
复制代码

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 150px;
			height: 200px;
			background-color: #ccc;
			/*normal 正常默认值文字换行  nowrap 不换行 */
			white-space: nowrap;
			
			overflow: hidden;
			/*文字溢出 ellipsis 文本隐藏的移除显示省略号  clip 不显示省略号*/
			text-overflow: ellipsis;
		}
	</style>
</head>
<body>
	<div class="box">好好学习天天向上，好好学习天天向上，好好学习天天向上</div>
</body>
</html>
复制代码

css精灵技术 sprite

网页请求原理，向服务器发送请求，当网页图像过多时，这将大大降低页面的加载速度 正值向上 负值向下

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 25px;
			height: 26px;
			border: 1px  solid pink;
			background: url(images/sprite.png) 0 - 200px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>
复制代码