从零开始前端学习[6]:关于html5的元素类型转换，行级元素，块级元素，行块级元素类型

最新推荐文章于 2023-02-28 17:42:26 发布

^_^ 小小码nong

最新推荐文章于 2023-02-28 17:42:26 发布

阅读量823

点赞数 3

分类专栏： # 1.从零开始挑战前端文章标签：行级元素块级元素行块级元素 display属性元素类型转换

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_29924041/article/details/78009429

版权

1.从零开始挑战前端专栏收录该内容

57 篇文章 3 订阅

订阅专栏

关于html5的元素类型转换

行级元素与块级元素
行级元素与块级元素的区别
行级元素与块级元素之间的相互转换

提示
博主:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041

行级元素与块级元素

行级元素与块级元素是对标签特性的分类，其具有的特性即为行和块的特性，行的特性就不是独占一行，块级元素则占据一行显示。标签最开始的时候默认就是按照行，块来进行区分，不同特性所呈现的使用方式也是不一样的。

行级元素

行级元素(display:inline)
行级元素只是占据它内容所占的位置，默认是内容撑开高度，其他的内容的显示是在行级元素的后面进行的
特点:行级元素是不能设置宽高的，默认是内容撑开的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级元素特性</title>
    <style type="text/css">
        .main{
            width: 1200px;
            margin: 40px auto;
            border: 1px solid rebeccapurple;
        }
        span{
            width:300px;
            height:300px;
            background: deeppink;
        }
        a{
            width:300px;
            height:300px;
            background: deeppink;
        }

    </style>
</head>
<body>
<div class="main">
     <span>
        我是一个行级元素span标签
    </span>
    <a href="#">
        我是一个行级元素a标签
    </a>
    <font color="red" size="3">
        我是一个font标签
    </font>
    <i>
        我是i标签
    </i>
    <strong>
        strong标签
    </strong>
    <b>这是b标签</b>
    <em>em斜体标签</em>
</div>

</body>
</html>

显示的效果如下所示:
这里写图片描述
从上面可以看到，这些标签的显示都是在一行上面显示出来的，
并且给span或者a标签等设置的宽高其实是没有作用的，在浏览器中打开显示

虽然在浏览器调试的时候是已经设置进去了，但是span的宽高属性是无效的，所以行级元素是不支持宽高的，并且是内容撑开的宽高

以上的标签:span，font，a，strong，b，i，em 等标签默认都是行级元素，不会独占一行，并且是内容撑开高度显示

块级元素

块级元素(display:block)
块级元素是会独占一行的位置，它后面的元素是会换行进行显示的
并且块级元素如果不给宽高，默认宽度是父级元素宽度的100%，高度则是内容撑开高度的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>块级元素</title>
    <style type="text/css">
        p,div,h1,h2,h3,h4,h5,h6,ul,ol,dl,dt,dd,img{
            width:200px;
            height:30px;
            background: deeppink;
            border: 1px solid blue;
        }

    </style>
</head>
<body>
    <p>
        这是p元素
    </p>
    <div>
        一个单纯的div标签
    </div>
    <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505628270164&di=c24b7086eaf8819d6636bd096f81a6a5&imgtype=0&src=http%3A%2F%2Fwww.aseoe.com%2Fimages%2Fcategory_qdkf.jpg" alt="">
    <h1>H1头标签</h1>
    <h2>H2头标签</h2>
    <h3>H3头标签</h3>
    <h4>H4头标签</h4>
    <h5>H5头标签</h5>
    <h6>H6头标签</h6>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
    <dl>
        <dt>张三</dt>
            <dd>4年级</dd>
            <dd>2班</dd>
        <dt>李四</dt>
            <dd>5年级</dd>
            <dd>1班</dd>
    </dl>
</body>
</html>

显示如下所示：
这里写图片描述

可以看上面的标签都是独自占了一行显示，标签后面的内容都被撑开到下一行显示，所以行级元素也就是独占一行，并且支持宽高，如果不设置宽高的话，默认宽度是父级的100%，高度默认是内容撑开高度。

