day14-css之display样式

一、概述

　　我们之前了解到，说行内标签可以转换成块级标签，块级标签可以转换成行内标签，这个是可以的，因为我们今天要学习display样式，就可以实现这样的效果

二、display样式

2.1、display：inline

作用：块级标签转换为行内标签

<div style="background-color: red;height: 50px;display: inline;">高哥哥帅极了</div>

效果图:

注意：行内标签： 无法设置高度，宽度，padding，margin

2.2、display: block

作用：行内标签 转换为 块级标签

<span style="background-color: red;height: 50px;display: block;">高哥哥帅极了</span>

效果图：

注意：块级标签特性：可以设置高度，宽度，padding，margin

2.3、display：inline-block

作用：①具有inline属性，默认自己有多少占多少②具有block属性，可以设置高度，宽度，padding，margin。可以称为中性的标签

<span style="background-color: red;height: 50px;display: inline-block;">高哥哥帅极了</span>
或者
<div style="background-color: red;height: 50px;display: inline-block;">高哥哥帅极了</div>

效果图：

2.4、display: none

作用：使标签消失，这个一般用在我点一个按钮就出现，不点按钮就消失，但是标签实实在在在那边呐，这个以后js会用到

<div style="background-color: red;height: 50px;display: none;">高哥哥帅极了</div>#使此标签消失