开发者学堂课程【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 使用
注意点:
将行内元素转换成块级元素,这个元素就会拥有块级元素的特点
将块级元素转换成行内元素,这个元素就会拥有行内元素的特点