行内元素和块级元素

最新推荐文章于 2023-10-18 20:46:20 发布

小豪boy

最新推荐文章于 2023-10-18 20:46:20 发布

阅读量224

点赞数

分类专栏： CSS3学习笔记文章标签： html5 html css

本文链接：https://blog.csdn.net/qq_34771938/article/details/119937043

版权

CSS3学习笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

display属性

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">
    <title>First HTML Web</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 10px solid red;
        }

        span {
            /* 设置了宽度和高度，但是显示时没有作用，只有padding和border设置生效了 */
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 10px solid green;
        }
    </style>
</head>

<body>
    <!-- 行内元素和块级元素 -->
    <div class="box1">div1</div>
    <div class="box1">div2</div>
    <span>span1</span>
    <span>span2</span>
</body>

</html>

行内块

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        img {
            width: 100px;
        }

        input {
            width: 100px;
            height: 20px;
        }
    </style>
</head>

<body>
    <!-- 行内块 -->
    <img src="image/xiaowu.jpg" alt="">
    <img src="image/yasuo.jpg" alt="">
    <form action="">
        <input type="text" name="" id="">
        <input type="text" name="" id="">
    </form>
</body>

</html>

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

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        a {
            display: block;
            width: 50px;
            height: 25px;
            border: 1px solid #000;
            color: white;
            background-color: yellowgreen;
            text-decoration: none;
            text-align: center;
        }

        span {
            display: inline-block;
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <!-- 将超级链接改为块级元素 -->
    <a href="">点击</a>
    <!-- 将span改为行内块元素 -->
    <span>你好</span>
</body>

</html>

元素的隐藏

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

原始样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }

        #div1 {
            background-color: red;
        }

        #div2 {
            background-color: green;
        }

        #div3 {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>

</html>

使用display: none;将元素隐藏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }

        #div1 {
            background-color: red;
        }

        #div2 {
            /* 使用display: none;将元素隐藏，元素将彻底放弃位置 */
            display: none;
            background-color: green;
        }

        #div3 {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>

</html>

使用visibility: hidden;将元素隐藏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }

        #div1 {
            background-color: red;
        }

        #div2 {
            /* 使用visibility: hidden;将元素隐藏，元素不放弃自己的位置。 */
            visibility: hidden;
            background-color: green;
        }

        #div3 {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>

</html>

小豪boy

关注

0
点赞
踩
0

收藏

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

display属性display属性类型是否能并排显示是否能设置宽高当不设置width属性时举例块级元素否是 width自动撑满 div、section、header、h系列、li、ul等行内元素是否 width自动收缩 a、span、em、b、u、i等 <!DOCTYPE html><html lang="en"><head> <meta c
复制链接

扫一扫

专栏目录