1. 相对定位和绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
}
/*相对位置是相对初始的位置基础上进行移动,且初始的元素不会脱离文档流，
* 仍然占据初始文档流的位置*/
/*相对定位元素，一般是将父级设置相对定位，
* 子级设置绝对定位，子级就以父级作为参照来定位，否则子级相对于body来定位。*/
/*绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，
* 相对于上一个设置了定位的父级元素来进行定位，如果找不到，
* 则相对于body元素进行定位。*/
.one{
background: lightblue;
position: relative;
left: 50px;
top: 50px; /* 相对定位*/
}
.two{
background: greenyellow;
position: absolute;
left: 50px;
top: 50px; /* 绝对定位*/
}
</style>
</head>
<body>
<p>哈哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈哈</p>
<div class="one">相对定位</div>
<div class="two">绝对定位</div>
<p>哈哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈哈</p>
</body>
</html>
2. 子绝父相应用
图片可以任意图片替代
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*1-子相父绝：子级绝对定位、父级相对定位，
* 能保证每一台电脑看到的效果一致*/
div {
width: 600px;
margin: 0 auto;
position: relative;
}
span {
display: block;
width: 50px;
height: 50px;
background: blue;
position: absolute;
left: 100px;
top: 100px;
}
/*2-如果直接用绝对定位来定位span元素，在不同的分辨率下，
* 色块的位置会不同，不能满足在不同的电脑上看到的效果相同*/
/*div{width: 600px;
margin: 0 auto;
}
span{display: block;
width: 50px;
height: 50px;
background: blue;
position: absolute;
left: 800px;
top: 300px;}*/
</style>
</head>
<body>
<div>
<img src="banner.jpg" />
<span></span>
</div>
</body>
</html>3. 定位方向冲突的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{width: 200px;
height: 200px;
background: greenyellow;
position: absolute;
left: 0;
right: 200px;
/*当水平的方向冲突，以left的为准*/
top: 0;
bottom: 200px;}
/*当垂直的方向冲突，以top的为准*/
</style>
</head>
<body>
<div></div>
</body>
</html>
4. Z-index 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*z-index 解决定位盒子谁压着谁的问题。帶的数值越大，盒子越靠前*/
.one {
width: 200px;
height: 200px;
background: greenyellow;
position: absolute;
left: 0px;
top: 0px;
z-index: 3;
}
.two {
width: 200px;
height: 200px;
background: deepskyblue;
position: absolute;
left: 50px;
top: 50px;
z-index: 2;
}
.three {
width: 200px;
height: 200px;
background: yellow;
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
5. 固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{height: 4000px;}
div{height: 200px;
width: 50px;
background: greenyellow;
padding: 5px;
/*固定定位元素，元素脱离文档流，不占据文档流的位置，
可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。*/
position: fixed;
right: 50px;
top: 200px;}
p{width: 50px;
height: 50px;
background: deepskyblue;
text-align: center;
color: red;
font-size: 12px;}
</style>
</head>
<body>
<div>
<p>购物车</p>
<p>我喜欢</p>
<p>收藏</p>
</div>
</body>
</html>
6. 弹窗案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
height: 5000px;
}
/*固定定位：永远固定在用户的屏幕中
1.不占位置 2.以用户的可视区域为起点3.能够设置宽高*/
.mask {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
position: fixed;
left: 0;
top: 0;
}
/*如果只是水平居中，用margin:0 auto;
水平垂直都要居中，一定要用定位
原理：left或top设置50%；再通过margin-left/top:-自身宽高的一半px;*/
.box {
width: 200px;
height: 200px;
background: deepskyblue;
position: fixed;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
</style>
</head>
<body>
<div class="mask">
<div class="box">
<p>登录界面</p>
</div>
</div>
</body>
</html>7. CSS继承性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
color: red;
text-decoration: underline;
font-size: 20px;
line-height: 20px;
background: greenyellow;
}
</style>
</head>
<body>
<div>
<span>给父亲写的样式，子级会继承过来<br />
能够继承的样式：color,text-decoration,font-size,line-height…关于字体的</span>
</div>
</body>
</html>
8.CSS 层叠性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#plus{text-decoration: overline;}
/*选择器一样，看顺序，执行的是靠后的。
* 相当于是下了两次命令，第一次命令忽略，执行最新的命令
* 下面两个color执行的是后面一个blue*/
h1 {
color: red;
color: blue;
text-decoration: underline;
/*对于已经设置的font-size属性，在没有相应更改的情况下，
* 对于同一个标签，是会保留其属性*/
font-size: 14px;
}
/*在选择器不一样的时候，text-decoration按照CSS权重值大小来执行
*不同的选择器，按照以下
*标签 < 类 < id
*并不是按照就近原则或者按照命令的顺序执行
*text-decoration最后显示的仍然是同过id来设置的*/
.one {text-decoration: none;}
</style>
</head>
<body>
<h1 class="one" id="plus">
CSS权重值<br />
如果选择器是一样的就看顺序，如果选择器不一样的就看谁更大<br />
不同的选择器，也会分大小<br />
标签 < 类 < id
</h1>
</body>
</html>
9. 背景属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{width: 400px;height: 400px;
border: 1px solid #000;
/*1.在默认没有设置背景图片的平铺条件下，默认是水平和垂直方向都平铺
repeat-x 水平平铺
repeat-y 垂直平铺
no-repeat 不平铺
2.在设置了背景图片的情况下，任然能设置背景颜色
3.
3.1背景图片的位置默认是left top（左上角）
3.2但是也能改变 left right top bottom来改变位置
3.3也能设定具体的值来改变 如100px 50px
4.background所有的条件都能随意变动位置，
但是限定背景图片位置的两个条件如left top必须要写在一起*/
background:url(shuai.png) no-repeat pink 100px 50px;}
/*背景图片可以替换*/
</style>
</head>
<body>
<div>
repeat-x 水平平铺<br />
repeat-y 垂直平铺<br />
no-repeat 不平铺<br />
</div>
</body>
</html>
10. 案例-底部菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 1000px;
height: 40px;
border: 1px solid black;
margin: 50px auto;
text-align: center;
}
a {
text-decoration: none;
color: black;
line-height: 40px;
}
span {
margin: 0 12px;
}
a:hover {
color: red
}
</style>
</head>
<body>
<div>
<a href="">菜单文字</a><span>|</span>
<a href="">菜单文字</a><span>|</span>
<a href="">菜单文字</a><span>|</span>
<a href="">菜单文字</a><span>|</span>
<a href="">菜单文字</a><span>|</span>
<a href="">菜单文字</a><span>|</span>
<a href="">菜单文字</a>
</div>
</body>
</html>11. 案例-分页菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 1000px;
height: 38px;
border: 1px solid #000;
margin: 50px auto;
text-align: center;
padding-top: 3px;
}
a {
text-decoration: none;
color: #000;
background: gold;
font-size: 14px;
display: inline-block;
width: 40px;
height: 35px;
margin: 0px 5px;
line-height: 40px;
}
.page {
width: 70px;
}
a:hover {
background: red;
color: white;
}
</style>
</head>
<body>
<div>
<a href="" class="page">上一页</a>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<span>...</span>
<a href="">96</a>
<a href="">97</a>
<a href="">98</a>
<a href="">99</a>
<a href="" class="page">下一页</a>
</div>
</body>
</html>12. CSS属性提高
12.1 文本常用样式属性二：
1、text-align 设置文字水平对齐方式，如text-align:center
2、设置文字水平居中text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
12.2 display属性
display属性是用来设置元素的类型及隐藏的，常用的属性有：
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
86
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
