Web前端开发-元素类型

最新推荐文章于 2024-06-03 15:22:55 发布

viewerlin

最新推荐文章于 2024-06-03 15:22:55 发布

阅读量963

点赞数

分类专栏： HTML/CSS 文章标签： HTML CSS Web

本文链接：https://blog.csdn.net/viewerlin/article/details/80034069

版权

HTML/CSS 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

Web前端开发，自学笔记整理

元素类型

1. 元素类型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素类型</title>
            <style type="text/css">
            p {
                width: 100px;
                height: 30px;
                background: lightblue;
            }

            span {
                width: 100px;
                height: 30px;
                background: lightcoral;
            }

            img {
                width: 50px;
                height: 50px;
            }
        </style>
    </head>
    <body>
        <!--
            块状元素、行内元素、行内块元素、可变元素
        -->

        <!--1.块状元素
            独占一行
            可以设置宽度、高度
        -->
        <p>- 段落</p>
        <p>- 段落</p>
        <p>- 段落</p>
        <div>- div标签</div>
        <div>- div标签</div>
        <br />

        <!--2.行内元素/内联元素
            行内逐个显示
            不能设置宽度、高度
        -->
        <span>2018-</span>
        <span>04-</span>
        <span>21</span>
        <br />
        <br />
        <br />

        <!--3.行内块元素
            行内逐个显示
            可以设置宽度、高度
        -->
        <img src="../04-卧龙控股/img/bg.png"/>
        <img src="../04-卧龙控股/img/bg.png"/>
        <img src="../04-卧龙控股/img/bg.png"/>
    </body>
</html>

2.元素类型转换-1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素类型转换</title>
            <style type="text/css">
            /*元素类型：inline*/
            span {
                width: 50px;
                height: 50px;
                background: blue;
                color: white;
                font-size: 30px;
                text-align: center;
                line-height: 50px;

                /*改变元素类型*/
                display: inline-block;
            }
            b {
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <!--
            块状元素block、行内元素inline、行内块元素inline-block、可变元素
        -->
        <span>16</span>
        <b>:</b>
        <span>08</span>

    </body>
</html>

3. 元素类型转换-2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素类型转换</title>
            <style type="text/css">

            .view1 {
                width: 100px;
                height: 100px;
                background: lightblue;
                /*display: block;*/
                /*display: inline-block;*/
                /*相当于给元素添加了display:block;*/
                float: left;
            }
            .view2 {
                width: 100px;
                height: 100px;
                background: lightgreen;
                /*display: inline-block;*/
                float: left;
            }

            i {
                width: 30px;
                height: 30px;
                background: yellow;
            }
        </style>
    </head>
    <body>
        <!--
            块状元素：div、dl、dt、dd、ol、ul、h1-h6、form、hr、table、tr、td...
            行内元素：a、span、i、b、strong、em、del...
            行内块元素: img、input...
        -->
        <span class="view1">view1</span>
        <span class="view2">view2</span>

        <i>1</i>
        <i>2</i>
    </body>
</html>

viewerlin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发-元素类型

Web前端开发，自学笔记整理元素类型1. 元素类型&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;元素类型&lt;/title&gt; &lt;style type=&
复制链接

扫一扫

专栏目录