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

原创于 2019-05-09 09:45:33 发布 · 340 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

41 篇文章

订阅专栏

本文深入探讨了CSS中三种主要的显示属性：块级元素、行内元素和行内块级元素的区别与应用。通过具体实例，展示了如何使用display属性来控制元素的布局，包括宽度、高度和对齐方式，特别关注于行内块级元素的特性，如在同一行显示多个元素同时允许设置宽高。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>