浮动是css里面布局最多的一个属性
效果：两个元素并排了，并且两个元素都能够设置宽度和高度

四个特性：

1.浮动的元素脱标

2.浮动的元素互相贴靠

3.浮动的元素有“字围”效果

4.收缩的效果　　

脱标： 脱离了标准文档流
span标签不需要转成块级元素，也能够设置宽高。
所有的标签一旦设置浮动，能够并排，都不区分行内、块状元素，设置宽高

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>浮动</title>

	<style type="text/css">

		*{

			padding: 0;

			margin: 0;

		}

		.box1{

			width: 200px;

			height: 200px;

			background-color: red;

			float: left;

		}

		.box2{

			width: 400px;

			height: 400px;

			background-color: yellow;

		}

		span{

			background-color: green;

			float: left;

			width: 300px;

			height: 50px;

		}

	</style>

</head>

<body>

	 <div class="box1">小红</div>

	 <div class="box2">小黄</div>

	 <span>span标签</span>

	 <span>span标签</span>

</body>

</html>

　　

小红盒子浮动了，脱离了标准流，此时小黄这个盒子就是标准文档流中的第一个盒子。
所以就渲染到了左上方。 浮动元素 “飘起来了”，浮动元素当有足够的空间时，会紧贴在一起，没有没有足够的空间，会挨着边靠。

所谓字围效果：当div浮动，p不浮动

div挡住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了字围效果

关于浮动我们强调一点，浮动这个元素，我们初期一定要遵循一个原则

永远不是一个盒子单独浮动，要浮动就要一起浮动。

　　

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title></title>

	<style type="text/css">

		*{

			padding: 0;

			margin: 0;

		}

		div{

			float: left;

		}

		p{

			background-color: #666;

		}

	</style>

</head>

<body>

	<div>

		<img src="./images/picture.png" alt="">

	</div>

	<p>

		123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字

		文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字

		文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字

	</p>

</body>

</html>

　　

收缩：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）

清除浮动

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title></title>

	<style type="text/css">

		*{

			padding: 0;

			margin: 0;

		}

		.father{

			width: 1126px;

			/*子元素浮动 父盒子一般不设置高度*/

			/*出现这种问题，我们要清除浮动带来影响*/

			/*height: 300px;*/

		}

		.box1{

			width: 200px;

			height: 500px;

			float: left;

			background-color: red;

		}

		.box2{

			width: 300px;

			height: 200px;

			float: left;

			background-color: green;

		}

		.box3{

			width: 400px;

			float: left;

			height: 100px;

			background-color: blue;

		}

		.father2{

			width: 1126px;

			height: 600px;

			background-color: purple;

		}

	</style>

</head>

<body>

	<div class="father">

		<div class="box1"></div>

		<div class="box2"></div>

		<div class="box3"></div>

	</div>

	<div class="father2"></div>

</body>

</html>

　　

给浮动元素最后面加一个空的div 并且该元素不浮动,然后设置clear:both 清除别人对我的浮动影响

内墙法

无缘无故加了div元素 结构冗余

　　

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title></title>

	<style type="text/css">

		*{

			padding: 0;

			margin: 0;

		}

		ul{

			list-style: none;

		}

		div{

			width: 400px;

		}

		div ul li {

			float: left;

			width: 100px;

			height: 40px;

			background-color: red;

		}

		.box{

			width: 200px;

			height: 100px;

			background-color: yellow;

		}

		.clear{

			clear: both;

		}

	</style>

</head>

<body>

	<div>

		<ul>

			<li>Python</li>

			<li>web</li>

			<li>linux</li>

		</ul>

		<div class="clear"></div>

	</div>

	<div class="box">

	</div>

</body>

</html>

