CSS：元素显示模式与背景

发布于：2025-05-09 ⋅ 阅读:(23) ⋅ 点赞:(0)

元素显示模式

元素显示模式是指元素在浏览器页面中显示的模式，比如<div></div>是独占一行的块级元素，<span></span>是行内元素

元素显示模式分为三大类：

  • 块级元素
  • 行内元素
  • 行内块元素

块级元素 block

常见的块级元素有：<h1> - -<h6> ,<p>,<ul>,<ol>,<li>,<div>

块级元素的特点：

  • 独占一行
  • 可以控制宽高，内外边距
  • 宽度默认值为父级元素的100%
  • 内部可以放其它块级和行内元素

但是当块级元素是文本的块级元素时，那么就html就规定不能这样使用，如果我们一定要这样使用那么浏览器会自动修改我的的代码

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        我是左边的文本
        <div>我是中间的文本</div>
        我是右边的文本
    </p>
    换一行
    <p>
        我是左边的文本
        <div>我是中间的文本</div>
        我是右边的文本
    </p>
</body>
</html>

演示结果

我们可以看到这里的<div></div>被分离了出来，然后在前面和后面添加了<p></p>，所以对这种文本元素，我们不能将块级元素放在块级元素里

行内元素inline

常见的行内元素有：<a>，<strong>，<b>，<em>，<del>，<span>等

行内元素的特点：

  • 一行能放多个行内元素
  • 不能设置宽高，设置了也无效，只能通过设置大小来改变宽高
  • 只能包含文本和其它行内元素

我们来演示一下修改行内元素大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span style="font-size: 50px;">我是一段文本</span>
</body>
</html>

演示结果

行内块元素inline-block

常见的行内块元素有：<img> <input> <td>等

元素特点

  • 一行内可以有多个行内块元素
  • 默认宽度是本身的宽度(块级的默认宽度是继承父级的)
  • 可以控制宽高和内外边距

元素显示模式对比

元素模式 元素排列 设置样式 默认宽度 包含
块级元素 一行只能放一个块级元素 可以设置宽高 父级容器的100% 可以包含任何标签
行内元素 一行可以放多个行内元素 不可以直接设置宽高 由内容撑开 只能容纳文本或者其它行内元素
行内块元素 一行可以放多个行内块元素 可以设置宽高 由内容撑开 -

 元素显示模式转换display

 CSS提供了一个display给我们来定义它的元素显示类型

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p style="display: inline;">Hello,World!!!</p>
    <p style="display: inline;">Hello,World!!!</p>
    <p style="display: inline;">Hello,World!!!</p>
    <p style="display: inline;">Hello,World!!!</p>
</body>
</html>

演示结果

  

我们可以将块级元素转化成行内元素，可以将行内元素转换成块级元素，这里会涉及很多问题，但是我们就提一个

 即使块级元素转换成了行内元素，块级元素转成行内元素也不能在里面加块级元素

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span>
        <div>Hello,World!!!</div>
    </span>
    <p style="display: inline;">
        <div>Hello,World!!!</div>
    </p>
</body>
</html>

演示结果 

 我们这里两块代码有所不同，虽然都是行内元素包含块元素，但是因为是转化过的仍然不能包含

 背景属性

背景颜色

背景颜色格式

background-color: 背景颜色;

 可以用来更改标签内容在浏览器上的背景颜色

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color:blueviolet ;
        }
    </style>
</head>
<body>
    <div>
        Hello,World!!!
    </div>
</body>
</html>

演示结果

我们可以看到整个div的背景颜色变成了紫色

图片背景 

我们的图片也可以作为文本的背景，我们可以设置图片背景的长宽

background-image: url(图片地址);
background-size: 200px;
height: 200px;
width: 200px;

url：后面的括号需要包括所使用图片的路径或地址

background-size：是用来设置图片的大小，后面的参数单位是px

height：用来设置显示图片的高度

width：用来设置显示图片的长度

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bgi .one{
            background-image:url(9bilibili1.jpg);
            background-size: 400px;
            height: 150px;
            width: 200px;
        }
    </style>
</head>
<body>
    <div class="bgi">
        <div class="one">Hello,World!!!</div>
    </div>
</body>
</html>

演示结果

 

背景平铺 

 图片平铺的基本格式

background-image:url(9bilibili1.jpg);
background-size: 20px;;
height: 900px;
background-repeat: repeat;

其中background-repeat是设置图片铺设的方式，一般默认是repeat，常用的参数有四个

  • repeat：将X轴方向和Y轴方向铺满
  • repeat-x：将X轴方向铺满
  • repeat-y：将Y轴方向铺满
  • no-repeat：不铺设

代码演示 

这里我们只演示repeat-x和repeat-y

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bgi .one{
            background-image:url(9bilibili1.jpg);
            background-size: 20px;;
            height: 900px;
            background-repeat: repeat-y;
        }
        .bgi .two
        {
            background-image:url(R-C.png);
            background-size: 20px;;
            height: 900px;
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>
    <div class="bgi">
        <div class="one">Hello,World!!!</div>
        <div class="two">Hello,World!!!</div>
    </div>
</body>
</html>

演示结果

 

这里有两个背景图片分别向X轴和Y轴方向平铺

背景位置

background-position:X Y

 X 和 Y一共有三个种类

方位名词：left top right bottom

精确单位：百分比(%)或精确坐标(px)

混合单位：同时包含方位名词和精确单位

我们来尝试一下混合单位

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bgi .one{
            background-image:url(9bilibili1.jpg);
            background-size: 30px;;
            height: 900px;
            background-position: 100px center;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="bgi">
        <div class="one">Hello,World!!!</div>
    </div>
</body>
</html>

演示结果

 

这张背景图以左上角为远点向右偏移100px然后居中

注意事项

  • 如果X和Y都是方位名词，那么谁在前谁在后都一样 
  • 如果只给了一个参数，那么默认另一个参数都是居中
  • 如果X给了一个精确单位，那么Y一定是Y轴
  • 如果X给了一个方位名词，那么Y一定也是Y轴

背景附着

background-attachment: scroll | fixed | local;

 三个参数讲解

  • scroll：背景图片会随着元素内容一起滚动（默认）
  • fixed：背景图片相对于视口固定
  • local：背景图片相对于元素内容固定

这里就不好演示了 

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布