Display 属性 | 学习笔记

简介: 快速学习 Display 属性。

开发者学堂课程【CSS 快速掌握:Display 属性】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/611/detail/9198


Display 属性


内容介绍

一、 内容简介

二、  知识点

 

一、 内容简介

它是显示的意思,用来进行行内元素与块级元素之间的相互转换!将隐藏的元素显示或者将显示的元素进行隐藏。

Display 属性取值:inline (行内)block (块级)none ()


二、  知识点

将一个行内元素的 display 属性值设置为 block 后,这个元素就会被转换为块级元素

Display: block

/*使用 display 属性,行内元素转换为块级元素*/

margin-bottom: 20px

将一个块级元素的 display 属性设置 为 inline,这个元素就会从块级元素转换为行内元素

Display: inline

/*display 属性,块级元素转换为行内元素*/

将一个显示的元素隐藏,将一个隐藏的元素显示

display: none (将一个显示的元素进行隐藏)

display: block (将一个隐藏的元素进行显示)

这两个功能是 java Script 使用

注意点:

将行内元素转换成块级元素,这个元素就会拥有块级元素的特点

将块级元素转换成行内元素,这个元素就会拥有行内元素的特点

 

相关文章
|
7月前
|
前端开发 容器
CSS display属性的作用
CSS display属性
101 0
CSS display属性的作用
|
7月前
|
前端开发 JavaScript 容器
display有哪些值?说明他们的作用?
display有哪些值?说明他们的作用?
|
8月前
CSS3 【display: flex;】与【align-self: 可覆盖父元素设置的algin-items;】的使用
CSS3 【display: flex;】与【align-self: 可覆盖父元素设置的algin-items;】的使用
25 0
|
9月前
display:none和visibility: hidden区别
display:none和visibility: hidden区别
|
9月前
display: block 属性影响flex布局
display: block 属性影响flex布局
|
9月前
CSS3 【display: flex;】与【align-self: 可覆盖父元素设置algin-items;】的使用
CSS3 【display: flex;】与【align-self: 可覆盖父元素设置algin-items;】的使用
44 0
|
Web App开发 前端开发 开发者
1 分钟认识新属性 accent-color —— 修改 input 默认控件颜色
1 分钟认识新属性 accent-color —— 修改 input 默认控件颜色
|
前端开发 开发者 容器
display 属性和实例| 学习笔记
快速学习 display 属性和实例。
194 0
display 属性和实例| 学习笔记
|
JavaScript 开发者
动画-transition-group 中 appear 和 tag 属性的作用|学习笔记
快速学习动画- transition-group 中 appear 和 tag 属性的作用
197 0
动画-transition-group 中 appear 和 tag 属性的作用|学习笔记
|
JavaScript
Element UI - el-table-column 属性之 show-overflow-tooltip 爬坑
Element UI - el-table-column 属性之 show-overflow-tooltip 爬坑
2021 0