前端自学——浮动与定位

最新推荐文章于 2024-05-28 17:33:16 发布

三七有星辰

最新推荐文章于 2024-05-28 17:33:16 发布

阅读量153

点赞数

分类专栏： # 前端文章标签： html css 定位 html5

本文链接：https://blog.csdn.net/zztjl/article/details/113774883

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

浮动的基本概念

浮动最本质功能就是用来实现并排，需要使用float:left;属性；使用要点：

要浮动，并排的盒子都需要设置浮动；
父盒子需要留有足够的宽度，否则子盒子就会掉下去。
浮动的顺序贴靠特性：子盒子会按顺序进行贴靠，若无足够空间，会寻找再前一个兄弟元素；
浮动元素一定可以设置宽高：浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使它是span或者a标签等。

使用浮动实现网页布局

垂直显示的盒子不需要设置浮动，只有并排显示的盒子才要设置浮动；
“大盒子带着小盒子跑”，一个大盒子内部可以继续使用浮动；
尽可能多和恰当的使用盒子。

  <style>
        *{
            margin: 0;
            padding: 0;
        }
        header{
            margin: 0 auto;
            height: 100px;
            width: 1000px;
        }
        .logo{
            float: left;
            width: 250px;
            height: 100px;
            background-color:orange;
        }
        .login{
            float: right;
            width: 300px;
            height: 25px;
            background-color:orange;
        }
        nav{
            float: right;
            width: 600px;
            height: 60px;
            margin-top: 15px;
            background-color: green;
        }
        .content{
            margin: 20px auto;
            height: 500px;
            width: 1000px;
        }
        aside{
            float: left;
            width: 400px;
            height: 500px;
            background-color: rgb(71, 71, 184);
        }
        main{
            float: right;
            width: 580px;
            height: 500px;
        }
        .content .banner{
            height: 400px;
            background-color:orange;
        }
        .content main .pics ul{
            list-style: none;
        }
        .content main .pics ul li{
            float: left;
            width: 120px;
            margin-top: 20px;
            margin-left: 10px;
            height: 80px;
            background-color:blue;
        }
        .content main ul li:last-child{
            width: 160px;
            margin-right: 0;
        }
        footer{
            margin: 0 auto;
            background-color:#333;
            height: 100px;
            width: 1000px;
        }
    </style>
    <body>
    <header>
        <div class="logo"></div>
        <div class="login"></div>
        <nav></nav>
    </header>
    <section class="content">
        <aside></aside>
        <main>
            <div class="banner"></div>
            <div class="pics">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </main>
    </section>
    <footer></footer>
</body>

结果如图：在这里插入图片描述

BFC规范和浏览器差异

BFC（Box Formatting Context,块级格式化上下文）是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
现象解释：当一个盒子没有设置height属性值时，若其内容子元素都浮动，则无法撑起自身，这是因为这个盒子没有形成BFC。
如何创建BFC（四种方法）:

float的值不是none，即盒子左浮动或者右浮动；
position的值不是static或者relative;
display的值是inline-block、flex或者inline-flex；
overflow:hidden;其表示溢出隐藏，溢出盒子边框的内容将会被隐藏（但padding部分的溢出还在），是非常好用的让盒子形成BFC的方法。

BFC的其他作用：取消盒子塌陷；阻止元素被浮动元素覆盖。

浏览器差异：IE6、7浏览器使用haslayout机制，和BFC规范略有差异，比如IE浏览器可以使用zoom:1属性“让盒子拥有layout”，所以制作兼容IE6、7的网页时，要尽量让网页布局变得简单，内部有浮动的盒子要设置height属性，规范编程。

清除浮动

浮动必须封闭到一个盒子当中，否则会对页面的后续元素产生影响。

方法1:让内部有浮动的父盒子形成BFC，它就能关闭住内部的浮动。此时最好的方法就是使用overflow:hidden属性。
方法2：给后面的父盒子设置clear:both属性。clear表示清除浮动对自己的影响，both表示左右浮动都清除。
方法3：使用::after伪元素给盒子添加最后一个子元素，并且给::after设置clear:both属性。
方法4：在两个父盒子之间“隔墙”，隔一个携带clear:both的盒子。

相对定位

盒子可以相对自己原来的位置进行位置调整，成为相对定位。位置描述词为：left(向右移动)，right(向左移动)，top(向下移动)，bottom(向上移动)。其值可以为负数，即往规定方向相反移动。相对定位的元素会在“老家留坑”，本质上仍然是在原来的位置，只是会渲染在新的地方，渲染而成的新图形可以比喻为“影子”，不会对页面其他元素产生任何影响。其可用来微调元素，也可以做绝对定位的参考盒子。
在这里插入图片描述

<style>
        .div1{
            overflow: hidden;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color:blue;
            position: relative;
            top:50px;
            left:50px;
        }
        .div3{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    
 <div class="div1">
        <div class="div2"></div>
        <div class="div3"></div>
    </div>

结果显示：在这里插入图片描述

绝对定位

盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置。位置描述词为：left(到左边的距离)，right(到右边的距离)，top(到上边的距离)，bottom(到下边的距离)。绝对定位脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对它们进行压盖。

脱离标准文档流的方法：浮动、绝对定位、固定定位。

绝对定位的参考盒子：其并不是永远以浏览器作为基准点，而是会以自己祖先元素中，离自己最近的拥有定位属性的盒子，当作基准点。这个盒子通常是相对定位的，所以这个性质也叫作“子绝父相”。

堆叠顺序z-index属性：是一个没有单位的正整数，数值大的能够压住数值小的。

绝对定位的盒子垂直居中：

position:absolute;
top:50%；
margin-top:-自己高度的一半

绝对定位可用于制作“压盖”、“遮罩”效果，也可结合CSS精灵使用，也可结合JS实现动画。

固定定位

不管页面如何卷动，它永远固定在那里。其只能以网页为参考点，没有"子固父相"这个性质，同时它也脱离标准文档流。可以用于“返回顶部”、“楼层导航”等

三七有星辰

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端自学——浮动与定位

浮动的基本概念浮动最本质功能就是用来实现并排，需要使用float:lef;属性；使用要点：要浮动，并排的盒子都需要设置浮动；父盒子需要留有足够的宽度，否则子盒子就会掉下去。浮动的顺序贴靠特性：子盒子会按顺序进行贴靠，若无足够空间，会寻找再前一个兄弟元素；浮动元素一定可以设置宽高：浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使它是span或者a标签等。使用浮动实现网页布局垂直显示的盒子不需要设置浮动，只有并排显示的盒子才要设置浮动；“大盒子带着
复制链接

扫一扫