Position布局类型-FLOW流动类型

最新推荐文章于 2024-04-21 22:38:54 发布

底蕴葡萄酒

最新推荐文章于 2024-04-21 22:38:54 发布

阅读量346

点赞数

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

本文链接：https://blog.csdn.net/LEISENY/article/details/108628274

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

FLOW流动类型

流动模型
流动模型的特征
- 第一点
- 第二点

流动模型

FLOW流动模型，是网页的默认布局模式。也就是说网页在默认状态下的HTML的网页元素都是根据流动模型来分布网页内容的。

流动模型的特征

第一点

块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%，而事实上，块状元素都会以行的形式占据位置。

<style>
        .div1 {
            height: 100px;
            background: red;
        }

        .div2 {
            width: 100px;
            height: 100px;
            background:blue;
        }

        .div3 {
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>

<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>

在这里插入图片描述

这里定义三个块状元素div分别修改了背景颜色为红蓝黄，可以非常容易的看出这三个元素默认为自上而下垂直分布。第一个我没有修改宽度width，所以页面自动默认为100%。

第二点

在流动模型中内联元素都会处在包含元素内从左往右水平分布显示，内联元素不会像块状元素那样霸道的占据一行，但是如果是流动模型中的块状元素中嵌套块状元素，嵌入的块状元素会默认浏览器的默认布局，呈自上而下垂直分布。

<div class="div1">
        <span>内联元素</span>
        <span>内联元素</span>
        <span>内联元素</span>
    </div>
    <div class="div2">
        <div><a href="">一级</a></div>
        <div><a href="">二级</a></div>
        <div><a href="">三级</a></div>
    </div>
    <div class="div3">
        <span>内联元素</span>
        <span>内联元素</span>
        <span>内联元素</span>
    </div>

.div1 {
            height: 100px;
            background: red;
        }

        .div2 {
            width: 100px;
            height: 100px;
            background:blue;
        }

        .div3 {
            height: 100px;
            width: 100px;
            background: yellow;
        }