display属性在日常使用中会经常用到，但是它的一些特点及作用可能有很多小伙伴都不太清楚，接下来就让我来详细介绍一下吧。

CSS display属性

  • 1、display 属性的作用
  • 2、元素外部显示类型
    • 2.1、block 块级元素
    • 2.2、inline-block 行内块元素
    • 2.3、inline 内联（行内）元素
    • 2.4、总结：三种元素类型对比
  • 3、行内/块级元素的互相转换
  • 4、隐藏元素方法
  • 5、两种隐藏方法的区别
  • 6、去掉行内块元素默认的空白间隙

display 属性的作用：块级元素、行内元素、行内块级元素，互相转换和对比，隐藏元素，空白间隙等等。

1、display 属性的作用

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

  • 外部显示类型：

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

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

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

[ 流式布局 ]中 - 块级元素排版方式：

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

[ 流式布局 ]中 - 内联元素排版方式：

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

2、元素外部显示类型

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

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

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

2.1、block 块级元素

常见的块级元素有：
 
<p>、<div>、<ul>、<ol>、<li>、<h1>~<h6>、<dl> 等
 
块级元素的特点：

  • 独占一行
  • 可以设置 width、height 属性。
  • 在不设置宽情况下，宽默认为父元素内容区宽。
  • 块级元素里可以放任意类型元素，但是文字类元素标签内不能放其它块元素
  • p、h1-h6 标签里不能放 p 和 div 标签。

2.2、inline-block 行内块元素

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

<img>、表单类元素、<video>、<audio> 等，这些元素本质上叫 可替换元素（归类归到行内元素)。
 
行内块元素的特点：

  • 相邻的行内块（或行内）元素会在一行显示，放不下会换行。
  • 相邻的行内块元素之间会有 空白间隙。
  • 可设置 width、height 属性，元素默认宽为它本身内容宽。

2.3、inline 内联（行内）元素

常见的行内元素有：
 
<a>、<strong>、<span>、<i>、<del> 等
 
行内元素特点：

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

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

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

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

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

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

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

4、隐藏元素方法

属性 功能 描述
display:none; 隐藏元素 可以将元素隐藏，子孙元素全部隐藏不可见，并且没有任何办法可见。元素隐藏后不会占空间。
visibility:hidden; 隐藏元素 将元素隐藏，子孙元素全部不可见，但是给子孙加上 visibility: visible;时，子孙可见。 隐藏后仍占其位置，会留下空白的一块区域。（基本不用）

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

5、两种隐藏方法的区别

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

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

产生间隙原因：

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

解决办法：

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

    • font-size 属性有继承性，所以父元素 font-size:0; 会继承到子元素 span，则子元素需要重新设置 font-size 大小。
  • 给元素添加 float
    • 元素添加 float 后，会脱离文档流，父元素未添加高度时，会出现高度塌陷问题，则需要清除浮动造成的问题。
  • 图片间空隙，给图片添加 display:block;
    • 加了 display:block 之后，图片成为块级元素，独占一行。
上一篇文章 下一篇文章
CSS常用属性之列表属性（五） CSS常用属性之背景属性（七）

CSS常用属性之display属性（六）相关推荐

  1. CSS: CSS常用的文本样式属性

    介绍:CSS常用的文本样式属性 color:  颜色 font-size:  字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...

  2. CSS BOX类型和display属性

    BOX类型会影响呈现和布局, 基本的BOX类型有两种: 块级(block-level)和行内级(inline-level). 事实上还有其他类型的BOX(如table, list-item等), 不过 ...

  3. （15）css常用样式—background背景属性

    一.背景属性概述 CSS 中除了布局类属性,还需要添加一些背景类的内容进行页面的修 饰,从而让网页变得更加的美观. CSS 中通过 background 属性来设置背景,它是一个综合属性,可以拆分成多 ...

  4. CSS overflow属性与display属性

    overflow属性: visible 默认值.内容不会被修剪,会呈现在元素框之外. hidden 内容会被修剪,并且其余内容是不可见的. scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其 ...

  5. 关于前端position属性和display属性，这篇文章已足够

    在我初学前端的时候,对position和display,尤其是flex特别的混乱,故总结一套,希望能帮助到有需要的同学.这里我想特别告诫一下移动端学习web的同学,例如position:relativ ...

  6. js修改html不成功,为什么这段代码中用js修改css样式中的display属性却不成功？

    getByClass() 这个方法写的有问题,你这个方法目的是获取className的元素数组. var s = getByClass('li');     但是你用的是 li,是tagName fu ...

  7. CSS学习笔记 display属性

    CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...

  8. 【CSS 定位之 display 属性】

    CSS 定位之 display 属性 1. display 属性: 设置 元素的 显示类型 / 框的类型 (元素和子元素的布局) ⑴ 设置 元素的显示类型 ( 框的类型 ) ⑵ 元素的显示类型 ⑶ 显 ...

  9. HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性

    css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...

最新文章

  1. 服务器负载暴涨以后...
  2. C++中string.find()的误用
  3. PID控制器开发笔记之二：积分分离PID控制器的实现
  4. tkinter中text属性_python tkinter基本属性详解
  5. 1.2 Enterprise Library 应用程序块
  6. dedecms网站轮播本地显示为什么上传到服务器就不显示了,dedecms后台上传图片实现图片轮播的方法...
  7. pandownload事件_pandownload被执法背后是中国盗版的末路
  8. Tricks（三十二）—— 遍历全部的子串（子数组）
  9. Selenium爬虫 -- 图片视频的src绝对地址链接分析
  10. Dev-C++下载与安装教程
  11. IEC 60730-1-2020.最新原版，可复制文字 ： 家用自己设备自动电气控制 - 第 1 部分：一般要求
  12. 【Java系列】八大排序算法
  13. mma7660（重力感应传感器）
  14. 网站机房:DDOS防火墙在企业机房中的应用介绍
  15. win7 64 旗舰版虚拟GPU-VMware下+vs2013安装caffe+matlab+python
  16. 渐行渐远的是熟悉的身影
  17. 微信表情代码大全---一句话搞定
  18. QT中打开网址或者html文件
  19. 小学教师听课体会 计算机,小学教师听课心得体会
  20. 博图SCL_递归算法的应用

热门文章

  1. 2008系统开ftp服务器配置,win2008 r2开启ftp服务器配置
  2. 生物特征识别技术在宠物监控中的应用
  3. chromeos-apk_ChromeOS.dev-为Chrome OS构建世界一流的应用和游戏的蓝图
  4. mysql表的结构修改记录_mysql-表记录/表结构操作
  5. 网络编程（51）—— Windows下使用select进行IO复用
  6. Docker中Mysql容器启动
  7. Linux 挂载磁盘和扩展现有分区大小（无需格式化、无需关机）
  8. linux复制分区表信息,parted分区
  9. 使用parted分区磁盘
  10. Driftnet学习笔记