前瞻：display属性可以设置弹性盒子 flex可以设置元素隐藏 none可以更改元素的属性变成块级 bolck变成行内 inline变成行内块级元素 inlen-bolck补充 让一个元素隐藏的几种方式1，更改属性使其隐藏 display：none 隐藏自己，不保留原来的位置2，bisbility：hidden 隐藏自己，保留原来位置3，opacity ：0 背景虚化 虚化到0的时候 自然就隐藏了，隐藏自己 保留原来的位置。
前瞻：
display属性
可以设置弹性盒子 flex
可以设置元素隐藏 none
可以更改元素的属性
变成块级 bolck
变成行内 inline
变成行内块级元素 inlen-bolck
补充 让一个元素隐藏的几种方式
1，更改属性使其隐藏 display：none 隐藏自己，不保留原来的位置
2，bisbility：hidden 隐藏自己，保留原来位置
3，opacity ：0 背景虚化 虚化到0的时候 自然就隐藏了，隐藏自己 保留原来的位置
4，overflow：hidden 溢出部分被隐藏
5，溢出部分被隐藏后，想查看，可以设置滚动条 overflow：auto
前面我们提到了display：flex 设置弹性盒子。
其实display还有很多其他属性
它可以把元素变成：行内元素，变成块级元素，变成行内块级元素，可以设置隐藏，
复习，什么是行内元素，什么是块级元素
块级元素：一块一块的，自上而下，独占一行，可以设置宽高
行内元素，从左往右，不独占一行，不可以设置宽高
行内块级元素，从左往右，不独占一行，可以设置宽高 imgae input
目录
五，dispaly：inlen-block 把元素变成行内块级元素
一。dispaly：flex 设置弹性盒子，
二，dispaly：none 隐藏起来
.box{
width: 500px;
height: 500px;
background-color: #fa4d25;
margin: 0 auto;
/*让元素隐藏起来 隐藏之后原来文字不保留*/
display: none;
}更加全面的隐藏方式：
.box{
width: 500px;
height: 500px;
background-image: url("images/56.jpg");
background-size: 100% 100%;
/*隐藏自己 不保留原来位置*/
/*display: none;*/
/*隐藏自己 保留原来位置*/
/*visibility: hidden;*/
/*背景虚化 当虚化到0的时候 隐藏自己 背景保留*/
/*opacity: 0.5;*/
/*溢出部分隐藏 */
/*overflow: hidden;*/
/*设置滚动条*/
overflow: auto;
三，dispaly：block 把元素变成块级元素
在实际操作中，当一个容器被设置dispaly属性隐藏起来之后，可以通过更改dispaly属性来使其在显示出来
.a1{
width: 300px;
height: 150px;
background-color: #ffcccc;
/* 吧内联元素改变成行内元素*/
display: block;
<a href="#" class="a1">超链接</a>四，dispaly：inline 把元素变成行内元素
.a2{
width: 300px;
height: 200px;
background-color: #4135fa;
/* 把块级元素变成内联元素*/
display: inline;
}
<h1 class="a2">我是标题1</h1>五，dispaly：inlen-block 把元素变成行内块级元素
span{
width: 150px;
height: 150px;
background-color: #006699;
/* 把这个内联元素修改行内块级元素*/
/* 快级元素 独占一行 可设置宽高 从上往下排列 div h1-h6 p*/
/* 行内元素 内联元素 不独占一行 不可设置宽高 从左往右排列 a b span*/
/* 行内块级元素 不独占一行 从左到右排列 可设置宽高 input bottom img*/
display: inline-block;
}
<span>文本</span>
<span>文本</span>全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display属性</title>
<style>
/*<!--
什么是display属性
dispaly 可以修改元素的类型，让块级元素和内联元素相互转换
元素分类：
1，块级元素 div h1-h6 独占一行 可以设置宽高 自上而下排列
2，行内元素 a em span 等等 不独占一行 不可设置宽高 从左到右排列
3，块级行内元素 img buttom 不独占一行 可设置宽高 从做到右排列
dispaly 属性的详细介绍：
1，none 隐藏和显示元素
dispaly none 隐藏自己原来位置不保留
2，block 此元素将显示为块级元素
3，inline 此元素会被显示为内联元素
4，inlen-bolck 此元素会被显示为行内块级元素
5，flex 弹性盒子模型
-->*/
*{
/*全局设置为弹性盒子*/
/*display: flex;*/
}
.box{
width: 500px;
height: 500px;
background-color: #fa4d25;
margin: 0 auto;
/*让元素隐藏起来 隐藏之后原来文字不保留*/
display: none;
}
.a1{
width: 300px;
height: 150px;
background-color: #ffcccc;
/* 吧内联元素改变成行内元素*/
display: block;
}
.a2{
width: 300px;
height: 200px;
background-color: #4135fa;
/* 把块级元素变成内联元素*/
display: inline;
}
span{
width: 150px;
height: 150px;
background-color: #006699;
/* 把这个内联元素修改行内块级元素*/
/* 快级元素 独占一行 可设置宽高 从上往下排列 div h1-h6 p*/
/* 行内元素 内联元素 不独占一行 不可设置宽高 从左往右排列 a b span*/
/* 行内块级元素 不独占一行 从左到右排列 可设置宽高 input bottom img*/
display: inline-block;
}
</style>
</head>
<body>
<div class="box"></div>
<a href="#" class="a1">超链接</a>
<h1 class="a2">我是标题1</h1>
<span>文本</span>
<span>文本</span>
</body>
</html>
六：总结
display属性
可以设置弹性盒子 flex
可以设置元素隐藏 none
可以更改元素的属性
变成块级 bolck
变成行内 inline
变成行内块级元素 inlen-bolck
补充 让一个元素隐藏的几种方式
1，更改属性使其隐藏 display：none 隐藏自己，不保留原来的位置
2，bisbility：hidden 隐藏自己，保留原来位置
3，opacity ：0 背景虚化 虚化到0的时候 自然就隐藏了，隐藏自己 保留原来的位置
4，overflow：hidden 溢出部分被隐藏
5，溢出部分被隐藏后，想查看，可以设置滚动条 overflow：auto
551
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
