display属性在日常使用中会经常用到,但是它的一些特点及作用可能有很多小伙伴都不太清楚,接下来就让我来详细介绍一下吧。
CSS display属性
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常用属性之背景属性(七) |