一、定位（position）
-
为什么要用定位？
-
元素的定位属性
-
静态定位（static）
静态定位对于边偏移无效的，一般他用来清除定位的。一个原来有定位的盒子，不想加定位了，就写这句话。 -
相对定位 relative (自恋型)
-
绝对定位 absolute (拼爹型)
父级没有定位
父级有定位
绝对定位的盒子垂直水平居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对定位水平垂直居中</title>
<style type="text/css">
.father {
width: 800px;
height: 400px;
background-color: pink;
margin: 50px auto;
position: relative; /*相对定位,不脱标(占有位置)*/
}
.son {
width: 200px;
height: 100px;
background-color: red;
position: absolute; /*绝对定位,脱标(不占位置)*/
top: 50%;
margin-top: -50px;
left: 50%;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
子绝父相
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子绝父相-哈根达斯</title>
<style type="text/css">
div {
width: 310px;
height: 190px;
margin: 50px auto;
border: 1px solid #cccccc;
padding: 10px;
position: relative;
}
.topIcon {
position: absolute;
top: 0;
left: 0;
}
.bottomIcon {
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div>
<img src="img/top_tu.gif" class="topIcon"/>
<img src="img/adv.jpg"/>
<img src="img/br.gif" class="bottomIcon"/>
</div>
</body>
</html>
所需资料图片：
-
固定定位 fixed (认死理型)
注：固定定位的盒子一定要写宽和高，除非有内容撑开不用写 -
叠放顺序 （z-index）
二、四种定位总结
三、定位模式转换.
四 、元素的显示与隐藏
- display 显示
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标经过显示二维码</title>
<style>
div {
width: 100px;
height: 100px;
background-color: #FF0000;
line-height: 100px;
margin: 100px auto;
position: relative;
}
div img {
position: absolute;
left: 110px;
top: 0;
display: none; /*隐藏对象*/
}
div:hover img {
display: block;
}
</style>
</head>
<body>
<div>
<img src="erweima.png" />
</div>
</body>
</html>
-
visiblity 可见性
-
overflow 溢出
五、CSS高级技巧
-
css用户界面样式
1.鼠标样式cursor
2.轮廓outline
3.防止拖拽文本域resize
-
vertical-align垂直对齐
常见的块级元素和行内元素以及行内块元素：
5.图片和文字对齐virtical-align： middle; 运用实例:
6.去除图片底侧空白缝隙
-
溢出文字隐藏
1.word-break
2.text-overflow 文字溢出
注：首先一定需要强制换行：用write-space: nowrap; 其次用overflow:hidden; 再用 text-overflow:ellipsis -
css精灵技术（sprite）
1.精灵技术产生的背景
2.精灵技术本质
3.精灵技术的使用
4.制作精灵图
5.精灵图的保存（1.首先ctrl+s 保存为psd文件 2.存储为web格式 保存为png或gif格式）：
-
字体图标（iconfont）
1.字体图标优点
2.字体图标使用流程
3.常用的字体图标网站
4.如何将字体图标运用到html页面中：
-
滑动门 （
原理：利用padding值撑开盒子，不能设置width）
1.滑动门出现的背景
2.核心技术
3.滑动门的运用（微信导航栏）
注：导航栏的一般做法结构都是 .nav>ul>li>a>span
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>微信导航栏</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
body {
background: url(img/wx.jpg);
}
ul li {
float: left;
margin-right: 20px;
padding-top: 23px;
}
.nav {
height: 75px;
/*background-color: #FFFFFF;*/
}
.nav li a {
display: block;
background: url(img/to.png) no-repeat;
color: #FFFFFF;
font-size: 14px;
line-height: 33px;
padding-left: 15px;
text-decoration: none;
}
.nav li a span {
display: block;
line-height: 33px;
background: url(img/to.png) no-repeat right;
padding-right: 15px;
}
</style>
</head>
<body>
<div class="nav">
<!--导航栏常用的做法： ul>li>a>span-->
<ul>
<li>
<a href="#">
<span>首页</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<span>帮助与反馈</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<span>公众号平台</span>
</a>
</li>
</ul>
</div>
</body>
</html>
优化之后效果：
- before和after伪元素
1.before伪元素的使用（经常用）：
2.代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>before伪元素使用</title>
<style type="text/css">
div {
width: 296px;
height: 180px;
margin: 100px auto;
position: relative;
}
div:hover::before { /*鼠标经过div之后 在里面插入一个before伪元素 相当于是添加了一个盒子*/
content: "";
width: 100%;
height: 100%;
border: 10px solid rgba(255,255,255,0.3);
display: block;
position: absolute;
box-sizing: border-box; /*将padding和border值放入width中*/
top: 0;
left: 0;
}
</style>
</head>
<body>
<div>
<img src="img/mi.jpg" alt="" />
</div>
<div>
<img src="img/mi.jpg" alt="" />
</div>
<div>
<img src="img/mi.jpg" alt="" />
</div>
</body>
</html>
注：此方法用的比较多 特别需要理解div:hover::before 意思是鼠标经过div之后添加一个before伪元素 相当于是添加一个盒子。
- 过渡
1.过渡的运用：
注： 由于篇幅过长，下篇继续 ！！
扫一扫
312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
