文档流——CSS

最新推荐文章于 2023-10-21 16:06:09 发布

_洋

最新推荐文章于 2023-10-21 16:06:09 发布

阅读量203

点赞数

分类专栏： HTML+CSS 文章标签： css3

本文链接：https://blog.csdn.net/mantou_riji/article/details/124084700

版权

HTML+CSS 专栏收录该内容

38 篇文章 3 订阅

订阅专栏

文章目录

文档流（normal flow)概念
文档流和元素
- 在文档流中的元素
- 脱离文档流中的元素

文档流（normal flow)概念

网页是一个多层的结构，一层摞着一层.
通过CSS可以分别为每一层来设置样式,但是作为用户来讲只能看到最顶上一层。
这些层中,最底下的一层称为文档流，文档流是网页的基础。

文档流和元素

我们所创建的元素默认都是在文档流中进行排列：
对于我们来元素主要有两个状态

在文档流中
不在文档流中（脱离文档流)

在文档流中的元素

在文档流中的元素有以下特点:

块元素
块元素会在页面中独占一行，自上向下垂直排列
默认宽度是父元素的全部(会把父元素撑满)
默认高度是被内容撑开(子元素)
行内元素
行内元素不会独占页面的一行，只占自身的大小
行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元
则元素会换到第二行继续自左向右排列（书写习惯一致)
行内元素的默认宽度和高度都是被内容撑开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box1{
            width: 100px;
            background-color: pink;
        }
        #box2{
            width: 100px;
            background-color:salmon;
        }
        span{
            background-color: rgb(226, 202, 208);
        }
    </style>
</head>
<body>
    <div id="box1">盒子1</div>
    <div id="box2">盒子2</div>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
     <span>行内元素</span>
    
</body>
</html>

输出：
在这里插入图片描述

脱离文档流中的元素

脱离文档流的情况：
float：https://blog.csdn.net/mantou_riji/article/details/124103109
绝对定位：https://blog.csdn.net/mantou_riji/article/details/124112864

_洋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文档流——CSS

文章目录文档流（normal flow)概念文档流和元素在文档流中的元素脱离文档流中的元素文档流（normal flow)概念网页是一个多层的结构，一层摞着一层.通过CSS可以分别为每一层来设置样式,但是作为用户来讲只能看到最顶上一层。这些层中,最底下的一层称为文档流，文档流是网页的基础。文档流和元素我们所创建的元素默认都是在文档流中进行排列：对于我们来元素主要有两个状态在文档流中不在文档流中（脱离文档流)在文档流中的元素在文档流中的元素有以下特点:块元素块元素会在页面中独占
复制链接

扫一扫

专栏目录