CSS魔法（三）浮动、相对定位、绝对定位

最新推荐文章于 2022-11-17 20:58:06 发布
最新推荐文章于 2022-11-17 20:58:06 发布
阅读量137 收藏
点赞数
原文链接：http://www.cnblogs.com/cnki/p/9756439.html
版权

浮动

为何需要浮动？

　　浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。

浮动问题？

为何要清除浮动？

　　很多情况下父盒子不方便给高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        border: 1px solid red;
        width: 300px;
    }
    .big {
        width: 100px;
        height: 100px;
        background-color: purple;
        float: left;
    }
    .small {
        width: 80px;
        height: 80px;
        background-color: blue;
        float: left;
    }
    .footer {
        width: 400px;
        height: 100px;
        background-color: pink;
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="big"></div>
        <div class="small"></div>
    </div>
    <div class="footer"></div>
</body>
</html>
View Code

清除浮动

　　清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        border: 1px solid red;
        width: 300px;

    }
    .big {
        width: 100px;
        height: 200px;
        background-color: purple;
        float: left;
    }
    .small {
        width: 80px;
        height: 80px;
        background-color: blue;
        float: left;
    }
    .footer {
        width: 400px;
        height: 100px;
        background-color: pink;
    }
    .clear {
        clear: both;
        /*如果清除了浮动， 父亲去自动检测孩子的高度  以最高的为准*/
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="big"></div>
        <div class="small"></div>
        <div class="clear"></div>  <!-- 最后一个浮动标签的后，新添加一个标签 清除浮动 -->
    </div>
    <div class="footer"></div>
</body>
</html>
View Code

　　额外标签法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        border: 1px solid red;
        width: 300px;

    }
    .big {
        width: 100px;
        height: 200px;
        background-color: purple;
        float: left;
    }
    .small {
        width: 80px;
        height: 80px;
        background-color: blue;
        float: left;
    }
    .footer {
        width: 400px;
        height: 100px;
        background-color: pink;
    }
    .clear {
        clear: both;
        /*如果清除了浮动， 父亲去自动检测孩子的高度  以最高的为准*/
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="big"></div>
        <div class="small"></div>
        <div class="clear"></div>  <!-- 最后一个浮动标签的后，新添加一个标签 清除浮动 -->
    </div>
    <div class="footer"></div>
</body>
</html>
View Code

　　overflow 清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .big {
        width: 100px;
        height: 100px;
        background-color: purple;
        float: left;
    }
    .small {
        width: 80px;
        height: 180px;
        background-color: blue;
        float: left;
    }
    .footer {
        width: 400px;
        height: 100px;
        background-color: pink;
    }
    .father {
        border: 1px solid red;
        width: 300px;
        overflow: hidden;   /*别加错位置了，给 父亲加*/
        /*不是所有的浮动我们都需要清除 ，谁影响布局，我们清除谁*/
    }
    </style>
</head>
<body>
    <div class="father"> 
        <div class="big"></div>
        <div class="small"></div>
    </div>
    <div class="footer"></div>
</body>
</html>
View Code

 　　使用after伪元素清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        border: 1px solid red;
        width: 300px;

    }
    .big {
        width: 100px;
        height: 100px;
        background-color: purple;
        float: left;
    }
    .small {
        width: 80px;
        height: 80px;
        background-color: blue;
        float: left;
    }
    .footer {
        width: 400px;
        height: 100px;
        background-color: pink;
    }
    .clearfix:after {  /*正常浏览器 清除浮动*/
        content:"";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix {
        *zoom: 1;  /*zoom 1 就是ie6 清除浮动方式  *  ie7一下的版本所识别*/
    }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="big"></div>
        <div class="small"></div>
    </div>
    <div class="footer"></div>
</body>
</html>
View Code

　　使用before和after双伪元素清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .clearfix:before, .clearfix:after {
        content: "";
        display: table;
    }
    .clearfix:after {
        clear: both;
    }

    .clearfix {
        *zoom: 1;
    }
    .father {
        border: 1px solid red;
        width: 300px;

    }
    .big {
        width: 100px;
        height: 100px;
        background-color: purple;
        float: left;
    }
    .small {
        width: 80px;
        height: 80px;
        background-color: blue;
        float: left;
    }
    .footer {
        width: 400px;
        height: 100px;
        background-color: pink;
    }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="big"></div>
        <div class="small"></div>
    </div>
    <div class="footer"></div>
</body>
</html>
View Code

 <ul><li>布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .service-bd {
            margin-top: 40px;
        }
        .service-bd li {
                width: 200px;
                height: 200px;
                background-color: #ffd800;
                float: left;
                border: 1px solid #e7e8e9;
            }
       .yingxiao {
            margin: 0 45px;
        }
    </style>
</head>
<body>
    <div class="service-bd">
        <ul>
            <li></li>
            <li class="yingxiao"></li>
            <li></li>
        </ul>
    </div>
</body>
</html>
View Code

　　取消li 的小点

li {
    list-style: none; /*  取消li 的小点 */
}

 相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .top {
            position: relative;/*相对定位*/
            top: 100px;
            left: 100px;
        }
        .bottom {
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="bottom"></div>
</body>
</html>
View Code

　　相对定位和浮动的区别：相对定位后原来的位置还继续保留，浮动后原来的位置不继续保留。

　　定位使用：top、bottom、left、right  切不可混用margin-top　

绝对定位

position: absolute; 

1.绝不占位置，跟浮动一样。

2.绝对定位是将元素依据最近的已经定位的父元素（祖先）进行定位。

父亲没定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .father {
        width: 500px;
        height: 500px;
        background-color: pink;
        margin: 100px;
    }
    .son {
        width: 200px;
        height: 200px;
        background-color: purple;
        position: absolute;
        top: 50px;
        left: 50px;
        /*若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。*/
    }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>
View Code

父亲有定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .yeye {
        width: 800px;
        height: 800px;
        background-color: skyblue;
        position: absolute;
    }
    .father {
        width: 500px;
        height: 500px;
        background-color: pink;
        margin: 100px;
        /*position: absolute;*/
    }
    .son {
        width: 200px;
        height: 200px;
        background-color: purple;
        position: absolute;
        top: 50px;
        left: 50px;
        /*若所有父元素都没有定位，以浏览器当前屏幕为准对齐(document文档)。*/
    }
    </style>
</head>
<body>
<div class="yeye">
    <div class="father">
        <div class="son"></div>
    </div>
</div>
    
</body>
</html>
View Code

子绝对定位父相对定位

　　给儿子绝对定位：不占有原来的位置，才能压住别人

　　给父亲相对定位：占有原来的位置

　　子绝父绝带来的问题：由于绝对定位不占用位置，当给父亲绝对定位时，下面的div元素会占用父亲的位置。

　　子绝父相是最合适的搭配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 310px;
        height: 190px;
        border: 1px solid #ccc;
        margin: 100px auto;
        padding: 10px;
        position: relative;
    }
    .top {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .bottom {
        position: absolute;
        right: 0;
        bottom: 0;
    }
    
    </style>
</head>
<body>
    <div>
        <img src="images/top_tu.gif" alt="" class="top">
        <img src="images/br.gif" alt="" class="bottom">
        <img src="images/adv.jpg" height="190" width="310" alt="">
    </div>
</body>
</html>
View Code

定位和浮动

加了定位 浮动的的盒子 margin 0 auto 失效了

/*margin: 100px auto;*/
/*float: left;*/
position: absolute;
/*加了定位 浮动的的盒子  margin 0 auto 失效了*/

加了定位的盒子居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        /*margin: 100px auto;*/
        /*float: left;*/
        position: absolute;
        /*加了定位 浮动的的盒子  margin 0 auto 失效了*/
        left: 50%;
        margin-left: -100px;
        top: 50%;
        margin-top: -100px;
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
View Code

 实战练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
            /*  取消li 的小点 */
        }

        .father {
            width: 1259px;
            height: 472px;
            margin: 100px auto;
            background-color: red;
            position: relative;
        }

        .son {
            width: 960px;
            height: 80px;
            background-color: #000;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -480px;
        }

        .son li {
            float: left;
            width: 160px;
            height: 80px;
        }

        .son li a {
            width: 160px;
            height: 80px;
            display: block;
            text-align: center;
            line-height: 80px;
            color: #fff;
            text-decoration: none;
        }

        .son li a:hover {
            background-color: #fff;
            color: #000;
        }
    </style>
    <body>
        <div class="father">
            <div class="son">
                <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>
                </ul>
            </div>
        </div>
    </body>
</html>
View Code

 CSS的margin: 7px auto 含义是什么？

　　顺序为：上、右、下、左；（顺时针）

淘宝轮播图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .tb {
            width: 520px;
            height: 280px;
            background-color: pink;
            margin: 100px auto;/* 顺序为：上、右、下、左；*/
            position: relative;/* 父相对定位*/
        }
        .tb a {
            width: 24px;
            height: 36px;
            display: block;
            position: absolute;/* 子绝对定位*/
            top: 50%;
            margin-top: -18px;
        }
        .left {
            left: 0;
            background: url(images/left.png) no-repeat;
        }
        .right {
            right: 0;
            background: url(images/right.png) no-repeat;
        }
        .tb ul {
            width: 70px;
            height: 13px;
            background: rgba(255, 255, 255, .3);
            position: absolute; /* 子绝对定位*/
            bottom: 18px;
            left: 50%; /*水平走父容器的一半*/
            margin-left: -35px; /*左走自己的一半*/
            border-radius: 8px;
        }
        .tb ul li {
            width: 8px;
            height: 8px;
            background-color: #fff;
            float: left;
            margin: 3px;
            border-radius: 50%;
        }
        .tb .current {
            background-color: #f40;
        }
        </style>
    </head>
    <body>
        <div class="tb">
            <img src="images/tb.jpg" >
            <a href="#" class="left"></a>
            <a href="#" class="right"></a>
            <ul>
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </body>
</html>
View Code

 固定定位

.ad {
        width: 200px;
        height: 200px;
        background-color: pink;
        position: fixed;  /*固定定位*/
        left: 0;
        top: 100px;
    }
View Code

 z-index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        /*z-index: 0;  只有定位的盒子才有*/
    }
    .red {
        z-index: 1;
    }
    .blue {
        background-color: blue;
        left: 50px;
        top: 50px;
        z-index: 2;
    }
    .green {
        background-color: green;
        left: 100px;
        top: 100px;
        z-index: 999;
    }
    </style>
