HTML定位

最新推荐文章于 2024-01-19 09:17:59 发布

Mr_White01

最新推荐文章于 2024-01-19 09:17:59 发布

阅读量746

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/Mr_White01/article/details/72859945

版权

html5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.float浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
            <style type="text/css">
                div{
                    width: 680px;
                    border: 5px solid;
                    height: 312.5px;


                }
                img{
                    width: 500px;
                    float: left;
                }
                /*标签使用float之后，会脱离文档流，父级的高度将于标签没有任何关系*/
    </head>
    </style>
    <body>
    <div>
     <img src="img/506b9e2a013b8dce6465d4d904cbe2ec.jpg"/>
     <p>你无法抵挡大自然的力量,我的魔法会把你撕成碎片,我要粉碎你,你今天不会取得胜利的
     当心你的身后,圣光会制裁你,你的灵魂将受到折磨,元素之力会毁灭你</p>

    </div>

    </body>
</html>

2.清除浮动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
            <style type="text/css">
                .div1{
                    width: 680px;
                    border: 5px solid;
                    background-color: violet;
                    /*height: 312.5px;*/


                }
                img{
                    width: 500px;
                    float: left;
                }
    </head>
    </style>
    <body>

    <!--<div style="min-height: 312.5px;">-->
        <!--第一种为父级设置高度,要精确地知道父级应该设置的高度值,但是容易理解-->

        <!--第二种方式是在父级结束之前添加一个空标签，设计clear：both属性，如果一个页面有很多
        的浮动，就要写好多的空标签，就要写好多的clear：both空标签来清除-->
        <!--<div class="div1">
        <img src="img/201412010941115182.jpg" />-->
     <!--<img src="img/506b9e2a013b8dce6465d4d904cbe2ec.jpg"/>-->
     <!--<p style="color: blue;">你无法抵挡大自然的力量,我的魔法会把你撕成碎片,我要粉碎你,你今天不会取得胜利的
     当心你的身后,圣光会制裁你,你的灵魂将受到折磨,元素之力会毁灭你!</p>
        <div  style="clear:both"></div> -->
        <!--第三种清除浮动，为父级添加overflow：hidden属性，为父级能够获取到具有浮动属性标签
            地高度，缺点是如果使用overflow：hidden属性，则不能和定位一起使用。
        -->
        <div class="div1" style="overflow: hidden;">
        <img src="img/201412010941115182.jpg" />
     <!--<img src="img/506b9e2a013b8dce6465d4d904cbe2ec.jpg"/>-->
     <p style="color: blue;">你无法抵挡大自然的力量,我的魔法会把你撕成碎片,我要粉碎你,你今天不会取得胜利的
     当心你的身后,圣光会制裁你,你的灵魂将受到折磨,元素之力会毁灭你!</p>

    </div>

    </body>
</html>

3.overflow和position的问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    <style type="text/css">
        .div1{
            width: 420px;
            border: 3px solid;
            overflow: hidden;
        }
        p{
            position: relative;
            left: 30px;
        }
    </style>
    </head>
    <body>
        <div class="div1">
            <p>
                你无法抵挡大自然的力量,我的魔法会把你撕成碎片,我要粉碎你,你今天不会取得胜利的
     当心你的身后,圣光会制裁你,你的灵魂将受到折磨,元素之力会毁灭你!
            </p>
        </div>
    </body>
</html>

4.position和relative相对定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div1{
                height: 500px;
                width: 500px;
                border: dotted;
                margin-left: 100px;
            }
            .div2{
                height: 200px;
                width: 200px;
            background: red;

            position: relative;
            /*相对定位*/
            left: 30px;
            /*可以写负数，位置不受限定*/
            top: 50px;
            }
            /*相对定位定位，是和标签/元素自身的原始位置做比较的，想多定位，相对的是自己本事*/
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2">


        </div>
    </body>
</html>

5position和absolute绝对定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div1{
                height: 500px;
                width: 500px;
                border: 3px solid;
                margin-left: 150px;
                position: relative;

            }
            /*绝对定位：他的位置是根据有定位的父级元素所决定的，如果父级没有定位，
             那么根据body来定位*/
            .div2{
                height: 200px;
                width: 200px;
                background: red;
                position: absolute;
                top: 100px;
                left: 100px;

            }
        </style>
    </head>
    <body>
        <div class="div1">
            <div class="div2">
        </div>
    </body>
</html>

6.position和fixed固定定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                height: 50px;
                width: 1000px;
                background: red;
                position: fixed;
                left: 50px;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    <script type="text/javascript">
        for (var i=0;i<100;i++) {
            document.write(i+"<br>");

        }
    </script>
</html>

具体代码实现效果，请用火狐浏览器打开.

Mr_White01

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML定位

1.float浮动<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 680px;
复制链接

扫一扫

专栏目录