共计 3130 个字符，预计需要花费 8 分钟才能阅读完成。
目录
display 属性
display 属性设置元素显示类型
元素外部显示类型
block 块级元素
inline-block 行内块元素
inline 行内元素
三种元素类型的对比
行内元素和块级元素的互相转换
隐藏元素方法【面试多考】
去掉行内块元素默认的空白间隙
给父元素添加 font-size:0; 同时子元素重写 font-size
给元素本身添加 float
给图片添加 display:block; 清除图片下面的空隙
display 属性
- display 可用来：“块级元素 ”、“ 行内元素 ”、“ 行内块元素 ”、“ 互相转换和对比 ”、“ 隐藏元素 ”、“ 空白间隙”
display 属性设置元素显示类型
display 属性可以设置元素的“内部 ”和“ 外部”显示类型
外部显示类型：
- 元素的外部显示类型有 block 块、inline 内联 等
- 外部显示类型将决定该元素在“流式布局”中的表现
内部显示类型：
- 内部显示类型“flex 布局 ”、“grid 网络布局”、“ 流式布局”
- 元素的 内部显示类型可以控制其子元素的布局方式
流式布局：
- 流式布局是在布局进行任何更改之前 ( 默认情况 下)，在页面上显示“块 ”和 内联”元素的方式。
- 流式布局是一种“排版方式 ”，这种排版方式规定了 块级和内联元素 在页面中如何排版显示
【流式布局】中 - 块级元素排版方式
- 块级盒子会从包含块的顶部开始，按序 垂直排列
- 同级盒子间的垂直距离会由“margin”属性决定
- 相邻两个块级盒子之间的垂直间距会遵循外边距折叠原理被折叠 ( 塌陷)
【流式布局】中 - 内联元素排版方式
- 盒子会从包含块的顶部开始，按序 水平排列
- 只有 水平外边距 、 边框 和内边距 会被保留
- 这些盒子可以以不同的方式在垂直方向上对齐：可以底部对齐或顶部对齐，或者按文字底部进行对齐
元素外部显示类型
display可以通过以下 属性值 来指定元素的外部 显示类型
- block 块级
- inline-block 块级
- inline 行内元素
其中，“inline”和“inline-block”又都叫做“内联元素”
block 块级元素
常见的 块级元素 有：
、
、、
、 、
~
、等
块级元素 的特点：
- 独占一行
- 可以设置 width、height 属性
- 在不设置宽度时，宽度默认为父元素内容区宽
- 文字类元素里不能放其它块元素
- p标签里不能放 p 和div
- h1~h6标签里不能放p，di
div 块级元素
效果：
inline-block 行内块元素
常见的 行内块元素：
、、、等
行内块元素 的特点：
- 相邻的行内块元素会在一行显示，放不下会换行
- 相邻的行内块元素之间会有“空白间隙”
- 元素默认宽为它本身内容宽
- 可设置 width、height 属性
效果：
inline 行内元素
常见的 行内元素：
行内元素特点：
- 相邻的行内元素会在一行显示，放不下时会换行显示
- 设置 width、height 属性是无效的。其宽高随其内容大小而撑开。
- 行内元素里只能放文本或其它行内元素
注意：
我是 span 标签 我是 span 标签 我是 span 标签效果：
三种元素类型的对比
元素类型 排列方式 盒模型属性 内容 块级(block) 独占一行 width、height 有效 任意元素 行内块(inline-block) 一行可显示多个 width、height 有效 行内或行内块元素 内联（inline） 一行可显示多个 width、height 无效 行内或文本元素 记忆：
“从上到下，可包含内容种类逐渐减少”
行内元素和块级元素的互相转换
我们只需要给对应的元素添加对应的 display 属性值，就可以把元素转换为对应的元素类型。
- display:block; 将元素转为 块级元素
- display:inline-block; 将元素转为 行内块元素
- display:inline; 将元素转为 行内元素
效果：
隐藏元素方法【面试多考】
属性 功能 描述 display:none; 隐藏元素 将元素隐藏，子孙元素全部隐藏不可见，子孙没有方法将它修改为可见。元素 隐藏后不会占用 HTML 空间，就好比 HTML 中没有这个元素 visibility:hidden; 隐藏元素 将元素隐藏，子孙元素全部不可见，可以给子孙加入 ”visibility:visible;” 来实现子孙单独可见。
隐藏后仍占用 HTML 空间，会留下一片空白的区域。
基本不用
我在隐藏的元素前面，我是隐藏的元素里的内容 我在隐藏的元素后面。
我在隐藏的元素前面，我是隐藏的元素里的内容 我在隐藏的元素后面。
效果：
去掉行内块元素默认的空白间隙
行内块元素之间默认会产生“空白间隙”
效果：
产生间隙的原因：
- 元素被当成行内元素排版的时候，元素之间的空白符 (空格、回车换行) 都会被浏览器处理
- 这些元素之间的间距会随着字体的大小而变化
解决办法：
- 给父元素添加 font-size:0px，同时子元素重写 font-size【推荐】
- 给元素添加float
- 图片之间的空隙，给图片添加“display:block;”使它成为 图片元素
给父元素添加 font-size:0; 同时子元素重写 font-size
给元素本身添加 float
- 元素添加 float 后，会脱离文档流
- 父元素未添加高度时，会出现高度塌陷问题，则需要清除浮动造成的问题
给图片添加 display:block; 清除图片下面的空隙
图片未加 display:block; 时的效果 图片添加 display:block; 后的效果 仔细看，图片未加 display:block; 时，图片底下会有 空白间隙
原文地址: CSS-display 属性【看这一篇就够了！！】
