您的位置: 首页  >  文章  >  前端一HTML:十八:元素的显示方式

前端一HTML:十八:元素的显示方式

分类: 文章 • 2024-02-14 18:24:34

1. 块级元素

       特点: 单独占一行, 可以给这个元素设置宽高。

       div, p, h1(h2,系列标签), ul,li, ol, dl标签都是块级元素标签。

      显示方式:   display: block;

如下: 有两个div块,每个div的宽高都是200px,但由于div是块级元素标签，即使设置了宽，还是单独占了一行。

    

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的显示方式</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: pink;
        }
        p{
            width: 200px;
            height: 200px;
            background: red;
        }
        h1{
            width: 200px;
            height: 200px;
            background: blue;
        }
       
    </style>
</head>
<body>
    
   <div></div>
    <div></div>
    <p></p>
    <h1></h1> 
</body>
</html>

前端一HTML:十八:元素的显示方式

2. 行内元素

     特点: 可以多个标签放在同一行,但是给标签设置宽高没有作用。

      span, u, i，strong，em都是行内元素标签

     显示方式:   display: inline;

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的显示方式</title>
    <style>


        span, u, i{
            width: 200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
    <span>水浒传</span>
    <u>三国演义</u>
    <i>小霸王学习机</i>
    <strong>宝塔镇河妖</strong>
    <em></em>

</body>
</html>

前端一HTML:十八:元素的显示方式

 

 3.行内块级元素

  特点: 可以多个标签放在同一行,并且标签可以设置宽高。

  img标签就是行内块级元素

 显示方式: display: inline-block;

 

 

  4. 元素显示方式的转换:

    只需要修改display属性就可以了。

相关推荐