清除浮动伪元素方法

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden

　　

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>伪元素清除法（常用）</title>

	<style type="text/css">

		*{

			padding: 0;

			margin: 0;

		}

		ul{

			list-style: none;

		}

		div{

			width: 400px;

		}

		div ul li {

			float: left;

			width: 100px;

			height: 40px;

			background-color: red;

		}

		.box{

			width: 200px;

			height: 100px;

			background-color: yellow;

		}

		/*伪元素选择器*/

		.clearfix:after{

			/*必须要写这三句话*/

			content: '.';

			clear: both;

			display: block;

			height: 0;

			visibility: hidden;

			/*

			新浪首页清除浮动伪元素方法

			 content: ".";

			    display: block;

			    height: 0;

			    clear: both;

			    visibility: hidden

			*/

		}

	</style>

</head>

<body>

	<div class="clearfix">

		<ul>

			<li>Python</li>

			<li>web</li>

			<li>linux</li>

		</ul>

	</div>

	<div class="box">

	</div>

</body>

</html>

清除浮动

overflow：hidden

　　

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>overflow清除法</title>

	<style type="text/css">

		*{

			padding: 0;

			margin: 0;

		}

		ul{

			list-style: none;

		}

		.box{

			width: 400px;

			overflow: hidden;

		}

		.box ul li {

			float: left;

			width: 100px;

			height: 40px;

			background-color: red;

		}

		.box2{

			width: 200px;

			height: 100px;

			background-color: yellow;

		}

	</style>

</head>

<body>

	<div class="box">

		<ul>

			<li>Python</li>

			<li>web</li>

			<li>linux</li>

		</ul>

	</div>

	<div class="box2">

	</div>

</body>

</html>

　　

当给两个兄弟盒子 设置垂直方向上的margin 那么以较大的为准，那么我们称这种现象叫塌陷

浮动的盒子垂直方向 不塌陷

　　

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>margin的塌陷</title>

	<style type="text/css">

		*{

			padding: 0;

			margin: 0;

		}

		.father{

			width: 400px;

			overflow: hidden;

			border: 1px solid gray;

		}

		.box1{

			width: 300px;

			height: 200px;

			background-color: red;

			margin-bottom: 20px;

			float: left

		}

		.box2{

			width: 400px;

			height: 300px;

			background-color: green;

			margin-top: 50px;

			float: left;

		}

		span{

			background-color: red;

		}

		span.a{

			margin-right: 20px;

		}

		span.b{

			margin-left: 20px;

		}

	</style>

</head>

<body>

	<div class="father">

		<div class="box1"></div>

		<div class="box2"></div>

	</div>

	<span class="a">内容</span>

	<span class="b">内容</span>

</body>

</html>

　　

1.使用margin: 0 auto;水平居中盒子 必须有width，要有明确width，文字水平居中使用text-align: center;

2.只有标准流下的盒子 才能使用margin:0 auto;

当一个盒子浮动了，固定定位，绝对定位了，margin:0 auto; 不能用了

　　

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>居中盒子</title>

	<style type="text/css">

		*{

			padding: 0;

			margin: 0;

		}

		div{

			width: 780px;

			height: 50px;

			background-color: red;

			/*水平居中盒子*/

			margin: 0px auto;

			/*margin-left: auto;

			margin-right: auto;*/

			text-align: center;

			float: left;

		}

	</style>

</head>

<body>

	<div>

		文字

	</div>

</body>

</html>

　　

善于使用父盒子的padding填充，不要使用margin，使用margin会使整个盒子移动。

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title></title>

	<style type="text/css">

		*{

			padding: 0;

			margin: 0;

		}

		.father{

			width: 270px;

			height: 270px;

			background-color: blue;

			padding-top: 30px;

			padding-left: 30px;

			/*border: 1px solid red;*/

		}

		.boby{

			width: 100px;

			height: 100px;

			background-color: orange;

			/*margin-left: 30px;

			margin-top: 30px;*/

		}

	</style>

</head>

<body>

	<!-- 因为父亲没有border，那么儿子margin实际上踹的是“流” 踹的是行

	所以父亲就掉下来

	 -->

	<div class="father">

		<div class="boby">

		</div>

	</div>

</body>

</html>

　　