行级元素与块级元素的区别

区别：
1：块级元素会占一行显示，但是行级元素可以在一行并排的显示
2：行内元素对以下属性的特殊化效果

1：设置宽度width无效
2：设置高度height无效
3：设置margin外边距的时候，默认只会支持左右，上下设置无效，并且auto也是无效的
4：设置padding内边距的时候，默认左右有效，上下是无效的

注意：对于padding所说的上下无效，从展示上面来说是有效的，但是对于设置padding的元素的上下标签来说，padding在上下超出的区域是不会占用空间的。超出的区域只是会去覆盖掉原来上下标签的区域

如下:所示解释代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行级元素的padding</title> <style type="text/css"> p{ width: 300px; height:300px; background:deeppink; } span{ padding: 50px 50px; background-color: rgba(33,33,33,0.5); } </style> </head> <body> <p>行级元素的上一行元素p</p> <span>我是一个span</span> </body> </html> 这里写图片描述
从上面展示的效果上面就可以看到，行级元素其实是支持padding宽高的，但是这种padding宽高并不会去影响到整个布局界面的排布，也就是说对页面布局的影响是无效的，但是对自身的显示其实是有效的

行级元素与块级元素之间的相互转换

我们可以通过样式属性的设置，来控制标签的样式显示，即去改变标签元素的行块级的特性。
主要又一下四种：

display:none 不显示，包括其子元素都会被隐藏起来，彻彻底底消失
display:block；将行级元素转换成块级元素，有块级的宽高，独占一行，padding，margin等设置特性
display:inline；将块级元素转换成行级元素，这个时候具有行级元素的特性，可以横排显示灯
display:inline-block;以行级元素形式进行排列，以块级元素的样式进行显示(杂交的，有块级元素的所有特性，但是支持行内的横排显示)，一般使用的会比较多一点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行块级元素的转换</title>
    <style type="text/css">
        .main{
            width: 1200px;
            margin: 10px auto;
            border: 1px solid black;
        }
        p{
            height: 100px;
            width: 100px;
            background-color: #00aa00;
            border: 1px solid red;
        }
        .main .display_none_demo{
            display: none;
        }
        .main .display_inline_demo p{
              display: inline;
        }

        .main .display_block_demo span{
            display: block;
            width: 100px;
            height:100px;
            border: 1px solid red;
            background-color: #84a3e3;
        }

        .main .display_inline_block_demo p{
            display: inline-block;
        }

    </style>
</head>
<body>
<div class="main">
    <div class="display_none_demo">
        <p>
            第一个块级元素p
        </p>
        <p>
            第二个块级元素p
        </p>
    </div>

    <div class="display_inline_demo">
        <p>
            第三个块级元素p
        </p>
        <p>
            第四个块级元素p
        </p>
    </div>

    <div class="display_block_demo">
        <span>第一个span标签</span>
        <span>第二个span标签</span>
    </div>

    <div class="display_inline_block_demo">
        <p>第5个p标签</p>
        <span>第三个span标签</span>
        <p>第六个p标签</p>
        display_inline_block_demo
    </div>


</div>
</body>
</html>

显示如下所示：

这里写图片描述

从上面可以看到，通过display属性的设置，改变其行块级元素的特性，从而实现必要的效果

欢迎访问博客

^_^ 小小码nong

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
从零开始前端学习[6]:关于html5的元素类型转换，行级元素，块级元素，行块级元素类型

关于html5的元素类型转换行级元素与块级元素行级元素与块级元素的区别行级元素与块级元素之间的相互转换提示博主:章飞_906285288 博客地址:http://blog.csdn.net/qq_29924041行级元素与块级元素行级元素与块级元素是对标签特性的分类，其具有的特性即为行和块的特性，行的特性就不是独占一行，块级元素则占据一行显示。标签最开始的时候默认就是按照行
复制链接

扫一扫

专栏目录