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

注意点:

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

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

 

相关文章
|
前端开发 容器
CSS display属性的作用
CSS display属性
164 0
CSS display属性的作用
|
3月前
|
前端开发
前端基础(十二)_overflow属性、clear属性、vertical-align属性
本文详细介绍了CSS中的overflow属性、clear属性和vertical-align属性的用法和效果,并通过实例展示了如何控制元素内容溢出时的显示方式、清除浮动以及对齐行内元素和行内块元素。
85 1
|
4月前
|
API
【Qt 学习笔记】QWidget的windowOpacity属性 | cursor属性 | font属性
【Qt 学习笔记】QWidget的windowOpacity属性 | cursor属性 | font属性
247 0
|
7月前
Margin - 简写属性
Margin - 简写属性。
66 1
|
前端开发 小程序 容器
Flex布局和主要属性用法详解(一)
Flex布局和主要属性用法详解
116 0
|
前端开发 容器
Flex布局和主要属性用法详解(二)
Flex布局和主要属性用法详解
113 0
|
Web App开发 前端开发 开发者
1 分钟认识新属性 accent-color —— 修改 input 默认控件颜色
1 分钟认识新属性 accent-color —— 修改 input 默认控件颜色
|
容器
Center 中的 widthFactor 与 heightFactor 属性
Center 中的 widthFactor 与 heightFactor 属性
206 0
Center 中的 widthFactor 与 heightFactor 属性
|
前端开发 开发者 容器
display 属性和实例| 学习笔记
快速学习 display 属性和实例。
display 属性和实例| 学习笔记