CSS display 属性、背景属性、其他常用属性

TIP

本节学习 CSS 中的 display 属性，background 背景属性，CSS 精灵图，线性渐变，径向渐变等项目中常用的属性

一、display 属性¶

TIP

display 属性的作用，块级元素、行内元素、行内块级元素，互相转换和对比，隐藏元素，空白间隙
中小企业和大厂面试真题解析

1、display 属性的作用¶

TIP

display 属性可以设置元素的内部和外部显示类型

外部显示类型：
- 元素的外部显示类型有 block 块、inline 内联等。
- 外部显示类型将决定该元素在流式布局中的表现。
内部显示类型：
- 内部显示类型有 flex 布局、grid 网格布局、流式布局等。
- 元素的内部显示类型可以控制其子元素的布局方式。

流式布局（文档流或常规流）

"文档流" 或 "流式布局" 是在对布局进行任何更改之前（默认情况下），在页面上显示 "块" 和 "内联" 元素的方式。
简单直白点来说，他是一种排版方式，这种排版方式规定了块级和内联元素在页面中如何排版显示。

【流式布局】中 - 块级元素排版方式

块级盒子会从包含块的顶部开始，按序垂直排列。
同级盒子间的垂直距离会由"margin"属性决定。
相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠

【流式布局】中 - 内联元素排版方式

盒子会从包含块的顶部开始，按序水平排列。
只有水平外边距、边框和水平内边距会被保留。
这些盒子可以以不同的方式在垂直方向上对齐：可以底部对齐或顶部对其，或者按文字底部进行对齐

（内部显示类型，我们在后面讲到 flex 弹性布局和 grid 网格布局时再来讲）

2、元素外部显示类型¶

display 通过以下属性值来指定元素的显示类型

block 块级
inline-block 行内块
inline 行内(内联)

元素显示类型分为：block 块级和 inline 内联等 inline 内联元素又分为：inline 内联元素和 inline-block 行内块元素

2.1、block 块级元素¶

常见的块级元素有

<p>、<div>、<ul>、<ol>、<li>、<h1>~<h6>、<dl>等

块级元素的特点：

独占一行
可以设置 width、height 属性。
在不设置宽情况下，默认认为父元素内容区宽。
块级元素里可以放任意类型元素。

注意事项

文字类元素标签内不能放其它块元素，比如：
- p 标签里不能放 p 和 div 标签。
- h1-h6 标签里不能放 p，div 元素

<style>
  /*
    块级元素特点：
    1、不能并排显示，默认流体布局
    2、可以设置宽高
    3、默认width自动撑满
  */
  h2 {
    background-color: pink;
  }
  .box1 {
    width: 300px;
    height: 50px;
    background-color: skyblue;
  }
  .box2 {
    width: 300px;
    height: 50px;
    background-color: gold;
  }
</style>
<body>
  <h2>div块级元素</h2>
  <div class="box1"></div>
  <div class="box2"></div>
</body>

![[Pasted image 20260225112022.png]]

2.2、inline-block 行内块元素¶

以下元素具有行内块元素的特性：

<img>、表单类元素、<video>、<audio>等

以上元素本质上叫 可替换元素，归类归到 inline-内联（行内）元素

行内块元素的特点：

相邻的行内块（或行内）元素会在一行显示，放不下会换行。
相邻的行内块元素之间会有空白间隙（后面案例中来解答这个问题）。
元素默认宽为它本身内容宽
可设置 width、height 属性

<style>
  .box {
    width: 450px;
    background-color: skyblue;
    padding: 20px;
  }
  /*
    img 和 表单元素是具有行内块元素的特点
    默认情况下，他们会并排显示 ，同时也支持宽度高度的设置
  */
  img {
    width: 200px;
  }
  input {
    width: 200px;
    margin-bottom: 10px;
  }
</style>
<body>
  <div class="box">
    <input type="text" />
    <input type="text" />
    <img src="images/flower.jpg" alt="" />
    <img src="images/flower.jpg" alt="" />
    <img src="images/flower.jpg" alt="" />
  </div>
</body>

![[Pasted image 20260225112340.png]]

2.3、inline 内联（行内）元素¶

常见的行内元素有：

<a>、<strong>、<span>、<i>、<del>等

行内元素特点：

相邻的行内元素会在一行显示，放不下时会换行显示
设置 width、height 属性是无效的。其宽高随其内容大小而撑开。
行内元素里只能放文本或其它行内元素

注意：

<a>标签中不能再放 <a>标签
但 <a>标签中可以放块级元素
实际开发中，在某些情况下会把 <a>标签转换为块级元素

<style>
  /*
    行内元素特点：
    1、并排显示，默认从左至右布局
    2、不可以设置宽高
    3、其宽高随其内容大小而撑开
  */
  span {
    width: 200px;
    height: 200px;
    background-color: skyblue;
  }
</style>
<body>
  <span>我是span标签</span>
  <span>我是span标签</span>
  <span>我是span标签</span>
</body>

![[Pasted image 20260225112452.png]]

2.4、总结：三种元素类型对比¶

元素类型	排列方式	盒模型属性	元素中可以放置的元素类型
块级(block)	独占一行	width、height 有效	任意元素
行内块(inline-block)	一行可显示多个	width、height 有效	行内或行内块元素
内联 (inline)	一行可显示多个	width、height 无效	行内或文本元素

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