文本属性和字体属性

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title></title>

	<style type="text/css">

		div{

			width: 300px;

			height: 100px;

			/*background-color: red;*/

			border:  1px solid red;

			/*设置字体大小  px：像素  rem  em %*/

			font-size: 20px;

			font-weight: 700;

			 font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;

			 text-align: center;

			 text-decoration: none;

			 color: blue;

			 cursor: pointer;

			 /*line-height: 100px;*/

			 /*1em = 20px*/

			 /*设置首字缩进 单位：em为准*/

			 text-indent: 2em;

		}

	</style>

</head>

<body>

	<div>

		内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容

	</div>

</body>

</html>

　　

单行文本垂直居中

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title></title>

	<style type="text/css">

		div{

			width: 300px;

			height: 50px;

			border:  1px solid red;

			/*行高的意思: 公式 :行高=盒子的高度，让文本垂直居中 但是只适应与单行文本*/

			line-height: 50px;

			font-size: 18px;

		}

	</style>

</head>

<body>

	<div>

		这是一件有趣的事

	</div>

</body>

</html>

　　

多行文本垂直居中

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title></title>

	<style type="text/css">

		div{

			width: 300px;

			height: 160px;

			border:  1px solid red;

			padding-top: 40px;

			/*行高的意思: 公式 :行高=盒子的高度，让文本垂直居中 但是只适应与单行文本*/

			line-height: 30px;

			font-size: 16px;

		}

	</style>

</head>

<body>

	<div>

		文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字

	</div>

</body>

</html>

一个行高30px,一共4个行高 那就是120px.总高度是200px,如果让整个行高垂直居中在当前的盒子中

