ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

文档流

2021-07-04 18:35:10  阅读:139  来源: 互联网

标签:span color 元素 流中 文档 background


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box1{
                
                background-color: #BBFFAA;
                padding-left: 200px;
            }
            
            .box2{
                width: 6.25rem;
                height: 6.25rem;
                background-color: #FF0000;
            }
            
            span{
                background-color: yellowgreen;
            }
            .box3{
                height: 500px;
            }
        </style>
    </head>
    <body>
        <!-- 
            文档流
                 文档流处在网页最底层,表示的是一个页面中的位置
                 我们所创建的元素都默认处在文档流中
                 
                 元素在文档流中特点
                    块元素
                       - 在文档流中独占一行,自上向下排列
                       - 块元素在文档流中默认宽度是父元素的100%
                       - 块元素在文档流中的高度默认被内容撑开
                    
                    内联元素
                       - 在文档流中只占自身大小,从左向右排列
                           如果一个不足以容纳所有内联元素,则换到下一行
                           继续自左向右
                       - 内联元素的宽高在文档流中默认都被内容撑开
                           
                           
         -->
         
         <!-- 
            当元素的高度或宽度为auto时,此时指定内边距不会影响可见框的大小
                而是会自动修稿宽高,以适应内边距
          -->
         <div class="box1">
             a
             <div class="box3"></div>
         </div>
         <div class="box2"></div>
         
         <span>我是span</span>
         <span>我是span</span>
         <span>我是span</span>
    </body>
</html>

元素在文档流中特点

  块元素  

    文档流中独占一行,自上向下排列

    块元素在文档流中默认宽度是父元素100%

    块元素在文档流中的高度默认被内容撑开

   内联元素

    在文档流中只占自身大小,从左向右排列

      如果一行不足以容纳所有内联元素,则换到下一行几句自左向右排列

    内联元素的宽高在文档流中默认都被内容撑开

 

标签:span,color,元素,流中,文档,background
来源: https://www.cnblogs.com/kfj010810/p/14969540.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有