HTML&CSS基础-文档流

　　　　　　　　　　　　　HTML&CSS基础-文档流

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

一.HTML源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文档流</title>
    </head>
    <body>
        
        <!--
            文档:
                指定的就是网页，每一个页面都是一个文档。
            
            文档流:
                文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中。
                元素在文档流中的特点:
                    块元素：
                        1>.块元素在文档流中会独占一行，块元素会自上向下排列;
                        2>.块元素在文档流中默认宽度是父元素的100%,宽度值是auto,当元素的宽度值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距;
                        3>.块元素在文档流中高度默认被内容撑开;
                    内联元素:
                        1>.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，继续自左向右;
                        2>.内联元素的高度和宽度默认都被内容撑开;
       -->
       <style type="text/css">
               .box1{
                   background-color: red;
                   padding-left: 500px;
                   font-size: 100px;
               }
               
               .box2{
                   width: 100px;
                   height: 100px;
                   background-color: yellow;
               }
               
               span{
                   background-color: deeppink;
                   font-size: 32px;
               }
               
               
       </style>
    </body>
        <div class="box1">我是box1的div元素</div>
        <div class="box2"></div>
        <span>我是一个span标签</span>
        <span>我是一个span标签</span>
        <span>我是一个span标签</span>
        <span>我是一个span标签</span>
        <span>我是一个span标签</span>
</html>

二.浏览器打开以上代码渲染结果