CSS-display属性【看这一篇就够了！！】

display属性

display可用来：“块级元素”、“行内元素”、“行内块元素”、“互相转换和对比”、“隐藏元素”、“空白间隙”

display属性设置元素显示类型

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

外部显示类型：

元素的外部显示类型有block块、inline内联等
外部显示类型将决定该元素在“流式布局”中的表现

内部显示类型：

内部显示类型“flex布局”、“grid网络布局”、“流式布局”
元素的内部显示类型可以控制其子元素的布局方式

流式布局：

流式布局是在布局进行任何更改之前(默认情况下)，在页面上显示“块”和内联”元素的方式。
流式布局是一种“排版方式”，这种排版方式规定了块级和内联元素在页面中如何排版显示

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

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

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

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

元素外部显示类型

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，di

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

效果：

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="https://n.sinaimg.cn/sinakd10109/746/w660h886/20220302/d4ab-624ed3b4a96345a9221d45bc1be4bf18.jpg" alt="" />
	  <img src="https://n.sinaimg.cn/sinakd10109/746/w660h886/20220302/d4ab-624ed3b4a96345a9221d45bc1be4bf18.jpg" alt="" />
	  <img src="https://n.sinaimg.cn/sinakd10109/746/w660h886/20220302/d4ab-624ed3b4a96345a9221d45bc1be4bf18.jpg" alt="" />
	</div>
  </body>

效果：

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>

效果：

三种元素类型的对比

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

记忆：

“从上到下，可包含内容种类逐渐减少”

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

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

display:block; 将元素转为块级元素
display:inline-block; 将元素转为行内块元素
display:inline; 将元素转为行内元素

<style>
	div {
		display: inline;
		background-color: aqua;
	}
</style>
  <body>
	<div>div标签</div>
	<div>div标签</div>
  </body>

效果：

隐藏元素方法【面试多考】

属性	功能	描述
display:none;	隐藏元素	将元素隐藏，子孙元素全部隐藏不可见，子孙没有方法将它修改为可见。元素隐藏后不会占用HTML空间，就好比HTML中没有这个元素
visibility:hidden;	隐藏元素	将元素隐藏，子孙元素全部不可见，可以给子孙加入"visibility:visible;"来实现子孙单独可见。隐藏后仍占用HTML空间，会留下一片空白的区域。基本不用

属性

功能

描述

display:none;

隐藏元素

将元素隐藏，子孙元素全部隐藏不可见，子孙没有方法将它修改为可见。元素隐藏后不会占用HTML空间，就好比HTML中没有这个元素

visibility:hidden;

隐藏元素

将元素隐藏，子孙元素全部不可见，可以给子孙加入"visibility:visible;"来实现子孙单独可见。

隐藏后仍占用HTML空间，会留下一片空白的区域。

基本不用

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

效果：

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

行内块元素之间默认会产生“空白间隙”

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

效果：

产生间隙的原因：

元素被当成行内元素排版的时候，元素之间的空白符(空格、回车换行)都会被浏览器处理
这些元素之间的间距会随着字体的大小而变化

解决办法：

给父元素添加font-size:0px，同时子元素重写font-size【推荐】
给元素添加float
图片之间的空隙，给图片添加“display:block;”使它成为图片元素

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

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

给元素本身添加float

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

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

给图片添加display:block;清除图片下面的空隙

<style>
	.box {
	  width: 300px;
	  border: 2px solid red;
	}
	img {
	  width: 300px;
	  /* 把图片转成块级元素，就可以消除图片与父元素向下的间隙 */
	  display: block;
	}
  </style>
  <body>
	<div class="box"><img src="https://ts1.cn.mm.bing.net/th/id/R-C.910babf0050754af72bb6eeaa5a5f46e?rik=Is4OpGIZ9LEvVg&riu=http://imgboys1.yohobuy.com/cmsimg01/2019/12/10/22/35/0109aae39aaa1b0339e8677af86b7d36ad.jpeg&ehk=d17Lgp+WN1cB5XU3rhEcT6e5YQszHkwFeXhGZbTdSC4=&risl=&pid=ImgRaw&r=0" alt="" /></div>
  </body>

图片未加display:block;时的效果	图片添加display:block;后的效果

仔细看，图片未加display:block;时，图片底下会有空白间隙