HTML\CSS网页的文档流

最新推荐文章于 2024-08-20 19:23:57 发布

somr6ody

最新推荐文章于 2024-08-20 19:23:57 发布

阅读量75

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_54495694/article/details/125420520

版权

本文介绍了HTML文档流的概念，它是网页布局的基础，决定了元素如何在页面上自上而下、自左向右排列。块级元素占据整行，行内元素则按水平方向排列。同时，提到了元素脱离文档流的情况，比如使用浮动或定位。示例代码展示了块级元素

和行内元素的默认行为。

摘要由CSDN通过智能技术生成

文档流（normal flow）

-网页是一个多层的结构，一层摞着一层

-通过css可以分别为每一层来设置样式

-作为用户来讲只能看到最顶上一层

-这些最底下的一层成为文档流-网页的基础

我们所创建的元素默认都是在文档流中进行排列的

对于我们来说元素主要有两个状态

-在文档流中

-不在文档流中（脱离文档流）

元素在文档流中的特点

-块元素

-块元素在页面中独占一行，自上向下垂直排列

-默认宽度为父元素的全部（会把父元素盛满），如果指定了长度就按指定的来

-默认高度会被内容撑开

-行内元素

-行内元素不回独占一行，只占自身的大小，自左向右水平排列

-如果一行中不能容纳所有的行内元素，则会换到第二行继续自左向右（如同书写习惯）

<!DOCTYPE html>
<html lang="zh">
<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>
    .box1{
        background-color: yellow;
        width: 100px;
    }
    .box2{
        background-color: yellow;
        width: 100px;
    }




    </style>
</head>
<body>

     <div class="box1">我是div1</div>
     <div class="box2">我是div2</div>

     <span>我是span1</span>
     <span>我是span2</span>
     <span>我是span3</span>
     <span>我是span4</span>
     <span>我是span5</span>
</body>
</html>

-行内元素的默认宽度和高度都是被内容撑开

somr6ody

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML\CSS网页的文档流

文档流（normal flow） -网页是一个多层的结构，一层摞着一层 -通过css可以分别为每一层来设置样式 -作为用户来讲只能看到最顶上一层 -这些最底下的一层成为文档流-网页的基础我们所创建的元素默认都是在文档流中进行排列的对于我们来说元素主要有两个状态 -在文档流中 -不在文档流中（脱离文档流）元素在文档流中的特点 -块元素 -块
复制链接

扫一扫