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

作者: 爱python爱生活 | 来源:发表于2018-09-02 22:42 被阅读31次

HTML从入门到精通-5 div和span
HTML块
HTML
和
常用标签
HTML 标签
ajax的使用以及jsonp的使用
HTML&CSS学习笔记 -- CSS（一）
HTML&CSS学习笔记 -- CSS（二）
HTML-div与span
HTML&CSS学习笔记 -- CSS（四）

<!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://img.haomeiwen.com/i12491949/6073a84f61dd2a5f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![image.png](https://img.haomeiwen.com/i12491949/118e728038c526dc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

网友评论

本文标题：HTML从入门到精通-5 div和span

本文链接：https://www.haomeiwen.com/subject/adsvwftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

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

相关文章

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

HTML块

HTML
和

常用标签

HTML 标签

ajax的使用以及jsonp的使用

HTML&CSS学习笔记 -- CSS（一）

HTML&CSS学习笔记 -- CSS（二）

HTML-div与span

HTML&CSS学习笔记 -- CSS（四）

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读