13、文档流

最新推荐文章于 2024-02-13 21:54:43 发布

五仁卤鸡翅

最新推荐文章于 2024-02-13 21:54:43 发布

阅读量136

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/MoonNight608/article/details/106861215

版权

css 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

文章目录

介绍
文档流

介绍

本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记

文档流

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
.box1{
    background-color:yellow;
    width:100px;
    
}
.box2{
    width:100px;
    background-color:red
}

                
</style>
<body>
1、文档流（normal flow）
     - 网页是一个多层的结构，一层压一层
     - 通过css可以为每一层设置样式
     - 作为用户只能看到最顶一层
     - 这些层中，最底下的一层称为文档流，文档流是网页的基础
       所创建的元素默认都是在文档流中进行排列的
     - 对于我们来说，元素主要有两个状态
        - 在文档流中
        - 不在文档流中 
         
     - 元素在文档流中有什么特点
       - 块元素
           - 块元素会在页面中独占一行
           - 默认宽度是父元素的全部（会把父元素撑满）
           - 默认高度是被内容（子元素）撑开
           - 块元素自上往下垂直排列
           
       - 行内元素
           - 行内元素不会独占页面一行，只会占自身大小
           - 行内元素在页面中自左向右水平排列  ,如果一行中
             不能容纳下所有的行内元素，继续自左向右排列
           - 行内元素的默认宽度 和高度总是被内容撑开     
      -  
 <div class="box1"></div>
 <div class="box2"></div>
 <span>我是spna1</span>
 <span>我是span2</span>
 
</body>
</html>

五仁卤鸡翅

关注

0
点赞
踩
0

收藏

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

文档流（normal flow） - 网页是一个多层的结构，一层压一层 - 通过css可以为每一层设置样式 - 作为用户只能看到最顶一层 - 这些层中，最底下的一层称为文档流，文档流是网页的基础所创建的元素默认都是在文档流中进行排列的元素在文档流中有什么特点块元素行内元素
复制链接

扫一扫