首页 > 代码库 > css_02

css_02

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*<!--body{-->
<!--margin: 0;-->
<!--}-->
<!--.div1{-->
<!---->
<!--width: 100px;-->
<!--height: 100px;-->
<!--}-->
<!--.div2{-->
<!---->
<!--!*position: relative;*!-->
<!--position: absolute;-->
<!--top: 100px;-->
<!--left: 100px;-->
<!--width: 100px;-->
<!--height: 100px;-->
<!--}-->
<!--.div3{-->
<!---->
<!--width: 200px;-->
<!--height: 200px;-->
<!--}-->
<!--.box2{-->
<!--border: solid 3px red;-->*/
<!--/*position: relative;*/-->

<!--}-->
/*.outer{*/
/**/
/*}*/
/*.menu1{*/
/*width: 100px;*/
/*!*height: 50px;*!*/
/*color: red;*/
/*float: left;*/
/*}*/
/*.menu2{*/
/*width: 100px;*/
/*!*height: 50px;*!*/
/*color: red;*/
/*float: left;*/
/*}*/
/*.menu3{*/
/*clear: both;*/
/*}*/
/*.bottom{*/
/*text-align: center;*/
/**/
/*clear: both;*/
/*}*/
/*.div1{*/
/*height: 1000px;*/
/*width: 100%;*/
/**/
/*!*display: none;*!*/
/*}*/
/*.a1{*/

/*position: fixed;absolute;*/
/*bottom: 20px;*/
/*right: 20px;*/
/*}*/
/*</style>*/
</head>
<body>
<!--正常文档流:将元素在进行排版布局的时候按照从上到下,从左至右的顺序排版的布局规格-->
<!--脱离文档流:将元素从正常文档流中取出后进行覆盖
脱离文档流:
float:浮动(非完全脱离)
position:
fixed:固定在窗口的某个位置,脱离正常文档流
absolute:完全脱离文档流,原来的位置被覆盖,如果父级是非static模式,则按照父级的位置移动
static(默认): 无特殊定位,对象遵循正常文档流
relative:非完全脱离,遵循正常文档流,依然占据原来的文档流位置,参照父级的位置移动,无父级则参照原来的位置移动
一个元素若设置了position: absolute|fixed;则该元素不能设置float,这是一个基本常识,因为这是两个不同的文档流,
一个是浮动流,另一个是定位流,但是relative却可以设置为float,因为relative遵循正常文档流,原来的空间依然占据文档流。
-->
<!--<div class="div1"></div>-->
<!--<div class="box2">-->
<!--<div class="div2">bb</div>-->
<!--</div>-->
<!--<div class="div3">aa</div>-->
<!--<div class="outer">-->
<!--<div class="menu1">菜单一</div>-->
<!--<div class="menu2">菜单二</div>-->
<!--<div class="menu3"></div>-->
<!--</div>-->
<!--<div class="bottom">bottom</div>-->
<!--<div class="div1"></div>-->
<!--<a class="a1">返回顶部</a>-->
</body>
</html>

css_02