前端一HTML:二十二元素显示方式案例

最新推荐文章于 2024-02-25 13:56:28 发布

请叫我大虾

最新推荐文章于 2024-02-25 13:56:28 发布

阅读量309

点赞数

分类专栏：前端

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

版权

前端专栏收录该内容

41 篇文章 1 订阅

订阅专栏

1. 块级元素

单独占一行，高度不设置默认为0，如果有内容，高度会被内容撑开。

display:block

2. 行内元素

一行可以有多个，不能设置宽高。

display:inline

3. 行内块级元素

一行内可以显示多个，可以设置宽高。

display:inline-block

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width:100px;
            height: 30px;
            background-color: blue;
            color: red;
            display: inline-block;
            text-align: center;
        }

        a{
            color: red;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div><a href="#">导航1</a></div>
    <div><a href="#">导航2</a></div>
    <div><a href="#">导航3</a></div>
    <div><a href="#">导航4</a></div>
</body>
</html>

请叫我大虾

关注

0
点赞
踩
0

收藏

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

1. 块级元素单独占一行，高度不设置默认为0，如果有内容，高度会被内容撑开。 display:block2. 行内元素一行可以有多个，不能设置宽高。 display:inline3.行内块级元素一行内可以显示多个，可以设置宽高。 display:inline-block<!doctype html&...
复制链接

扫一扫

专栏目录