css中背景相关属性,标签元素显示模式，HTML嵌套规范

最新推荐文章于 2025-06-05 17:06:55 发布

原创最新推荐文章于 2025-06-05 17:06:55 发布 · 600 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端学习

本文详细介绍了CSS中的背景颜色、背景图片、背景平铺和位置属性，以及HTML标签元素的显示模式，包括块级、行级和行内块元素的特点，并探讨了元素显示模式的转换和HTML嵌套规范。内容简洁实用，适合前端初学者。

提示：来自哔哩哔哩博主不良良良

已经开始感受到夏天的风了

背景相关属性，标签元素显示模式

标签元素的显示模式
元素显示模式的转换
HTML嵌套规范

背景颜色：background-color(bgc简写）

属性名：background-color
属性值：

颜色取值：关键字，rgb表示法，rgba表示法，16进制…
注意点：
背景颜色默认值是透明：rgba(0,0,0,0)
背景颜色不会影响盒子大小，而且还能看清盒子的大小及其位置，在一开始的布局中，会先给盒子设置背景颜色，以进行相关设计，

    <style>
        div{
            width: 500px;
            height: 600px;
        }
        .box1{
            background-color: deeppink;
        
        }
        .box2{
            background-color: aqua;
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    
</body>

在这里插入图片描述

背景图片：background-image(bgi)

属性名：background-image(bgi)
属性值：background-image：url('图片的路径'）
注意点：

背景图片中的url中可以省略引号
背景图片默认在水平和垂直方向上平铺的
背景图片仅仅给盒子起到装饰效果，类似于背景色

    <style>
        div{
            background-image: url(4.jpg);
            width: 1080px;
            height: 947px;
        }
    </style>
</head>
<body>
    <div></div>

背景平铺

属性名：background-repeat（bgr)
属性值：
在这里插入图片描述

背景位置

属性名：background-position(bgp)
属性值：background-position:水平方向位置垂直方向位置
在这里插入图片描述
我们需要注意：

方位名词取值和坐标取值可以混用，第一个取值表示水平，第二个取值表示垂直

    <style>
        div{
            background-image: url(4.jpg);
            background-position: center;
            width: 600px;
            height: 600px;
        }
    </style>
</head>
<body>
    <div>
    
    </div>
    
</body>

标签元素的显示模式

块级元素

显示特点：

独占一行（一行只能显示一个）
宽度默认是父元素的宽度，高度默认由内容撑开
可以设置宽高

代表标签

div,p,h,ul,li,dt,dd,form…等

<div style="width: 300px;height: 300px;background-color: aqua;"></div>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p>
    <div style="width: 400px;height: 300px;background-color: black;"></div>
    <h1>确定不给我点一个赞吗</h1>

在这里插入图片描述

行级元素

显示特点：

一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高

代表标签：a,span…

   <a href="">天猫</a>
    <a href="">京东</a>
    <span>行内元素</span>

在这里插入图片描述
注意：
不换行，设置宽高不生效；尺寸和内容大小相同

行内块元素

显示特点：

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

代表标签：

input，textarea，button，select…
特殊情况：img标签有行内块元素特点。但是chrome调试工具中显示结果是inline

元素显示模式的转换

通过改变元素默认的显示特点，让元素符合布局要求
语法：

属性	效果
display:block	转换为块级元素
display:inline-block	转换成行内块元素
display:inline	转换成行内元素

    <style>
        div{
            display: inline-block;
        }
        p{
            display: inline-block;
        }
        span{
            display: block;
        }
    </style>
</head>
<body>
    <div style="width: 50px;height: 50px;background-color: bisque;"></div>
    <p>Lorem ipsum dolor sit amet.</p>
    <span>beautiful</span>
    <span>girl</span>
</body>