</head>
<body>
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
</body>
</html>
View Code 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    div {
        width: 250px;
        height: 400px;
        border: 1px solid #ccc;
        float: left;
        margin-left: -1px;
        position: relative;
        /*z-index: 0;*/
    }
    div:hover {
        border: 1px solid #f40;
        /*position: relative; 相对定位比标准流高一级 浮在上面的*/
        z-index: 1;
    }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>
View Code

 小结

 

转载于:https://www.cnblogs.com/cnki/p/9756439.html

weixin_30466953
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS中的定位：相对定位、绝对定位、浮动
weixin_47844457的博客
05-12 887
定位：允许编程时定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置； 三种基本的定位机制 普通流； 除非专门指定，否则所有框都在普通流中定位； 浮动； 绝对定位； 绝对定位 position属性 属性值的含义： static 默认值； 元素框正常生成：元素出现在正常的流中，忽略top、bottom、left、right或者z-index声明； relative（相对定位） 元素框相对于其正常出现位置偏移某个距离； 元素仍保持其未定位前的形状，它
CSS浮动七：相对定位和浮动的结合使用 （并不是说这二者结合就一定更好；看需求）
小枯林的博客
12-26 1707
浮动：可以脱离文档流，浮动起来，而且文档中的其他内容不会忽略浮动的位置，会绕开； 相对定位：可以设定上下左右四个边距（设了上边距，就不需要设下边距了；左右边距同理，设置一个即可）；即定位可以设定坐标！ 可以发现，这俩简直是完美组合！！！ 目录 1.不采取定位 2.只使用相对定位 3.只使用绝对定位： 4.当相对定位和浮动结合在一起使用时候（重点） 1.不采取定位 <!DOCTYPE html> <html> <head> <title>相.
下拉导航中绝对定位与相对定位问题
weixin_30432579的博客
04-24 375
1、下拉导航中绝对定位与相对定位问题 <ul class="1"> <li> <ul class="2"> <li></li> </ul> </li> </ul> 将1级中的li设为相对定位，将2级中的li设为绝对定位，这样然后调整top和left的距离。 不要设整个导航块...
绝对定位 相对定位 浮动
riledog的博客
07-25 1999
CSS 定位机制 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。 块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。 行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行
浮动定位、相对定位、绝对定位、固定定位
Future_fq的博客
11-17 703
css浮动定位、相对定位
css 相对定位 绝对定位 浮动 分析
09-25
W3School 站点上的所有页面都采用了这种技术，如果您打开我们使用 CSS 文件，您会看到我们对页脚的 div 进行了清理，而页脚上面的三个 div 都向左浮动。
CSS中关于绝对定位和相对定位
01-08
body {margin: 30px; font-size:9pt;} .a, .b, .c, .d, .e {  width: 100px;  height: 100px;  margin: 5 auto;  color: #fff;  background: #000; } .aa, .bb, .cc, .dd, .ee {  top: 10px;...{positi
CSS基础学习之定位—流定位 浮动定位 相对定位 绝对定位 固定定位 粘性定位
01-08
CSS基础声明定位定位简介流定位浮动定位相对定位绝对定位固定定位粘性定位堆叠顺序定位属性总结 定位 定位简介 定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的...
CSS网页布局教程:绝对定位和相对定位
12-07
通过本文你绝对能理解绝对定位和相对定位了，如果你看完本篇文章还不理解绝对定位和相对定位的话，我看你就别学CSS了！哈哈！ 概要： 本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系...
CSS——浮动与定位
weixin_44749830的博客
06-04 184
盒子模型 用于布局 要素： 内容区（content）:由盒子的宽高决定 内边距（padding）：指内容区与边框的距离 边框（border）：盒子边框的长度、样式、颜色 以上三要素会改变盒子的大小 外边距（margin）：盒子边框以外都叫外边距 外边距规定了盒子位置 ...
css-position 四种定位与元素浮动
热门推荐
rememberyf的博客
05-28 1万+
在介绍定位之前，我们有必要了解一下文档流 1、文档流与脱离文档流 文档流是相对于盒子模型来讲解的，正常的文档流就是标签所处的一个空间，脱离文档流就是标签所处的另一个空间（正常空间之上的空间），一般来说，所有的页面操作都是基于这两个空间上完成的。并且脱离文档流空间的元素位置是不固定的，也没有块级和行级属性。 举个例子：当元素浮动时，会使其跳出文档流，也就是说后面的元素会无视先前它所占有的位置...
CSS position 属性：绝对定位与相对定位，以及浮动
xiaozaq的博客
01-17 7107
可能的值：absolute，fixed，relative，static，static，inherit。 值 描述 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed
解析什么是绝对定位，相对定位与浮动
weixin_34174422的博客
10-13 263
在理解定位之前，先说一个概念，文档普通流，就是元素标签正常在HTML里的顺序，块级元素从上至下排列，行内元素从左到右排列。 绝对定位 绝对定位：absolute，元素相对于离它最近的已定位祖先元素进行移动，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（一般是HTML元素，也可能是画布，这是由用户的代理决定的）。注意，绝对定位使元素原先在正常文档流中所占的空间会关闭，就好像该元素...
CSS 布局1（绝对定位、相对定位、浮动）
litengbin的博客
01-15 3606
CSS 如何进行绝对定位详解 绝对定位  属性：position  值： absolute  通过指定left,top绝对定位一个元素 1.绝对定位 属性：position  值： absolute  设置了绝对定位的元素，相当于该元素被从原文档中删除了  所以”正常文字4“会紧接着出现在 ”正常文字2“后面，而不会留下空档 p.abs{ position: ab
html浮动和相对定位,浮动与相对定位、绝对定位的区别
weixin_42629522的博客
06-07 725
浮动与相对定位、绝对定位的区别最近学校的HTML课程在讲浮动和定位。为了搞清楚这些样式的区别，也是查了不少资料在这里来谈谈我对浮动与相对定位、绝对定位的理解一、浮动浮动的使用场景： 一般是将竖起来的多个div进行横向的排列浮动的负面作用： 因为添加了浮动就脱离了标准文档流，有可能导致父元素无法被撑开示例如下：在一个div中定义2个div并设置为float：leftrTitle.box{width:...
滚动和div标签位置和li标签的相对定位，并进行重叠
平平爱学习的博客
06-21 1524
这里是滚动的文字                                                                                                                                                                                      
定位分类：普通流定位、浮动定位、相对定位、绝对定位、固定定位
qq_43102118的博客
05-15 933
普通流定位、浮动定位、相对定位、绝对定位、固定定位 普通流定位 每个元素在页面上都有自己的空间 每个元素都是从父元素的左上角开始渲染 块级元素独占一行，从上往下排列 行内元素和行内块元素共用一行，从左往右排列 浮动定位(float)：脱离文档流 作用：让块级元素横向显示 float有三个属性值none、left、right分别代表不浮动、左浮动、右浮动 清除浮动元素带来的效果：一个元素设置了clear就不会受元素浮动的影响，clear有三个属性值left、right、both分别代表清除左浮动元素的影响
ConstraintLayout约束布局的一些知识点（相对定位、角度定位、Barrier、Guideline和Group）
Deaful的专栏
05-13 3265
1、相对定位 值得一说的有两点： a. layout_constraintBaseline_toBaselineOf，Baseline指的是文本基线，效果图如下： 虽然两个TextView高度不同，字体大小不同，但是文本是对齐的。 b.layout_constraintLeft_toLeftOf与layout_constraintRight_toRightOf匹配，layout_constraintStart_toStartOf与layout_constraintEnd_toEndOf匹配，否则
css绝对定位和相对定位
最新发布
08-29
### 回答1： ...综上所述，CSS绝对定位和相对定位都是布局技术，使用不同的定位原点来实现元素的定位，相对定位相对于元素原来的位置进行定位，而绝对定位则相对于最近的非静态定位的祖先元素进行定位。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值