模块回顾
1.position定位
2.元素转化
一、定位
css中用postion定位一般有4中，
（1）固定定位（fixed）
（2）相对定位(relative)
（3）绝对定位(absolute)
（4）静态定位(static)
1.fixed：固定元素框不随页面的滚动而滚动，固定在一个地方不会变动。例如：
1 <div id="dog1"> 2 <div id="dog2"><a href="#"><img src="360-dog.png" alt="" id="l1"></a></div> 3 <div id="dog3"> 4 <div ><img src="360-star.png" alt="" class="l2"></div> 5 <div id="dog5"><a href="#" class="o1">娱乐</a></div> 6 </div> 7 <div id="dog6"> 8 <div ><img src="360-play.png" alt="" class="l2"></div> 9 <div id="dog8"><a href="#" class="o1">看片</a></div> 10 </div> 11 <div id="dog9"> 12 <div ><img src="360-shopping.png" alt="" class="l2"></div> 13 <div id="dog11"><a href="#" class="o1">购物</a></div> 14 </div> 15 <div id="dog12"> 16 <div ><img src="360-game.png" alt="" class="l2"></div> 17 <div id="dog14"><a href="#" class="o1">游戏</a></div> 18 </div> 19 <div id="dog15"> 20 <div id="dog16"><img src="360-coffee.png" alt="" class="l2"></div> 21 <div id="dog17"><a href="#" class="o1">生活</a></div> 22 </div> 23 <div id="dog18"> 24 <div id="dog19"><img src="360-money.png" alt="" class="l2"></div> 25 <div id="dog20"><a href="#" class="o1">借钱</a></div> 26 </div> 27 <div id="dog21"> 28 <a href="#" id="dog22">星座运势</a> 29 </div>
#dog1{ border: 0px black solid; height: 350px; width: 75px; position: absolute; right: 30px; top: 57px; position: fixed; } #dog2{ border: 0px black solid; } #l1{ width: 74px; height: 80px } #dog3{ border: 0px black solid; height: 30px; width: 70px; position: absolute; top: 85px; left: 2px; background-color: #f7f7f7; } .l2{ height: 30px; width: 30px; } .o1{ text-decoration: none; color: gray; font-size: 14px; } #dog4{ border: 0px black solid; position: absolute; left: 2px; bottom: 0px; } #dog5{ border: 0px black solid; height: 30px; position: absolute; left: 30px; top: 4px; } #dog6{ border: 0px black solid; height: 30px; width: 70px; position: absolute; top: 120px; left: 2px; background-color: #f7f7f7; } #dog9{ border: 0px black solid; height: 30px; width: 70px; position: absolute; top: 155px; left: 2px; background-color: #f7f7f7; } #dog12{ border: 0px black solid; height: 30px; width: 70px; position: absolute; top: 190px; left: 2px; background-color: #f7f7f7; } #dog7{ border: 0px black solid; position: absolute; left: 2px; bottom: 0px; } #dog10{ border: 0px black solid; position: absolute; left: 2px; bottom: 0px; } #dog13{ border: 0px black solid; position: absolute; left: 2px; bottom: 0px; } #dog8{ border: 0px black solid; height: 30px; position: absolute; left: 30px; top: 3px; } #dog11{ border: 0px black solid; height: 30px; position: absolute; left: 30px; top: 3px; } #dog14{ border: 0px black solid; height: 30px; position: absolute; left: 30px; top: 3px; } #dog15{ border: 0px black solid; height: 30px; width: 70px; position: absolute; top: 225px; left: 2px; background-color: #f7f7f7; } #dog18{ border: 0px black solid; height: 30px; position: absolute; top: 260px; width: 70px; left: 2px; background-color: #f7f7f7; } #dog17{ border: 0px black solid; height: 30px; position: absolute; left: 30px; top: 3px; } #dog20{ border: 0px black solid; height: 30px; position: absolute; left: 30px; top: 3px; } #dog21{ border: 0px black solid; height: 30px; position: absolute; top: 295px; width: 70px; left: 2px; background-color: #f7f7f7; } #dog22{ color: orangered; font-size:14px ; text-decoration: none; position: absolute; margin: 6px } .o1:hover{ color: yellowgreen; } .o1:visited{ color: gray; }
2.相对定位：相对于自身未设置相对定位前的位置进行移动，引用chensiqi的一句话是“老家留坑，形影分离”，一般就是给绝对定位当参考，子承父。
div1{ width: 300px; height: 300px; background-color: red; position: relative; left：10px； bottom：5px； }
3.绝对定位：
绝对定位的盒子是相对于离它最近的一个已定位的盒子进行定位的（默认是body）；注意css描述的绝对定位概念，没有说明是离他最近的一个已相对定位的盒子进行定位的，所以离他最近的盒子的定位可以是相对定位（relative）和绝对定位（absolute）的，但是在开发中，一般是父盒子设置相对定位的，但是不代表只能是相对定位。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link rel="stylesheet" href="D7CSSTest03.css"> </head> <body> <div id="d1"> </div> </body> </html>
#div1{ position:absolute; left:30px; right:30px; top:50px; }
二、元素转化
常用的块状元素有：<div>,<p>,<h1>~<h6>,<ol>,<ul>,<dl>,<table>,<form>,<address>,<blockquote>
常用的行内元素有：<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<img>,<input>,<q>,<var>,<cite>,<code>
1.行内元素
行内元素最常使用的就是span，其他的只在特定功能下使用，修饰字体<b>和<i>标签，还有<sub>和<sup>这两个标签可以直接做出平方的效果，而不需要类似移动属性的帮助，很实用。行内元素特征：(1)设置宽高无效(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间(3)不会自动进行换行。
display：inline
2.块状元素
块状元素代表性的就是div，其他如p、nav、aside、header、footer、section、article、ul-li、address等等，都可以用div来实现。不过为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于查错。块状元素特征：(1)能够识别宽高(2)margin和padding的上下左右均对其有效(3)可以自动换行(4)多个块状元素标签写在一起，默认排列方式为从上至下。
display：block
3.行内块状元素
行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。
行内块状元素特征：(1)不自动换行(2)能够识别宽高(3)默认排列方式为从左到右。displa：inline-block
4.转化
块级元素默认display:block;行内非替换元素(a,span)默认为display:inline;；行内替换元素(input)默认为display:inline-block;
display:none;不显示该元素，也不会保留该元素原先占有的文档流位置。
display:block;转换为块级元素。
display:inline;转换为行内元素。
display:inline-block;转换为行内块级元素。
通过display:block;与display:inline;可以很容易的实现两类元素变现形式之间的转换。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link rel="stylesheet" href="D7CSSTest04.css"> </head> <body> <div id="d1"> <div id="d2"></div> <div id="d3"></div> </div> <div id="d4">原来你是我最想留住的幸运</div> <div id="d5">原来我们和爱情曾经靠的那么近</div> <p>我听见<span id="s1">远方</span>下课钟声响起</p> </body> </html>
/* CSS Document */ #d1{ width: 300px; height: 300px; background-color: red; position: relative; } #d2{ width: 50px; height: 50px; background-color: blue; position: absolute; right: 50px; top: 50px; z-index: 2; /* 绝对定位，根据上一级父元素谁有position属性，就根据谁定位，最大也就找到body，根据body定位*/ } #d3{ width: 50px; height: 50px; background-color: yellow; position: absolute; right: 40px; top: 40px; z-index: 3 } #d4{ width: 200px; height: 200px; background-color: yellowgreen; border: 1px solid black; display:inline; /* 块状转内联元素*/ } #d5{ width: 200px; height: 200px; background-color: yellowgreen; border: 1px solid black; } #s1{ color: red; width: 100px; height: 100px; margin: 10px; background-color: blue; display: block; /* 内联转块状元素*/ }