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

最新推荐文章于 2023-04-12 22:36:22 发布

请叫我大虾

最新推荐文章于 2023-04-12 22:36:22 发布

阅读量522

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/m0_37564426/article/details/89327085

版权

前端专栏收录该内容

41 篇文章 1 订阅

订阅专栏

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>

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>

3.行内块级元素

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

img标签就是行内块级元素

显示方式: display: inline-block;

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

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

请叫我大虾

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端一HTML:十八:元素的显示方式

1. 块级元素特点: 单独占一行, 可以给这个元素设置宽高。 div, p, h1(h2,系列标签), ul,li, ol, dl标签都是块级元素标签。显示方式: display: block;如下: 有两个div块,每个div的宽高都是200px,但由于div是块级元素标签，即使设置了宽，还是单独占了一行。 <!do...
复制链接

扫一扫