前端基础学习（三）浮动与定位

最新推荐文章于 2023-01-28 17:04:21 发布

三笠·阿卡曼

最新推荐文章于 2023-01-28 17:04:21 发布

阅读量404

点赞数 1

分类专栏：前端学习文章标签：前端 css3 css

本文链接：https://blog.csdn.net/cjl_xupt/article/details/122152159

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

浮动

浮动的基本概念

浮动用来实现并排

浮动的最本质功能：用来实现并排
浮动使用要点：要浮动，并排的盒子都要设置浮动；
盒子要有足够的宽度，否则盒子会掉下去；

浮动的顺序贴靠特性

子盒子会按照顺序进行贴靠，如果没有足够空间，则会寻找前一个兄弟元素；

浮动的元素一定能设置宽高

浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一定能设置宽度和高度，即使他是span或者a标签；

右浮动

float: right；,即可设置右浮动

使用浮动的注意事项

垂直显示的盒子，不需要设置浮动，只有并排显示的盒子才要设置浮动；
“大盒子带着小盒子跑”，一个大盒子中，又是一个小天地，内部可以继续使用浮动；
可以多多使用div；

使用浮动实现网页布局

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        margin: 0;
        padding: 0;
      }

      header{
        width: 1000px;
        height: 100px; 
        margin: 0 auto;
        /* background-color: #333; */
      }

      .content {
        width: 1000px;
        height: 500px;
        margin: 20px auto;
        /* background-color: #333; */
      }

      footer{
        width: 1000px;
        height: 100px;
        margin: 0 auto;
        background-color: #333;
      }

      header .logo {
        float: left;
        width: 220px;
        height: 100px;
        background-color: orange;
      }

      header .login {
        float: right;
        width: 220px;
        height: 30px;
        background-color: orange;
      }

      nav {
        float: right;
        width:  690px;
        height: 50px;
        margin-top: 20px;
        background-color: green;
      }

      .content .ad{
        float: left;
        width: 300px;
        height: 500px;
        background-color: blue;
      }

      .content main{
        float: right;
        width: 680px;
        height: 500px;
        /* background-color: purple; */
      }

      .content main .banner {
        width: 680px;
        height: 380px;
        background-color: orange;
      }

      .content main .pics {
        width: 680px;
        height: 100px;
        margin-top: 20px;
        /* background-color: orange; */
      }

      .content main .pics ul {
        list-style: none;
      }

      .content main .pics ul li {
        float: left;
        width: 160px;
        height: 100px;
        background-color: blue;
        margin-right: 10px;
      }

      .content main .pics ul li:last-child {
        width: 170px;
        margin-right: 0px;
      }

    </style>
  </head>
  <body>
    <header>
      <div class="logo"></div>
      <div class="login"></div>
      <nav></nav>
    </header>

    <section class="content">
      <aside class="ad"></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>
</html>

效果：
在这里插入图片描述

BFC规范和浏览器差异

BFC(Box Formatting Context，块级格式化上下文)是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；

从一个现象说起

一个盒子不设置height，当内容子元素都浮动时候，无法撑起自身；

如何创建BFC

float的值不是none；
position的值不是static或者relative；
display的值是inline-block、flex或者inline-flex；
overflow：hidden；

BFC的其他作用

BFC可以取消盒子margin塌陷；
BFC可以阻止元素被浮动元素覆盖；

清除浮动

清楚浮动：浮动一定要封闭到一个盒子中，否则会对页面后续元素产生影响；

清楚浮动方法一（推荐）

让内部有浮动的父盒子形成BFC，它就能关闭住内部的浮动，此时最好的方法是overflow:hidden属性；

清楚浮动方法2

给后面的父盒子设置clear:both属性，clear表示清除浮动对自己的影响，both表示左右浮动都清除；
不好的影响：margin失效了；

清除浮动方法3

使用::after伪元素给盒子添加最后一个子元素，并且给::after设置clear:both；

清除浮动方法4

在两个父盒子之间“隔墙”，隔一个携带clear:both的盒子；

定位

相对定位

相对定位：盒子可以相对自己原来的位置进行位置调整，成为相对定位；

位置描述词

left向右移动，right向左移动，top向下移动；bottom向上移动；

相对定位的性质

相对定位的元素，会在“留坑”，本质上仍然是在原来的位置，只不过在渲染在新的地方而已，渲染的图形可以比喻成“影子”，不会对原棉其他元素产生任何影响；

相对定位的用途

微调元素位置；
相对定位的元素，可以当作绝对定位的参考盒子；

绝对定位

绝对定位：盒子可以在浏览器中以坐标进行位置精准描述，拥有自己的绝对位置；

postion: absolute;
top: 100px;
left: 100px;

位置描述词

left到左边的距离；right到右边的距离；top到上边的距离；bottom到下边的距离；

绝对定位脱离标准文档流

绝对定位的元素脱离标准文档流，将释放自己的位置，对其他元素不会产生任何干扰，而是对他们进行压盖；
脱离标准文档流的方法：浮动、绝对定位、固定定位；

绝对定位的参考盒子

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

绝对定位的盒子垂直居中

绝对定位垂直居中是一个非常使用的技术；

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

堆叠顺序z-index属性

z-index属性是一个没有单位的正整数，数值大的能够压住数值小的；

绝对定位的用途

绝对定位用来制作“压盖”、“遮罩”效果；

固定定位

固定定位：不管页面如何卷动，它永远固定在那里；

position: fixed;
top: 100px;
left: 100px;

固定定位注意事项

固定定位只能以页面为参考点，没有子固父相这个性质；
固定定位脱离标准文档流；

固定定位的用途

返回顶部；
楼层导航；

三笠·阿卡曼

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端基础学习（三）浮动与定位

浮动浮动浮动的基本概念浮动用来实现并排浮动的最本质功能：用来实现并排浮动使用要点：要浮动，并排的盒子都要设置浮动；盒子要有足够的宽度，否则盒子会掉下去；浮动的顺序贴靠特性子盒子会按照顺序进行贴靠，如果没有足够空间，则会寻找前一个兄弟元素；浮动的元素一定能设置宽高浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一定能设置宽度和高度，即使他是span或者a标签；右浮动float: right；,即可设置右浮动使用浮动的注意事项垂直显示的盒子，不需要
复制链接

扫一扫