display和float浮动（上）

林代码er

于 2022-12-19 16:03:49 发布

阅读量108

点赞数 1

分类专栏： linercss 文章标签：前端 html css

本文链接：https://blog.csdn.net/m0_71088505/article/details/128345216

版权

linercss 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

块级元素：独占一行

h1~h6 p div 列表....

行内元素：不独占一行

span a img strong....

display

display：block 转化为块元素

inline 转化为行内元素

inline-block 既是块元素也是行内元素（保持块元素的特性但是可以写在一行）

none 消失隐藏

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div>div块元素</div>
<span>span行元素</span>
</body>

效果：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>div块元素</div>
<span>span行元素</span>
</body>