CSS display 属性、背景属性、其他常用属性 - hao415资讯论坛[前端基础学习]-hao415资讯论坛

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

一、display 属性

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

1、display 属性的作用

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

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

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

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

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

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

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

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

2、元素外部显示类型

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

block 块级
inline-block 行内块
inline 行内

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

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>

图片[1]-CSS display 属性、背景属性、其他常用属性 - hao415资讯论坛[前端基础学习]-hao415资讯论坛

② inline-block 行内块元素

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

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

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

行内块元素的特点：

相邻的行内块（或行内）元素会在一行显示，放不下会换行。
相邻的行内块元素之间会有空白间隙（后面案例中来解答这个问题）。
元素默认宽为它本身内容宽
可设置 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"  />
    <img src="images/flower.jpg"  />
    <img src="images/flower.jpg"  />
  </div>
</body>

图片[2]-CSS display 属性、背景属性、其他常用属性 - hao415资讯论坛[前端基础学习]-hao415资讯论坛

③ 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>

图片[3]-CSS display 属性、背景属性、其他常用属性 - hao415资讯论坛[前端基础学习]-hao415资讯论坛

④ 总结：三种元素类型对比

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

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

我们只需要给对应的元素添加对应 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>

图片[4]-CSS display 属性、背景属性、其他常用属性 - hao415资讯论坛[前端基础学习]-hao415资讯论坛

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>

图片[5]-CSS display 属性、背景属性、其他常用属性 - hao415资讯论坛[前端基础学习]-hao415资讯论坛

补充

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>

图片[6]-CSS display 属性、背景属性、其他常用属性 - hao415资讯论坛[前端基础学习]-hao415资讯论坛

产生间隙原因

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

解决办法：

给父元素添加 font-size: 0px; 同时子元素重写 font-size
给元素添加 float
图片间空隙，给图片添加 display:block;

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

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>

图片[7]-CSS display 属性、背景属性、其他常用属性 - hao415资讯论坛[前端基础学习]-hao415资讯论坛

② 给元素本身添加 float

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

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

图片[8]-CSS display 属性、背景属性、其他常用属性 - hao415资讯论坛[前端基础学习]-hao415资讯论坛

③ 去掉图片下面的空隙，给图片添加 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"  /></div>
</body>