HTML从入门到精通-5 div和span

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: blueviolet;
            /*display: inline;*/
            display: inline-block;
            vertical-align: top;
        }
        span{
            /*width: 100px;*/
            height: 100px;
            background: blue;
            /*display: block;*/
        }
        .box{
            /*display: none;*/
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <span>span1span1span1</span>
    <span>span2</span>
    <div>div3</div>
    <div class="box">
        <span>2</span>
    </div>
    <div></div>

    
        <p></p>
    
    <!--
    块级元素div  display:block;
    可以包含任何块和行内元素
    独占一行，支持设置宽高
    如果没有设置宽高，高度由内容撑开，宽度默认浏览器宽度
    没有内容，在网页上肉眼看不到东西，但是审查元素，宽度是浏览器宽度，高度0

    行内（内联）元素span   display:inline;
    可以和其他行内元素位于同一行
    行内元素不要包块级元素
    不支持设置宽高
     内容撑开宽高

     行内块元素  display:inline-block;
     块级元素可以横排展示
     行内元素可以设置宽高

     display:none
      隐藏元素,包括他的子标签，在页面中不占位置，等同于消失了
    -->
</body>
</html>

![image.png](https://upload-images.jianshu.io/upload_images/12491949-6073a84f61dd2a5f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![image.png](https://upload-images.jianshu.io/upload_images/12491949-118e728038c526dc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容