前端技术之_CSS详解第六天--完结
前端技术之_CSS详解第六天--完结
一、复习第五天的知识
a标签的伪类4个：
a:link 没有被点击过的链接
a:visited 访问过的链接
a:hover 悬停
a:active 按下鼠标不松手
顺序就是“love hate”准则。
可以简写：
1 a{
3 }
4 a:hover{
6 }
background系列属性，CSS2.1层面
1 background-color 2 background-image 3 background-repeat 4 background-position 5 background-attachment
颜色表示法：red、rgb(255,0,0)、#ff0000、#f00
rgb和十六进制颜色是一样多的，是一一对应的。有换算关系。
background-image:url(images/1.jpg);
默认是平铺的。
background-repeat:no-repeat;
重复横向： repeat-x;
重复纵向： repeat-y;
不重复： no-repeat;
background-position:100px 200px;
背景图在盒子中右边移动100px，向下移动200px。
可以是负数，background-position:-100px -200px;
向左边100px，向上边200px。
英语单词来表示
background-position:right bottom; 右下角
background-position:center bottom; 下边居中
css精灵
css雪碧，要会用fireworks精确显示精灵图。
background-attachment
背景固定
1 background-attachment:fixed;
background属性大综合
1 background:url(images/1.jpg) no-repeat -100px -100px;
二、相对定位
定位有三种，分别是相对定位、绝对定位、固定定位。
相对定位：
1 position:relative;
固定定位：绝对定位：
1 position:absolute;
每一种定位，都暗藏玄机，所以我们分别讲解。
1 position:fixed;
2.1 认识相对定位
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
}
.box1{
background-color: yellowgreen;
}
.box2{
background-color: skyblue;
position: relative;
top: 100px;
left: 400px;
}
.box3{
background-color: orange;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
相对定位，就是微调元素位置的。让元素相对自己原来的位置，进行位置调整。
也就是说，如果一个盒子想进行位置调整，那么就要使用相对定位
1 position:relative; → 必须先声明，自己要相对定位了， 2 left:100px; → 然后进行调整。 3 top:150px; → 然后进行调整。
2.2 不脱标，老家留坑，形影分离
相对定位不脱标，真实位置是在老家，只不过影子出去了，可以到处飘。
2.3 相对定位用途
相对定位有坑，所以一般不用于做“压盖”效果。页面中，效果极小。就两个作用：
1） 微调元素
2） 做绝对定位的参考，子绝父相（讲绝对定位的时候说）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.txt{
font-size: 30px;
}
.btn{
position: relative;
top: 4px;
left:;
}
</style>
</head>
<body>
<p>
<input type="text" class="txt"/>
<input type="button" class="btn" value="我是一个小按钮" />
</p>
</body>
</html>
2.4 相对定位的定位值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: orange;
margin: 100px;
position: relative;
/*right: -300px;*/
bottom: 300px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
可以用left、right来描述盒子右、左的移动；
可以用top、bottom来描述盒子的下、上的移动。
↘：
1 position: relative; 2 top: 10px; 3 left: 40px;
↙：
1 position: relative; 2 right: 100px; → 往左边移动 3 top: 100px;
↖：
1 position: relative; 2 right: 100px; 3 bottom: 100px; → 移动方向是向上。
↗：
1 position: relative; 2 top: -200px; → 负数就是相反的方向，如果是正，就是下边，如果是负数就是上边 3 right: -200px;
↗：
1 position: relative; 2 right: -300px; 3 bottom: 300px;
完全等价于：
4 position: relative; 5 left: 300px; 1 bottom: 300px;
如图，有几种相对定位的移动方法？
方法1：
1 position:relative; 2 top:100px; 3 left:200px;
方法2：
1 position:relative; 2 bottom:-100px; 3 right:-200px;
方法3：
1 position:relative; 2 top:100px; 3 right:-200px;
方法4：
1 position:relative; 2 bottom:-100px; 3 left:200px;
三、绝对定位
绝对定位比相对定位更灵活。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:;
padding:;
}
div{
width: 200px;
height: 200px;
}
.box1{
background-color: yellowgreen;
}
.box2{
background-color: skyblue;
position: absolute;
top: 100px;
left: 140px;
}
.box3{
background-color: gold;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
3.1 绝对定位脱标
绝对定位的盒子，是脱离标准文档流的。所以，所有的标准文档流的性质，绝对定位之后都不遵守了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
span{
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<span></span>
</body>
</html>
绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block;就可以设置宽、高了：
1 span{
2 position: absolute;
3 top: 100px;
4 left: 100px;
5 width: 100px;
6 height: 100px;
8 }
3.2 参考点
绝对定位的参考点，如果用top描述，那么定位参考点就是页面的左上角，而不是浏览器的左上角：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
bottom: 100px;
left: 100px;
}
</style>
</head>
<body>
<div></div>
<img src="data:images/2.jpg" alt="" />
</body>
</html>
如果用bottom描述，那么就是浏览器首屏窗口尺寸，对应的页面的左下角：
面试题：
答案：
用bottom的定位的时候，参考的是浏览器首屏大小对应的页面左下角。
3.3 以盒子为参考点
一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素，为参考点。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:;
padding:;
}
div{
width: 400px;
height: 400px;
border: 10px solid red;
margin: 100px;
position: relative;
}
p{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
top: 40px;
left: 40px;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:;
padding:;
}
.box1{
width: 400px;
height: 400px;
padding: 100px;
border: 10px solid red;
margin: 100px;
position: relative;
}
.box2{
width: 300px;
height: 300px;
border: 50px solid blue;
}
p{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
top: 40px;
left: 40px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<p></p>
</div>
</div>
</body>
</html>
● 要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷：
1 <div class="box1"> → 相对定位 2 <div class="box2"> → 没有定位 3 <p></p> → 绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素 4 </div> 5 </div>
1 <div class="box1"> → 相对定位 2 <div class="box2"> → 相对定位 3 <p></p> → 绝对定位，将以box2为参考，因为box2是自己最近的父辈元素 4 </div> 1 </div>
● 不一定是相对定位，任何定位，都可以作为参考点
1 <div> → 绝对定位 2 <p></p> → 绝对定位，将以div作为参考点。因为父亲定位了。 3 </div>
子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是，工程上子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。工程上，“子绝父相”有意义，父亲没有脱标，儿子脱标在父亲的范围里面移动。
1 <div class=”box1”> → 绝对定位 2 <div class=”box2”> → 相对定位 3 <div class=”box3”> → 没有定位 4 <p></p> → 绝对定位，以box2为参考定位。 5 </div> 6 </div> 7 </div>
● 绝对定位的儿子，无视参考的那个盒子的padding。
下图中，绿色部分是div的padding，蓝色部分是div的内容区域。那么此时，div相对定位，p绝对定位。
p将无视父亲的padding，在border内侧为参考点，进行定位：
3.4 绝对定位的盒子居中
绝对定位之后，所有标准流的规则，都不适用了。所以margin:0 auto;失效。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 400px;
height: 60px;
background-color: green;
position: absolute;
left: 50%;
margin-left: -200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
|
|
1 width: 600px; 2 height: 60px; position: absolute; 3 left: 50%; 4 top: 0; 5 margin-left: -300px; → 宽度的一半
非常简单，当做公式记忆下来。就是left:50%; margin-left:负的宽度的一半。
四、固定定位
固定定位，就是相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
p{
width: 100px;
height: 100px;
background-color: orange;
position: fixed;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<p></p>
<img src="data:images/2.jpg" alt="" />
</body>
</html>
固定定位脱标！
案例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:;
padding:;
}
body{
/*为什么要写这个？*/
/*不希望我们的页面被nav挡住*/
padding-top: 60px;
/*IE6不兼容固定定位，所以这个padding没有什么用，就去掉就行了*/
_padding-top:;
}
.nav{
position: fixed;
top:;
left:;
width: 100%;
height: 60px;
background-color: #333;
z-index:;
}
.inner_c{
width: 1000px;
height: 60px;
margin: 0 auto;
}
.inner_c ul{
list-style: none;
}
.inner_c ul li{
float: left;
width: 100px;
height: 60px;
text-align: center;
line-height: 60px;
}
.inner_c ul li a{
display: block;
width: 100px;
height: 60px;
color:white;
text-decoration: none;
}
.inner_c ul li a:hover{
background-color: gold;
}
p{
font-size: 30px;
}
.btn{
display: block;
width: 120px;
height: 30px;
background-color: orange;
position: relative;
top: 2px;
left: 1px;
}
</style>
</head>
<body>
<div class="nav">
<div class="inner_c">
<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>
<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="data:images/2.jpg" alt="" />
<p>
<a href="" class="btn">按钮</a>
</p>
<img src="data:images/2.jpg" alt="" />
<img src="data:images/2.jpg" alt="" />
<img src="data:images/2.jpg" alt="" />
<img src="data:images/2.jpg" alt="" />
<img src="data:images/2.jpg" alt="" />
<img src="data:images/2.jpg" alt="" />
<img src="data:images/2.jpg" alt="" />
<img src="data:images/2.jpg" alt="" />
<img src="data:images/2.jpg" alt="" />
<img src="data:images/2.jpg" alt="" />
</body>
</html>
IE6不兼容。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.backtop{
position: fixed;
bottom: 100px;
right: 30px;
width: 60px;
height: 60px;
background-color: gray;
text-align: center;
line-height:30px;
color:white;
text-decoration: none;
}
</style>
</head>
<body>
<a class="backtop">返回<br />顶部</a>
<img src="data:images/2.jpg" alt="" />
<img src="data:images/2.jpg" alt="" />
<img src="data:images/2.jpg" alt="" />
<img src="data:images/2.jpg" alt="" />
</body>
</html>
五、z-index
● z-index值表示谁压着谁。数值大的压盖住数值小的。
● 只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。
● z-index值没有单位，就是一个正整数。默认的z-index值是0。
● 如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了的元素，永远能够压住没有定位的元素。
● 从父现象：父亲怂了，儿子再牛逼也没用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:;
padding:;
}
.box1{
width: 200px;
height: 200px;
background: yellowgreen;
position: absolute;
top: 100px;
left: 100px;
z-index:;
}
.box2{
width: 200px;
height: 200px;
background: skyblue;
position: absolute;
top: 180px;
left: 180px;
z-index:;
}
</style>
</head>
<body>
<div class="box1">绿</div>
<div class="box2">蓝</div>
</body>
</html>
没有单位：
1 z-index: 988;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:;
padding:;
}
.linzhiying{
width: 200px;
height: 200px;
background-color: blue;
position: relative;
z-index:;
}
.tianliang{
width: 200px;
height: 200px;
background-color: orange;
position: relative;
z-index:;
}
.kimi{
width: 60px;
height: 60px;
background-color: green;
position: absolute;
top: 300px;
left: 450px;
z-index:;
}
.cindy{
width: 60px;
height: 60px;
background-color: pink;
position: absolute;
top: 130px;
left: 490px;
z-index:;
}
</style>
</head>
<body>
<div class="linzhiying">
<p class="kimi"></p>
</div>
<div class="tianliang">
<p class="cindy"></p>
</div>
</body>
</html>
前端技术之_CSS详解第六天--完结的更多相关文章
- 前端技术之_CSS详解第一天
前端技术之_CSS详解第一天 一html部分 略.... 二.列表 列表有3种 2.1 无序列表 无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的. ul就是英语unorde ...
- 前端技术之_CSS详解第二天
前端技术之_CSS详解第二天 1.css基础选择器 html负责结构,css负责样式,js负责行为. css写在head标签里面,容器style标签. 先写选择器,然后写大括号,大括号里面是样式. & ...
- 前端技术之_CSS详解第三天
前端技术之_CSS详解第三天 二.权重问题深入 2.1 同一个标签,携带了多个类名,有冲突: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- 前端技术之_CSS详解第四天
前端技术之_CSS详解第四天 一.第三天的小总结 盒模型box model,什么是盒子? 所有的标签都是盒子.无论是div.span.a都是盒子.图片.表单元素一律看做文本. 盒模型有哪些组成: wi ...
- 前端技术之_CSS详解第五天
前端技术之_CSS详解第五天 一.行高和字号 1.1 行高 CSS中,所有的行,都有行高.盒模型的padding,绝对不是直接作用在文字上的,而是作用在“行”上的. <!DOCTYPE html ...
- Cisco路由技术基础知识详解
第一部分 请写出568A的线序(接触网络第一天就应该会的,只要你掐过,想都能想出来) .网卡MAC地址长度是( )个二进制位(16进制与2进制的换算关系,只是换种方式问,不用你拿笔去算) A.12 ...
- Spark技术内幕: Shuffle详解（一）
通过上面一系列文章,我们知道在集群启动时,在Standalone模式下,Worker会向Master注册,使得Master可以感知进而管理整个集群:Master通过借助ZK,可以简单的实现HA:而应用 ...
- 软件架构设计学习总结（3）：QQ空间技术架构之详解
QQ空间作为腾讯海量互联网服务产品,经过近七年的发展,实现了从十万级到亿级同时在线的飞跃.在这个过程中,QQ空间团队遇到了哪些技术挑战?其站点前后台架构随着业务规模的变化又进行了怎样的演进与变迁?成长 ...
- AngularJS + CoffeeScript 前端开发环境配置详解
AngularJS 号称 '第一框架' ('The first framework') 确实是名不虚传.由其从jQuery中完全转入AngularJS后就有无法离开他的感觉了.虽然AngularJS的 ...
随机推荐
- 【Unity Shaders】游戏性和画面特效——创建一个老电影式的画面特效
本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...
- Install and run DB Query Analyzer 6.04 on Microsoft Windows 10
Install and run DB Query Analyzer 6.04 on Microsoft Windows 10 DB Query Analyzer is presented ...
- Java数组与函数的结合
import java.util.Scanner; public class HelloWorld { public static void main(String[] args){ // Scann ...
- 【翻译】Ext JS 5：为不同设备设置不同的主题
原文:Sencha Ext JS 5: Supporting Different Themes for Different Devices 步骤1创建一个应用程序 步骤2定义主题 步骤3编辑Appjs ...
- C++ Primer 有感（面向对象编程）
1.除了构造函数之外,任意非static成员函数都可以是虚函数.保留字virtual只在类内部的成员函数声明处出现,不能用在类定义体外部出现的函数定义上. 2.派生类只能通过派生类对象访问其基类的pr ...
- Touch Handling in Cocos2D 3.x(四)
创建触摸生命周期 让我们改善我们的应用程序.如果玩家可以触摸屏幕并且拖放英雄到指定位置不是更好吗? 为了完成这个功能我们必须使用Cocos2d 3.0提供的所有的触摸事件: touchBegan:在用 ...
- Tomcat如何实现资源安全管理
在了解了认证模式及Realm域后,我们看看Tomcat是如何设计实现资源安全管理的.在认证模式上,必须要支持多种认证模式,包括Basic模式.Digest模式.Form模式.Spnego模式.SSL模 ...
- 如何在Git中撤销一切 | 干货
翻译:李伟 审校:张帆 译自:Github JF杰微刊:如何在Git中撤销一切 任何一个版本控制系统中,最有用的特性之一莫过于 "撤销(undo)"操作.在Git中,"撤 ...
- javascript语法之String对象
学习String类就是学习它的一些方法,主要用到方法全部罗列出来.如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
- 2. MariaDB激活二进制日志
翻译人员: 铁锚 翻译时间: 2013年12月25日 原文地址: Activating the Binary Log 参考了: <高可用MySQL 构建健壮的数据中心> 要启用二进制日志功 ...