行内元素和块级元素

最新推荐文章于 2023-03-08 19:32:54 发布

hello_xujj

最新推荐文章于 2023-03-08 19:32:54 发布

阅读量326

点赞数

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/xjj19999272/article/details/116455154

版权

CSS 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

display属性

display在英文中为展示的意思，在css中分为行内元素与块级元素。下表为各自的特点：

display属性	是否能并排显示	是否能设置宽高	当不设置width属性时	举例
块级元素	否	是	width自动撑满	div、section、header、 h系列、li、ul等
行内元素	是	否	width自动收缩	a、span、em、b、u、i 等

来一段示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内元素和块级元素</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        span {
            width: 100px;
            height: 100px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <span>我是第一个span</span>
    <span>我是第二个span</span>
</body>
</html>

在上述代码中，给两个div标签和两个span标签都设置了宽高和背景颜色。网页效果如下：
在这里插入图片描述

可以看到div标签是块级元素，所以可以设置宽高但不能并排显示，而审判标签是行内元素，所以可以并排显示但不能设置宽高。

行内块

img和表单元素是特殊的行内块，它们既能够设置宽度高度，也能够并排显示。示例如下：

input {
    width: 100px;
    height: 100px;
    background-color: black;
}

在这里插入图片描述

行内元素和块级元素的相互转换

使用display:block;即可将元素转为块级元素。

使用display:inline;即可将元素转为行内元素，将元素转为行内元素的应用不多见。

使用display:inline-block;即可将元素转为行内块，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内元素和块级元素</title>
    <style>
        a {
            display: block;
            width: 200px;
            height: 60px;
            background-color: blue;
            color: white;
            text-align: center;
            line-height: 60px;
            text-decoration: none;
        }
        span {
            display: inline-block;
            background-color: red;
            padding: 10px;
            margin-top: 30px;    
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">百度一下，你就知道</a>
    <span>我是第一个span</span>
    <span>我是第二个span</span>
    <span>我是第三个span</span>
</body>
</html>

网页效果如下：
在这里插入图片描述

可以发现，a标签本来是行内元素，设置了display:block;后将其元素转为块级元素。而span标签也是行内元素，设置了display:inline-block;后将其元素转为行内块。（不仅能并排显示还能设置margin-top属性）

元素的隐藏

使用display: none;可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样。

使用visibility: hidden;可以也可以将元素隐藏，但是元素不放弃自己的位置。示例如下:

<style>
    .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .box2 {
        width: 100px;
        height: 100px;
        background-color: blue;
        /* 将其隐藏，但不放弃自己的位置 */
        visibility: hidden;
    }
    .box3 {
        width: 100px;
        height: 100px;
        background-color: green;
        /* 将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样 */
        display: none;
    }
    .box4 {
        width: 100px;
        height: 100px;
        background-color: yellow;
    }
</style>

在这里插入图片描述

可以发现，蓝色盒子被隐藏掉了，但没有放弃自己的位置，而绿色盒子被彻底隐藏了，因此黄色盒子挤上去了。

hello_xujj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
行内元素和块级元素

display属性display在英文中为展示的意思，在css中分为行内元素与块级元素。下表为各自的特点：display属性是否能并排显示是否能设置宽高当不设置width属性时举例块级元素否是width自动撑满div、section、header、 h系列、li、ul等行内元素是否width自动收缩a、span、em、b、u、i 等来一段示例代码：<!DOCTYPE html><html lang="en"><he
复制链接

扫一扫