(200-120）/2=40px 设置padding-top,height的高度=40px

　　

　　

font-family

使用font-family注意几点：

1.网页中不是所有字体都能用哦，因为这个字体要看用户的电脑里面装没装，

比如你设置： font-family: "华文彩云"; 如果用户电脑里面没有这个字体，那么就会变成宋体.

页面中，中文我们只使用： 微软雅黑、宋体、黑体。

如果页面中，需要其他的字体，那么需要切图。 英语：Arial 、 Times New Roman

2.为了防止用户电脑里面，没有微软雅黑这个字体。

就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面，

没有安装微软雅黑字体，那么就是宋体：

font-family: "微软雅黑","宋体"; 备选字体可以有无数个，用逗号隔开。

3.我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，

就自动的变为后面的中文字体：

font-family: "Times New Roman","微软雅黑","宋体";

4.所有的中文字体，都有英语别名，

我们也要知道： 微软雅黑的英语别名：

font-family: "Microsoft YaHei";

宋体的英语别名： font-family: "SimSun";

font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

5.行高可以用百分比，表示字号的百分之多少。

一般来说，都是大于100%的，因为行高一定要大于字号。

font:12px/200% “宋体” 等价于 font:12px/24px “宋体”;

反过来，比如： font:16px/48px “宋体”;

等价于 font:16px/300% “宋体”

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>字体</title>

    <style>

        p{

            width: 300px;

            height: 60px;

            /* 等价于

            font-size: 14px;

            line-height: 30px;

            font-family: '宋体';

             */

             font:14px/30px  "Arial","Hanzipen SC","微软雅黑";

        }

    </style>

</head>

<body>

    <p> 我是文本</p>

</body>

</html>

　　

超链接美化

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>超链接美化</title>

	<style type="text/css">

		*{

			padding: 0;

			margin: 0;

		}

		ul{

			list-style: none;

		}

		.nav{

			width: 960px;

			/*height: 40px;*/

			overflow: hidden;

			margin: 100px auto ;

			background-color: purple;

			/*设置圆角*/

			border-radius: 5px;

		}

		.nav ul li{

			float: left;

			width: 160px;

			height: 40px;

			line-height: 40px;

			text-align: center;

		}

		.nav ul li a{

			display: block;

			width: 160px;

			height: 40px;

			color: white;

			font-size: 20px;

			text-decoration: none;

			font-family: 'Hanzipen SC';

		}

		/*a标签除外，不继承父元素的color*/

		.nav ul li a:hover{

			background-color: red;

			font-size: 22px;

		}

	</style>

</head>

<body>

	<div class="nav">

		<ul>

			<li>

				<a href="">网站导航</a>

			</li>

			<li>

				<a href="">网站导航</a>

			</li>

			<li>

				<a href="">网站导航</a>

			</li>

			<li>

				<a href="">网站导航</a>

			</li>

			<li>

				<a href="">网站导航</a>

			</li>

			<li>

				<a href="">网站导航</a>

			</li>

		</ul>

	</div>

</body>

</html>

　　

background-color

颜色一共有三种：单词、rgb表示法、十六进制表示法

rgb:红色 绿色 蓝色 三原色

光学显示器，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。

用逗号隔开，r、g、b的值，每个值的取值范围0~255，一共256个值。

如果此项的值是255，那么就说明是纯色：

黑色：

background-color: rgb(0,0,0);

光学显示器，每个元件都不发光，黑色的。

白色：

background-color: rgb(255,255,255);

颜色可以叠加，比如黄色就是红色和绿色的叠加：

background-color: rgb(255,255,0);

background-color: rgb(111,222,123);

就是红、绿、蓝三种颜色的不同比例叠加。

16进制表示法

红色：

background-color: #ff0000;

所有用#开头的值，都是16进制的。

#ff0000：红色 16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。

ff就是10进制的255 ，00就是10进制的0。所以等价于rgb(255,0,0);

background-color: #123456; 等价于：background-color: rgb(18,52,86);

所以，任何一种十六进制表示法，都能够换算成为rgb表示法。也就是说，两个表示法的颜色数量一样。

十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc;

比如：

background-color:#ff0000;等价于 background-color:#f00;

background-color:#112233;等价于 background-color:#123;

只能上面的方法简化，比如

background-color:#222333;无法简化！

background-color:#123123;无法简化！

要记住：

#000 黑

#fff 白

#f00 红

#333 灰

#222 深灰

#ccc 浅灰

　　

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title></title>

	<style type="text/css">

		div{

			width: 200px;

			height: 200px;

			/*background-color: rgb(0,0,0);*/

			background-color: #f00;

		}

	</style>

</head>

<body>

	<div>

	</div>

</body>

</html>

　　

background-image

平铺:background-repeat

不平铺:background-repeat: no-repeat;

　　

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title></title>

	<style type="text/css">

		div{

			width: 1500px;

			height: 1600px;

			background-image: url(./picture.jpg);

			/*平铺*/

			/*background-repeat*/

			/*不平铺*/

			/*background-repeat: no-repeat;*/

			background-repeat: repeat-x;

			/*padding: 100px;*/

		}

	</style>

</head>

<body>

	<div>

	</div>

</body>

</html>

　　

position

/*正值 第一个值表示往右偏移 第二个值表示往下 负值则相反*/

background-position: -100px -100px;

　　

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title></title>

	<style type="text/css">

		div{

			width: 1500px;

			height: 1600px;

			border:  1px solid red;

			background-image: url(./picture.jpg);

			background-repeat: no-repeat;

			/*水平方向 left center right

			   垂直方向 top center bottom

			*/

			background-position:center bottom;

		}

	</style>

</head>

<body>

	<div>

	</div>

</body>

</html>

　　

雪碧图技术（精灵图）

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css">

		*{

			padding: 0;

			margin: 0

		}

		.box1{

			width: 48px;

			height: 48px;

			background-image: url(./images/1.png);

			background-repeat: no-repeat;

			background-position: 0 -528px;

		}

		.box2{

			width: 48px;

			height: 48px;

			background-image: url(./images/1.png);

			background-repeat: no-repeat;

			background-position: 0 -440px;

		}

	</style>

</head>

<body>

	<div class="box1"></div>

	<div class="box2"></div>

</body>

</html>

　　

/*background-image: url(./images/banner.jpg);*/

/*background-repeat: no-repeat;*/

/*水平居中通天banner图*/

/*background-position: center top;*/

/*综合属性设置*/

background: red url('./images/banner.jpg') no-repeat center top;

　　

固定背景

background-attachment:fixed

　　

定位

有三种：1.相对定位 2.绝对定位 3.固定定位
position:relative;

position:absolute;

position:fixed;
position: relative;

top: 20px;

left: 30px;

设置相对定位 我们就可以使用四个方向的属性 top left right bottom

相对定位：相对于自己原来的本身定位 top:20px; 那么盒子相对于原来的位置向下移动。相对定位仅仅的微调我们元素的位置

　　

相对定位三大特性： 1.不脱标 2.形影分离 3.老家留坑

作用：1.微调元素位置

2.做绝对定位的参考（父相子绝）

　　

<!-- 微调我们元素位置-->

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css">

		*{

			padding: 0;

			margin: 0;

		}

		div{

			margin: 100px;

		}

		.user{

			font-size: 25px;

		}

		.submit{

			width:30px;

			height:30px;

			position: relative;

			top: -4px;

			left: -5px;

		}

	</style>

</head>

<body>

	<div>

		<input type="text" name="username"   class="user">

		<input type="submit" name="" value="搜索" class="submit">

	</div>

</body>

</html>

　　

绝对的定位

1.脱标

2.做遮盖效果，提升层级

3.设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。

　　

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<style type="text/css">

		*{

			padding: 0;

			margin: 0;

		}

		div{

			width: 200px;

			height: 200px;

		}

		.box1{

			background-color: red;

			position: absolute;

		}

		.box2{

			background-color: green;

		}

		.box3{

			background-color: blue;

		}

		span{

			width: 100px;

			height: 100px;

			background-color: pink;

			position: absolute;

		}

	</style>

</head>

<body>

	<div class="box1"></div>

	<div class="box2"></div>

	<div class="box3"></div>

	<span>文字</span>

</body>

</html>

　　

绝对定位参考点：

1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置

2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。

　　

父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点

这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。 如果父亲设置了定位，那么以父亲为参考点。

那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点

　　

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title></title>

	<style type="text/css">

		*{

			padding: 0;

			margin: 0;

		}

		.box{

			width: 300px;

			height: 300px;

			border: 5px solid red;

			margin: 100px;

			/*父盒子设置相对定位*/

			position: relative;

			padding: 50px;

		}

		.box2{

			width: 300px;

			height: 300px;

			background-color: green;

			position: relative;

		}

		.box p{

			width: 100px;

			height: 100px;

			background-color: pink;

			/*子元素设置了绝对定位*/

			position: absolute;

			top: 0;

			left: 0;

		}

	</style>

</head>

<body>

	<div class="box">

		<div class="box2">

			<p></p>

		</div>

	</div>

</body>

</html>

　　

不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点 。
父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。
相反‘父相子绝’在我们页面布局中，是常用的布局方案。
因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整位置信息。

绝对定位盒子

设置绝对定位之后，margin:0 auto;不起任何作用，

如果想让绝对定位的盒子居中，设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中

　　

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title></title>

	<style type="text/css">

		*{

			padding: 0;

			margin: 0;

		}

		.box{

			width: 100%;

			height: 69px;

			background: #000;

		}

		.box .c{

			width: 960px;

			height: 69px;

			background-color: pink;

			/*margin: 0 auto;*/

			position: relative;

			left: 50%;

			margin-left: -480px;

		}

	</style>

</head>

<body>

	<div class="box">

		<div class="c"></div>

	</div>

</body>

</html>

　　

固定定位：固定当前的元素不会随着页面滚动而滚动，

特性：1.脱标 2.提升层级 3.固定不变 不会随页面滚动而滚动

参考点：设置固定定位，用top描述。那么是以浏览器的左上角为参考点

如果用bottom描述，那么是以浏览器的左下角为参考点

作用： 1.返回顶部栏 2.固定导航栏 3.小广告

position: fixed;

　　

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>固定导航栏</title>

	<style type="text/css">

		*{

			padding: 0;

			margin: 0;

		}

		ul{

			list-style: none;

		}

		a{

			text-decoration: none;

		}

		body{

			/*给body设置导航栏的高度，来显示下方图片的整个内容*/

			padding-top: 49px;

		}

		.wrap{

			width: 100%;

			height: 49px;

			background-color: #000;

			/*设置固定定位之后，一定要加top属性和left属性*/

			position: fixed;

			top: 0;

			left: 0;

		}

		.wrap .nav{

			width: 960px;

			height: 49px;

			margin: 0 auto;

		}

		.wrap .nav ul li{

			float: left;

			width: 160px;

			height: 49px;

			text-align: center;

		}

		.wrap .nav ul li a{

			width: 160px;

			height: 49px;

			display: block;

			color: #fff;

			font: 20px/49px "Hanzipen SC";

			background-color: purple;

		}

		.wrap .nav ul li a:hover{

			background-color: red;

			font-size: 22px;

		}

	</style>

</head>

<body>

	<div class="wrap">

		<div class="nav">

			<ul>

				<li>

					<a href="#">网页开发</a>

				</li>

				<li>

					<a href="#">网页开发</a>

				</li>

				<li>

					<a href="#">网页开发</a>

				</li>

				<li>

					<a href="#">网页开发</a>

				</li>

				<li>

					<a href="#">网页开发</a>

				</li>

				<li>

					<a href="#">网页开发</a>

				</li>

			</ul>

		</div>

	</div>

	<img src="./picture.jpg" alt="">

	<img src="./picture.jpg" alt="">

	<img src="./picture.jpg" alt="">

	<img src="./picture.jpg" alt="">

	<img src="./picture.jpg" alt="">

	<img src="./picture.jpg" alt="">

	<img src="./picture.jpg" alt="">

	<img src="./picture.jpg" alt="">

	<img src="./picture.jpg" alt="">

	<img src="./picture.jpg" alt="">

	<img src="./picture.jpg" alt="">

	<img src="./picture.jpg" alt="">

</body>

</html>

z-index

1.数值大的压盖住数值小的

2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index

3.z-index值没有单位，就是一个正整数，默认的z-index值为0

4.没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面

5.从父现象

　　

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title></title>

	<style type="text/css">

		*{

			margin: 0;

			padding: 0

		}

		.rng{

			width: 200px;

			height: 200px;

			background-color: red;

			position: relative;

			z-index: 3;

		}

		.rng.omg{

			width: 100px;

			height: 100px;

			background-color: pink;

			position: absolute;

			top: 240px;

			left: 300px;

			z-index: 333;

		}

		.ig{

			width: 200px;

			height: 200px;

			background-color: yellow;

			position: relative;

			z-index: 4;

		}

		.ig.edg{

			width: 100px;

			height: 100px;

			background-color: green;

			position: absolute;

			top: 100px;

			left: 320px;

			z-index: 111;

		}

	</style>

</head>

<body>

	<div class="rng">

		<p class="omg"></p>

	</div>

	<div class="ig">

		<p class="edg"></p>

	</div>

</body>

</html>

　　

CSS补充2的更多相关文章

  1. CSS补充与JavaScript基础

    一.CSS补充 position 1.fiexd 固定在页面的某个位置; 示例将顶部菜单始终固定在页面顶部 position: fixed; 将标签固定在某个位置 right: 0; 距离右边0像素 ...

  2. CSS补充之--页面布局、js补充，dom补充

    CSS补充之--页面布局 主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...

  3. css补充、JavaScript、Dom

    css补充: position: fixed:可以将标签固定在页面的某个位置 absolute+relative:通过两者的结合可以让标签在一个相对的位置 代码例子:(通过fixed标签将某些内容固定 ...

  4. HTML+CSS补充

    1. HTML+CSS补充 - 布局: <style> .w{ width:980px;margin:0 auto; } </style> <body> <d ...

  5. 53、css补充

    css其余问题补充 一.默认的高度和宽度问题 1.父子都是块级元素 <!DOCTYPE html> <html> <head> <title>...&l ...

  6. 5、css补充

    css其余问题补充 本篇导航: 默认的高度和宽度问题 后台管理布局 css响应式布局 一.默认的高度和宽度问题 1.父子都是块级元素 <!DOCTYPE html> <html> ...

  7. 第五篇、css补充二

    一.内容概要 1.图标 2.目录规划 3.a标签中的img标签在浏览器中的适应性 4.后台管理系统设置 5.边缘提示框 6.登录页面图标 7.静态对话框 8.加减框 补充知识: line-height ...

  8. 前端之CSS：CSS补充

    css样式之补充... css常用的一些属性: 1.去掉下划线 :text-decoration:none ;2.加上下划线: text-decoration: underline; 3.调整文本和图 ...

  9. Python之路【第十一篇续】前端之CSS补充

    CSS续 1.标签选择器 为类型标签设置样式例如:<div>.<a>.等标签设置一个样式,代码如下: <style> /*标签选择器,如果启用标签选择器所有指定的标 ...

  10. CSS 补充

    属性选择器下面的例子为带有 title 属性的所有元素设置样式:[title]{ color:red;} <h1>可以应用样式:</h1><h2 title=" ...

随机推荐

  1. jrebel 启动失败的处理

    jrebel 启动失败的处理 今天使用 jrebel 启动项目的时候,突然啥日志都没有,只有一句Disconnected from the target VM, address: '127.0.0.1 ...

  2. 如果不空null并且不是空字符串才去修改这个值，但这样写只能针对字符串(String)类型，如果是Integer类型的话就会有问题了。 int i = 0; i!=''。 mybatis中会返回tr

    mybatis 参数为Integer型数据并赋值0时,有这样一个问题: mybatis.xml中有if判断条件判断参数不为空时,赋值为0的Integer参数被mybatis判断为空,因此不执行< ...

  3. Java学习日报7.26

    package leijia;import java.util.*;public class Sum { public static void main(String[] args) { // TOD ...

  4. 已加载"C:\Windows\SysWOW64\msvcp120d.dll".无法查找或打开 PDB 文件.

    已加载"C:\Windows\SysWOW64\msvcp120d.dll".无法查找或打开 PDB 文件. 今天使用vs2013遇到了这样的问题. 解决方案: 点调试. 然后选项 ...

  5. hive集群模式安装

    hadoop3.2.0 完全分布式安装 hive-3.1.1 #解压缩tar -zxvf /usr/local/soft/apache-hive-3.1.1-bin.tar.gz -C /usr/lo ...

  6. sendfile“零拷贝”和mmap内存映射

    在学习sendfille之前,我们先来了解一下浏览器访问页面时,后台服务器的大致工作流程. 下图是从用户访问某个页面到页面的显示这几秒钟的时间当中,在后台的整个工作过程. 如上图,黑色箭头所示的过程, ...

  7. hive on spark：return code 30041 Failed to create Spark client for Spark session原因分析及解决方案探寻

    最近在Hive中使用Spark引擎进行执行时(set hive.execution.engine=spark),经常遇到return code 30041的报错,为了深入探究其原因,阅读了官方issu ...

  8. Sqoop（二）常用命令及常数解析

    一.常用命令列举 二.命令及参数详解 1.数据库连接 2.import 3.export 4.hive

  9. spark的运行指标监控

    sparkUi的4040界面已经有了运行监控指标,为什么我们还要自定义存入redis? 1.结合自己的业务,可以将监控页面集成到自己的数据平台内,方便问题查找,邮件告警 2.可以在sparkUi的基础 ...

  10. Oracle RedoLog-二进制格式分析，文件头，DML，DDL

    上篇文章,简单介绍了 RedoLog 是什么,以及怎么从 Oracle Dump 二进制日志.接下来,分析下 Redo Log 二进制文件的格式,主要包括:文件头,重做日志头,DML-INSERT 操 ...