1、文本属性和字体属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
width:400px;
height: 300px;
/*background-color: red;*/
border: 1px solid red;
font-size: 20px;/*设置字体大小 px为像素 rem em %用在盒子不写宽度继承了父盒子，这三个主要用在移动端； 默认的字体大小是16px */
font-weight: 700; /*字体粗细，默认normal;bold加粗；bolder更加粗；lighter很细；默认数值是400；*/
font-style:oblique; /*推荐设置斜体的时候用oblique，italic，normal*/
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
text-align: center; /*文本水平居中* justify两端对齐（只对英文有效）；默认是左对齐，right是右对齐； */
text-shadow:0px 0px 1px #fff; /*设置阴影效果*/
text-decoration: none; /*默认是none没有下划线；underline下划线、underline blue； 主要用于清除a标签的默认样式（下划线）*/
color: blue; /*字体颜色*/
cursor: pointer; /*光标，小手状态；*/
/*line-height: 300px;行高，它的高度等于height的高度，垂直水平居中。*/
/*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; /*垂直居中，是相当于line-height，而不是相对height的；*/
font-size: 18px; }
</style>
</head>
<body> <div>
内容国家
</div> </body>
</html>
多行文本垂直居中
行高的意思: 公式 :行高=盒子的高度，让文本垂直居中 但是只适应与单行文本；
line-height: 30px; 它一定要比font-size大。 一个行高30px，一共4个行高共120px，总的高度是200px，如果让整个行高垂直居中在当前盒子中，
（200-120）/2=40px，设置其padding-top，height相应减少-40px。
font-size: 17px; 字体变大，行高就又变了。5行，要学会计算。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
width: 300px;
height: 175px;
border: 2px solid red;
padding-top: 25px; /*（200-150）/2=25px，设置其padding-top，height相应减少-25px。*/
line-height: 30px; /*5行，30*5=150，总高度200， */
font-size: 17px;
}
</style>
</head>
<body>
<div>
但是，在面对这些问题时，我们并不是无能为力的。你们，并非没有能力去修补这一切。
没有哪一代学生比你们更有力量，没有哪一代人比你们能更快地让改变发生。
</div>
</body>
</html>
font-family
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{
width: 300px;
height: 60px; /*font-size: 14px;*/
/*line-height: 30px;*/
/*font-family: '宋体'; !* 等价于 font:14px/30px 宋体*!*/
font:14px/30px "Arial","Hanzipen SC","微软雅黑";
}
</style>
</head>
<body>
<p>我是个文本</p>
</body>
</html>
使用font-family注意几点：
1.网页中不是所有字体都能用哦，因为这个字体要看用户的电脑里面装没装，
比如你设置： font-family: "华文彩云"; 如果用户电脑里面没有这个字体，
那么就会变成宋体
页面中，中文我们只使用： 微软雅黑、宋体、黑体。
如果页面中，需要其他的字体，那么需要切图。 英语：Arial 、 Times New Roman
2.为了防止用户电脑里面，没有微软雅黑这个字体。
就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面，
没有安装微软雅黑字体，那么就是宋体：
font-family: "微软雅黑","宋体"; 备选字体可以有无数个，用逗号隔开。
3.我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，
就自动的变为后面的中文字体：
font-family: "Times New Roman","微软雅黑","宋体"; 意思就是说如果电脑上没有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% “宋体”
2、背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景</title> <style type="text/css">
#img{
width: 990px;
height: 980px; /*设置背景颜色*/
/*background-color: yellowgreen;*/ /*设置背景图像 ； 连接url 默认水平垂直平铺*/
/*background-image: url(./images/nvshen.jpg);*/ /*background-repeat: no-repeat;*/ /*background-position: -50px -20px;*/ /*简写*/
/*background: url(./images/banner.jpg) no-repeat 10px 20px;*/ background: red; padding-top: 10px;
border: 5px solid black; } </style>
</head>
<body> <div id="img"></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，00就是10进制的0。所以等价于rgb(255,0,0);
怎么换算的？我们介绍一下
我们现在看一下10进制中的基本数字（一共10个）:
0、1、2、3、4、5、6、7、8、9 16进制中的基本数字（一共16个）:
0、1、2、3、4、5、6、7、8、9、a、b、c、d、e、f 16进制对应表：
十进制数 十六进制数
0 0
1 1
2 2
3 3
……
10 a
11 b
12 c
13 d
14 e
15 f 16 10
17 11
18 12
19 13
……
43 2b
……
255 ff 十六进制中，13 这个数字表示什么？
表示1个16和3个1。 那就是19。 这就是位权的概念，开头这位表示多少个16，末尾这位表示多少个1。
小练习：
16进制中28等于10进制多少？
答：2*16+8 = 40。 16进制中的2b等于10进制多少？
答：2*16+11 = 43。 16进制中的af等于10进制多少？
答：10 * 16 + 15 = 175 16进制中的ff等于10进制多少？
答：15*16 + 15 = 255 所以，#ff0000就等于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 浅灰
颜色：
RGBA(R,G,B,A)
- R：
- 红色值。正整数 | 百分数
- G：
- 绿色值。正整数 | 百分数
- B：
- 蓝色值。正整数 | 百分数
- A：
- Alpha透明度。取值0~1之间。
RGBA记法。
补充：
有关颜色的RGB http://bj.96weixin.com/rgb/ http://tool.oschina.net/commons?type=3 http://tool.chinaz.com/Tools/SelectColor.aspx
background-color（背景颜色） & background-image（背景图片）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*div{*/
/*width: 200px;*/
/*height: 200px;*/
/*background-color: rgb(0,0,0);*/
/*}*/ div{
width: 1500px;
height: 1600px;
background-image:url(./images/distance.png);
/*background-repeat:no-repeat ;*/ /*不平铺；默认会平铺整个屏幕*/
/*background-repeat: repeat-x; x方向上平铺；竖直方向上不平铺；*/
padding: 100px; /*padding的区域也被平铺掉了。*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
repeat应用案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul{
list-style:none;
}
body{
background-image: url(./images/timg2.jpeg);
} /*给body设置背景图；这样背景图上边就还有文字和其他东西了*/
.nav{
width:960px;
height: 40px;
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: '华文宋体';
}
/*a标签除外，不继承父元素的color*/
.nav ul li a:hover{
background-color: red;
font-size: 20px;
}
</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-position
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
div{
width: 1500px;
height:1600px;
background-image:url(./images/distance.png);
background-repeat: no-repeat;
background-position: 100px 100px; /*正值 第一个值表示往右偏移 第二个值表示往下 负值则相反*/
}
</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: 1500px;
height: 1600px;
border: 1px solid red;
background-image: url(./bojie.jpg);
background-repeat: no-repeat; /*水平方向 left center right
垂直方向 top center bottom
*/
background-position:right bottom;
}
</style>
</head>
<body>
<div> </div> </body>
</html>
精灵图/雪碧图技术
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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>
通天banner
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul{
list-style:none;
}
body{
/*background-image: url(./images/banner.jpg);*/
/*background-repeat: no-repeat;*/
/*水平居中通天banner图*/
/*background-position: center top; !*中心上方显示，大的图片超过了你的屏幕显示，可以使用这种方案*!*/
/*综合属性设置 center和top一定要挨着写*/
background: pink url(./images/banner.jpg) no-repeat center top; } /*给body设置背景图；这样背景图上边就还有文字和其他东西了*/
.nav{
width:960px;
height: 40px;
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: '华文宋体';
}
/*a标签除外，不继承父元素的color*/
.nav ul li a:hover{
background-color: red;
font-size: 20px;
}
</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-attach
background: url(./bojie.jpg) no-repeat 0 0 fixed; 可以把fixed放在这里边；依次是background-image，background-repeate，background-position，background-attach
/*固定 背景*/
/*background-attachment: fixed;*/ 背景图片固定了，文字在滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 1200px;
height: 2000px;
border: 1px solid red;
background: url(./bojie.jpg) no-repeat 0 0 fixed; 可以把fixed放在这里边
/*固定 背景*/
/*background-attachment: fixed;*/ 背景图片固定了，文字在滚动
color: white;
}
</style>
</head>
<body>
<div>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p> </div> </body>
</html>
3、定位处理-定位：position
相对定位和绝对定位
relative:相对定位
相对于自身进行定位
.不设置偏移量的时候 对元素没有任何影响
.可以提升层级关系（加了position:relative;之后会提升层级关系） absolute：绝对定位
在没有父级元素定位时，以浏览器的左上角为基准；
有父级的情况下，父级设置相对定位，子级设置绝对定位 是以父盒子进行定位
“父相子绝”（父级相对定位，子级绝对定位）
.提升层级关系
.脱离文档流（就是飘起来了）
相对定位relative
div+css布局；浮动 ； 转块和转行的元素display；定位
定位有三种： 1.相对定位 2.绝对定位 3.固定定位
这三种定位，每种定位都暗藏玄机，所以我们要一一单讲 position:relative;
position:absolute;
position:fixed;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #2aabd2;
position: relative; /*如果对当前元素仅仅设置相对定位，那么与标准流下的盒子没有什么区别*/
/*设置相对定位 我们就可以使用四个方向的属性 top left right bottom
/*相对定位：相对于自己原来本身定位 top:20px; 那么盒子相对于原来的位置向下移动。相对定位仅仅的微调我们元素的位置*/
top: 20px;
left: 30px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
相对定位的特性
相对定位三大特性： 1.不脱标（就是不脱离标准流）
2.形影分离（和影子是分不开的，就是它和它原来的位置）
3.老家留坑(保留在当前位置上，就是它原来的位置别人挤不进去） :占着茅房不拉屎，恶心人 。
相对定位是相对自身进行定位；不设置偏移量的时候
所以说 相对定位 在页面中没有什么太大的作用。影响我们页面的布局。但是我们不要使用相对定位来做压盖效果（绝对定位才是做压盖效果）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
position: relative; /*相当于它原来的位置；绿色盒子没有脱离标准流*/
top: 20px;
left: 30px;
}
.box3{
background-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
相对定位的用途
因为相对定位有坑，占着茅房不拉屎，恶心人，所以我们一般不要使用相对定位来做压盖效果。它在页面中，效果作用极小，就两个作用：
1.微调元素位置
2.做绝对定位的参考（父相子绝） 讲绝对定位会讲
<!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.xiaoming{
position: relative; /*不影响页面的布局,一般不在浮动的时候用相对定位。*/
/*top: 40px;*/
left: 30px;
}
.nav ul li a{
display: block;
width: 160px;
height: 40px;
color: white;
font-size: 20px;
text-decoration: none;
font-family:'华文宋体';
}
/*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 class="xiaoming">
<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>
微调元素位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
margin: 100px;
}
.user{
font-size: 25px;
}
.btn{
position: relative;
top: 3px;
left: -5px;
}
</style>
</head>
<body>
<div>
<input type="text" name="username" class="user">
<input type="button" name="" value="点我" class="btn">
</div>
</body>
</html>
绝对定位
绝对的定位： 1.脱标（红色盒子脱离了标准流遮盖了绿色的盒子，绿色、蓝色的盒子挤上去了；）
2.做遮盖效果，提升层级
3.设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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">
body{
width: 100%;
height: 2000px;
border: 10px solid green;
} .box{
width: 200px;
height: 200px;
background-color: red;
/*绝对定位参考点：
1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
*/
position: absolute;
top: 100px;
left: 18px;
}
</style>
</head>
<body>
<div class="box"> </div> </body>
</html>
绝对定位以盒子作为参考点
父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点
这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。 如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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>
不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点 。
注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。
相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，
仅仅的是在当前父辈元素内调整位置信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
border: 5px solid red;
margin: 100px;
/*父盒子设置相对定位*/
position: absolute; /*父绝对*/
padding: 50px;
}
.box p {
width: 100px;
height: 100px;
background-color: pink;
/*子元素设置了绝对定位*/
position: absolute; /*子绝对*/
top: 10px;
left: 20px;
}
</style> </head>
<body>
<div class="box">
<p></p>
</div>
</body>
</html>
绝对定位的盒子无视父辈的padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
width: 300px;
height: 300px;
margin: 100px;
border: 10px solid red;
position: relative;
padding: 50px; /*无视父的padding*/
}
.father p{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute; /*绝对对位的盒子，无视父的padding，是以父为参考点，而不是父的内容区域*/
top: 10px;
left: 40px;
} </style>
</head>
<body>
<div class="father">
<p></p>
</div>
</body>
</html>
绝对定位盒子居中
设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。
当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.box{
width:100%;
height: 96px;
background: #985f0d; }
.box .a{
width: 960px;
height: 96px;
background-color: #1b6d85;
/*margin:0 auto;*/
position: absolute; /*设置了绝对定位，它就以页面为起点。不再居中了， 0 auto*/
left:50%;
margin-left:-480px; /*往左走*/
} </style>
</head>
<body>
<div class="box">
<div class="a"></div>
</div>
</body>
</html>
父相子绝案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: ;
margin: ;
}
.box{
width: 277px;
height: 284px;
border: 1px solid red;
margin: 100px;
position: relative;
}
.box img{
width: 277px;
height: 177px; }
.box .dtc{
width: 52px;
height: 27px;
background: url(../images/common.png) no-repeat -54px ;
position: absolute;
top: -9px;
left: 9px;
}
.box .zhegai{
width: 277px;
height: 38px;
color: #fff;
line-height: 38px;
text-align: center;
background-color: rgba(,,,.);
position: absolute;
top: 139px;
left: ; }
</style>
</head>
<body>
<div class="box">
<img src="../images/longxia.jpg" alt="">
<span class="dtc"></span>
<div class="zhegai">小龙虾</div>
</div> </body>
</html>
固定定位
固定定位：固定当前的元素不会随着页面滚动而滚动， 特性：1.脱标 2.提升层级 3.固定不变 不会随页面滚动而滚动 参考点：设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点 作用： 1.返回顶部栏 2.固定导航栏 3.小广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
p{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
bottom: 30px;
right: 40px;
} </style>
</head>
<body>
<div>
<p></p>
<img src="../images/distance.png" alt="">
<img src="../images/distance.png" alt="">
<img src="../images/distance.png" alt="">
<img src="../images/distance.png" alt="">
<img src="../images/distance.png" alt="">
</div>
</body>
</html>
返回顶部案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
p{
width: 100px;
height:100px;
background-color: red;
position: fixed;
bottom: 30px;
right: 40px;
line-height: 100px;
font-size: 20px;
text-align: center;
color:pink;
}
</style>
</head>
<body>
<div>
<p>返回顶部</p>
<img src="bojie.jpg" alt="">
<img src="bojie.jpg" alt="">
<img src="bojie.jpg" alt="">
<img src="bojie.jpg" alt="">
<img src="bojie.jpg" alt="">
<img src="bojie.jpg" alt="">
<img src="bojie.jpg" alt="">
</div>
</body>
<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('p').click(function(){
$('html').animate({
"scrollTop":0
},2000)
})
})
</script> </html>
固定导航栏案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul{
list-style:none;
}
body{
padding-top: 40px; /*给body设置导航栏的高度，来显示下方图片的整个内容*/
}
.wrap{
width:100%;
height:40px;
background-color: #1b6d85;
position:fixed; /*给父盒子设置固定定位，之后，一定一定要加top属性和left属性*/
top:0;
left:0;
}
.wrap .nav{
width:960px;
height: 40px;
margin: 0 auto;
background-color: purple;
border-radius: 5px; /*设置圆角*/
}
.wrap .nav ul li{
float: left;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
}
.wrap .nav ul li a{
display: block;
width: 160px;
height:40px;
color: white;
font: 20px/40px '华文宋体'; /*大小、行高;*/
/*font-size: 20px;*/
text-decoration: none;
/*font-family: '华文宋体';*/
background-color: purple;
}
/*a标签除外，不继承父元素的color*/
.wrap .nav ul li a:hover{
background-color: red;
font-size: 20px;
}
</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="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt="">
<img src="./bojie.jpg" alt=""> </body>
</html>
4、Z-index
z-index
1.z-index 值表示谁压着谁，数值大的压盖住数值小的
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</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.box1{
width: 200px;
height:200px;
background-color: red;
position: relative;
top: 30px;
left: 40px;
z-index:1;
}
.box2{
width: 200px;
height:200px;
background-color: yellow;
position: relative;
top:0;
left:0;
z-index: 2; }
.box3{
width:200px;
height:200px;
background-color: green;
float: left;
margin-left:20px;
margin-top: -30px; }
</style> </head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width:100px;
height: 100px;
position: absolute;
}
.box1{
background-color: red;
top: 50px;
/*发现box2的层级比box1的层级高，给它设置个z-index*/
z-index: ;
}
.box2{
background-color: green;
/*border-radius:20px 0px 0px 0px;*/
border-radius: % ;
z-index: ;
}
.box3{
background-color: yellow; } </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
从父现象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0
}
.tianliang{
width: 200px;
height: 200px;
background-color: red;
position: relative;
z-index: 3; }
.tianliang .sendie{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
top: 240px;
left: 300px;
z-index: 333; }
.lzy{
width: 200px;
height: 200px;
background-color: yellow;
position: relative;
z-index: 4;
}
.lzy .brother{
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 100px;
left: 320px;
z-index: 111; }
</style>
</head>
<body> <div class="tianliang">
<p class="sendie"></p>
</div>
<div class="lzy">
<p class="brother"></p>
</div>
</body>
</html>