CSS补充2

浮动是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的更多相关文章

CSS补充与JavaScript基础
一.CSS补充 position 1.fiexd 固定在页面的某个位置; 示例将顶部菜单始终固定在页面顶部 position: fixed; 将标签固定在某个位置 right: 0; 距离右边0像素 ...
CSS补充之--页面布局、js补充，dom补充
CSS补充之--页面布局主站一:(下面是一个大致的模板) <div class="pg-header"> <div style="width: 120 ...
css补充、JavaScript、Dom
css补充: position: fixed:可以将标签固定在页面的某个位置 absolute+relative:通过两者的结合可以让标签在一个相对的位置代码例子:(通过fixed标签将某些内容固定 ...
HTML+CSS补充
1. HTML+CSS补充 - 布局: <style> .w{ width:980px;margin:0 auto; } </style> <body> <d ...
53、css补充
css其余问题补充一.默认的高度和宽度问题 1.父子都是块级元素 <!DOCTYPE html> <html> <head> <title>...&l ...
5、css补充
css其余问题补充本篇导航: 默认的高度和宽度问题后台管理布局 css响应式布局一.默认的高度和宽度问题 1.父子都是块级元素 <!DOCTYPE html> <html> ...
第五篇、css补充二
一.内容概要 1.图标 2.目录规划 3.a标签中的img标签在浏览器中的适应性 4.后台管理系统设置 5.边缘提示框 6.登录页面图标 7.静态对话框 8.加减框补充知识: line-height ...
前端之CSS：CSS补充
css样式之补充... css常用的一些属性: 1.去掉下划线 :text-decoration:none ;2.加上下划线: text-decoration: underline; 3.调整文本和图 ...
Python之路【第十一篇续】前端之CSS补充
CSS续 1.标签选择器为类型标签设置样式例如:<div>.<a>.等标签设置一个样式,代码如下: <style> /*标签选择器,如果启用标签选择器所有指定的标 ...
CSS 补充
属性选择器下面的例子为带有 title 属性的所有元素设置样式:[title]{ color:red;} <h1>可以应用样式:</h1><h2 title=" ...

随机推荐

动态SQL基本语句用法
1.if语句如果empno不为空,则在WHERE参数后加上AND empno = #{empno},这里有1=1所以即使empno为null,WHERE后面也不会报错. 映射文件 <selec ...
easyui中连接按钮样式
方法1. <a href="otherpage.php" class="easyui-linkbutton" data-options="ico ...
理解Tomcat工作原理
WEB服务器只要Web上的Server都叫Web Server,但是大家分工不同,解决的问题也不同,所以根据Web Server提供的功能,每个Web Server的名字也会不一样. 按功能分类,W ...
NIO非阻塞式编程
/** * NIO非阻塞式编程<p> * 服务端和客户端各自维护一个管理通道的对象,我们称之为selector,该对象能检测一个或多个通道 (channel) 上的事件. * 我们以服务端 ...
使用纯 CSS 实现滚动阴影效果
开门见山,有这样一种非常常见的情况,对于一些可滚动的元素而言.通常在滚动的时候会给垂直于滚动的一侧添加一个阴影,用于表明当前有元素被滚动给该滚出了可视区域,类似这样: 可以看到,在滚动的过程中,会出现 ...
Android网络笔记
(1)网络状态: ConnectivityManager负责管理所有连接的服务(如:系统服务,3G/4G,WiFi,蓝牙等).查看网络状态的类是NetWorkInfo,它是通过Connectivity ...
spark的 structStreaming 一些介绍
转发 https://www.toutiao.com/a6696339998905467403/?tt_from=mobile_qq&utm_campaign=client_share& ...
Java入门随手记-DOS命令
DOS 打开cmd的方式开始+系统+命令提示符 win键+r 输入cmd打开控制台(推荐使用) 在任意的文件夹下面,按住shift键+鼠标右键点击,在此次打开命令窗口资源管理器的地址栏前面加上cm ...
在mapper.xml映射文件中添加中文注释报错
问题描述: 在写mapper.xml文件时,想给操作数据库语句添加一些中文注释,添加后运行报如下错误: 思考可能是写了中文注释,编译器在解析xml文件时,未能成功转码,从而导致乱码.但是文件开头也采 ...
剑指offer 面试题0：扎实的基础：即编程语言、数据结构和算法
编程语言: Q:如果写的函数需要传入一个指针,则是否需要为该指针加上const?把const加在指针不同的位置是否有区别? A:const是用来声明一个常量的,如果不想让一个值改变就应该加上const ...

CSS补充2

CSS补充2的更多相关文章

随机推荐

热门专题