首页 > 代码库 > css_02

css_02

2024-08-19 08:47:49   224人阅读

<!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


联系
我们