TIP

我们只需要给对应的元素添加对应 display 属性值，就可以把元素转换为对应的元素类型。

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

<style>
  div {
    /* 转换为行内元素 */
    display: inline;
  }
  a {
    background-color: skyblue;
    /* 转换块级元素 */
    display: block;
    width: 200px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    text-decoration: none;
    color: #fff;
    border-radius: 5px;
    margin-top: 20px;
  }
  /* 鼠标滑动到a标签上面时，背景变色 */
  a:hover {
    background-color: rgb(67, 183, 230);
  }
  span {
    background-color: gold;
    padding: 10px 20px;
    /* 转换为行内块 */
    display: inline-block;
    margin-top: 20px;
    color: #fff;
  }
</style>
<body>
  <!-- 块级元素转换为行内元素 -->
  <div>div标签</div>
  <div>div标签</div>

  <!-- 行内元素转换为块级元素 -->
  <a href="#">加入购物车 ！</a>

  <!-- 行内元素转换为行内块 -->
  <span>span标签</span>
  <span>span标签</span>
  <span>span标签</span>
</body>

![[Pasted image 20260225112719.png]]

4、隐藏元素方法¶

属性	功能	描述
display:none;	隐藏元素	可以将元素隐藏，子孙元素全部隐藏不可见。并且只要父元素隐藏，子孙没有任何办法可见。元素隐藏后不会占空间。就好比页面当中就没有加过这个元素一样。
visibility:hidden;	隐藏元素	将元素隐藏，子孙元素全部不可见，但是给子孙加上 visibility: visible; 时，子孙可见。隐藏后仍占其位置，会留下空白的一块区域。基本不用。

<style>
  .sp1 {
    display: none;
  }
  /* 如果需要显示，可设为 display: inline */
  .sp2 {
    visibility: hidden;
  }
</style>
<body>
  <p>
    我在隐藏的元素前面，<span class="sp1">我是隐藏的元素里的内容</span>
    >我在隐藏的元素后面。
  </p>
  <p>
    我在隐藏的元素前面，<span class="sp2">我是隐藏的元素里的内容</span>
    >我在隐藏的元素后面。
  </p>
</body>

![[Pasted image 20260225112802.png]]

补充

display 除 none 以外的值，均为显示元素。
visibility:visible; 为显示元素

5、常见大厂面试真题¶

面试题：

display:none; 与 visibility:hidden; 两者的区别？（字节跳动）

区别	display: none	visibility: hidden
空间占据性	不占据空间	占据原空间
回流与渲染性	会产生回流与重绘	不会产生回流，只会产生重绘
对子元素影响	子孙元素全部隐藏不可见。并且只要父元素隐藏，子孙没有任何办法可见	子孙元素全部不可见，但是给子孙加上 visibility: visible; 时，子孙可见。

6、去掉行内块元素默认的空白间隙¶

行内块元素间默认产生空隙

<style>
  span {
    /* 元素转换为行内块元素 */
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 2px solid pink;
  }
</style>
<body>
  <div class="box">
    <!-- span元素转成行内块元素后，他们之间会产生空白空隙 -->
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
  </div>
</body>

![[Pasted image 20260225112950.png]] 产生间隙原因

元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理
根据 white-space 的处理方式（默认是 normal，合并多余空白），原来 HTML 代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。
这些元素之间的间距会随着字体的大小而变化

解决办法：

给父元素添加 font-size: 0px; 同时子元素重写 font-size
给元素添加 float，但会造成父元素高度塌陷，需要清除浮动
图片间空隙，给图片添加 display:block;

6.1、给父元素添加 font-size:0; 同时子元素重写 font-size¶

TIP

font-size 属性有继承性，所以父元素 font-size:0; 会继承到子元素 span，则子元素需要重新设置 font-size 大小

<style>
  .box {
    /* 去掉以下span行内块元素间空隙 */
    font-size: 0;
  }
  span {
    /*
      font-size属性有继承性，所以父元素 font-size:0;
      会继承到子元素span，则子元素需要重新设置 font-size 大小
    */
    font-size: 16px;
  }
</style>

![[Pasted image 20260225113056.png]]

6.2、给元素本身添加 float¶

TIP

元素添加 float 后，会脱离文档流
父元素未添加高度时，会出现高度塌陷问题，则需要清除浮动造成的问题。

<style>
  span {
    /* 元素全部左浮动后，空隙就消失了 */
    float: left;
  }
</style>

![[Pasted image 20260225113152.png]]

6.3、去掉图片下面的空隙，给图片添加 display: block;¶

加了 display:block 之后，图片成为块级元素，独占一行

<style>
  .box {
    width: 300px;
    border: 2px solid red;
  }
  img {
    width: 300px;
    /* 把图片转成块级元素，就可以消除图片与父元素向下的间隙 */
    display: block;
  }
</style>
<body>
  <div class="box"><img src="./images/flower.jpg" alt="" /></div>
</body>

图片未加 display:block; 之前的效果	图片加上 display:block; 去掉向下空白间隙
![[Pasted image 20260225113432.png]]	![[Pasted image 20260225113445.png]]