行级块级元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>行级块级标签</title>
    </head>
    <body>
        <!-- 1.宽高
            宽度 width:100px;
            高度 height:200px;
         -->
         <!-- 2.行块级元素的区别 
              一.块级标签独占一行
                行级元素默认区域为文本区域，由文本撑开
              二.块级标签可以设置宽和高
                行级标签不可以设置宽和高
              三.块级标签display：block;
                行级标签display:inline;
              四.行级块级标签是可以通过display属性来相互切换。
              五.行级标签可以处于同一行
                块级标签不能处于同一行
            
                        
              不展开显示，不显示这个标签
              display:none;
         -->
        <span style="width: 100px;height: 100px;/*display: block;*/ background-color: red ">我是一个span</span>
        <div style="height: 100px; background-color: green ">1</div>
        <div style="width: 150px;height: 150px; background-color:  yellow">2</div>
        <div style="width: 200px;height: 200px; background-color: blue ">3</div>
    </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容