Css的布局

最新推荐文章于 2024-09-30 15:42:36 发布

APinBom

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量88

点赞数

分类专栏：前端从零开始文章标签：前端

本文链接：https://blog.csdn.net/qq_51649346/article/details/123797209

版权

前端从零开始专栏收录该内容

16 篇文章 2 订阅

订阅专栏

浅谈Css的布局

标准文档流

文档流中，内联元素默认从左往右进行排序，遇到阻碍或者宽度不够的时候自动换行，块级元素单独占据一行，按照从上到下排序。

脱离文档流

文档一旦脱离文档流，则元素不再按照文档流的排列方式进行排列，如块级元素脱离文档流后，该块级元素不再接着上个元素从上到下排列，而是成为第一个元素，从顶部开始排列。

脱离文档流的方法：

float:left
position:absolute;
position:fixed

bfc

官方定义：BFC（Block Formatting Context）块格式化上下文，是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

说人话：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。我们经常使用到BFC，只不过不知道它是BFC而已

bfc如何生成:

根元素默认的就是一个bfc(类似body,html)
float的值不是none会去触发bfc
position:absolut fixed
overflow的值不是visible
display的值设置为table-cell inline-block

bfc的特征:

内部的box在垂直方向上会一个接一个
垂直方向上由magrin决定(同时属于一个bfc区域下的两个相邻box之间的margin会重叠以大的外边距marign为重叠距离)
每一个元素的做外边距和包含块的边界相距(bfc元素不会超出),absolute定位是特例
bfc的区域不会跟float重叠
bfc在你计算高度的时候，浮动元素也需要重新计算
bfc是一个独立的容器，里面的子元素，不会影响另外一个bfc元素

实例

<style>
     .o{
         width: 200px;
         height: 200px;
         background-color: red;
     }
     .i{
        width: 200px;
        height: 200px;
        background-color: green;
     }

    </style>
</head>
<body>
    <div class="o"></div>
    <div class="i"></div>

在这里插入图片描述

众所周知，div属于块级元素，两个块级元素布局，会按上下排序的方式来进行排序,而让两个div标签在同一行显示的办法有2种:

1.一种是将两者用display:inline变为行内元素

2.一种是给两者添加浮动

 .o{
         width: 200px;
         height: 200px;
         background-color: red;
         float: left;
     }
     .i{
        width: 200px;
        height: 200px;
        background-color: green;
        float: left;
     }

在这里插入图片描述

添加浮动后两个div就水平排布了

为什么添加浮动后就可以水平排序了?

首先，我们写的div是在标准文档流中的，而我们给div添加了浮动后，它就脱离了标准文档流，可以看做是漂浮在标准流之上,例如:

.o{
         width: 200px;
         height: 200px;
         background-color: red;
         float: left;
     }
     .i{
        width: 200px;
        height: 200px;
        background-color: green;
        /* float: left; */
     }

在这里插入图片描述

当我们只给红色div添加浮动后，我们发现，绿色的看不见了，其实，绿色的是被红色的盖住了，我们可以理解为添加浮动使div标签漂浮在标准文档流之上，而绿色的div(标准文档流)在浮动文档流下方被盖住了。

在进行多个div添加浮动测试后发现:

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

div的顺序是HTML代码中div的顺序决定的。

靠近页面边缘的一端是前，远离页面边缘的一端是后

添加浮动后也就相当于变成了一个新的bfc区域

父相子绝

在css中用position属性中，有absolute和relative、static三个值，分别是绝对定位，相对定位，默认

相对定位relative

相对于自身进行位移，不设置偏移量的情况下对元素没有任何的影响，设置了偏移量，则基于自身的初始位置进行移动(在移动后，虽然元素的位置发生了改变，但元素本身初始位置依旧占据着)

绝对定位absolute

在没有父级元素定位时，以浏览器的左上角为基准

有父级的情况下，父级设置相对定位，子级设置绝对定位是以父盒子进行定位的

父相子绝

子级是绝对定位的话，父级要用相对定位。

其实，子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说，子绝父绝，子绝父相都是正确的。

为什么要是“子绝父相”呢？

因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。

父盒子布局时，需要占有位置，因此父亲只能是 相对定位.

例子:

 <style>
        .totel{
            width: 1000px;
            height: 1000px;
            background-color: antiquewhite;
            position: relative;
            <!--给父级标签添加相对定位-->

        }
        .o{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            float: left;
            <!--给子级添加绝对定位-->
        }
        .i{
            width: 200px;
            height: 200px;
            background-color: green;
            float: left;
            position: absolute;
            <!--给子级添加绝对定位-->
        }
        

    </style>
</head>
<body>
    <!-- 如果给这两个div都添加浮动，bfc与float不会重叠，此时的body高度为0 -->
    <div class="totel">
        <div class="o"></div>
        <div class="i"></div>

    </div>

在有父级的情况下，子级的绝对定位是按照父级的标准进行偏移的

这是没有任何偏移量的情况下，可以发现两个div标签在都添加浮动的情况下还是发生了重叠，与父级的左上角对齐

在这里插入图片描述

  .totel{
            width: 1000px;
            height: 1000px;
            background-color: antiquewhite;
            position: relative;
            

        }
        .o{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            float: left;
            top: 300px;
        }
        .i{
            width: 200px;
            height: 200px;
            background-color: green;
            float: left;
            position: absolute;
            top: 80px;
        }
        添加两个偏移量

在这里插入图片描述