CSS基础笔记八，display属性详解（变成弹性盒子flex，隐藏none，变成块级元素bolck，变成行内元素inline，变成行内块级元素inlen-bolck）

前瞻：

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：flex 设置弹性盒子，

二，dispaly：none  隐藏起来

三，dispaly：block 把元素变成块级元素

四，dispaly：inline  把元素变成行内元素

五，dispaly：inlen-block  把元素变成行内块级元素

---

一。dispaly：flex 设置弹性盒子，

        详情见上一篇：CSS基础笔记七，怪异盒子和弹性盒子（弹性盒子的属性，子容器镜像（flex-direction），水平（justify-content），垂直（align-itmes），子容器的权重（flex-数））_qq_55006020的博客-CSDN博客

二，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;




超链接

四，dispaly：inline  把元素变成行内元素

    .a2{
      width: 300px;
      height: 200px;
      background-color: #4135fa;
    /*  把块级元素变成内联元素*/
      display: inline;
    }





我是标题1

五，dispaly：inlen-block  把元素变成行内块级元素

    span{
      width: 150px;
      height: 150px;
      background-color: #006699;
    /*  把这个内联元素修改行内块级元素*/
    /*  快级元素  独占一行  可设置宽高  从上往下排列   div h1-h6 p*/
    /*  行内元素 内联元素  不独占一行  不可设置宽高 从左往右排列 a b  span*/
    /*  行内块级元素  不独占一行 从左到右排列 可设置宽高   input bottom img*/
      display: inline-block;
    }





文本
文本

全部代码：

    
    



    



超链接
我是标题1
文本
文本

六：总结

display属性 

可以设置弹性盒子 flex

可以设置元素隐藏 none

可以更改元素的属性 

                变成块级 bolck

                变成行内 inline

                变成行内块级元素 inlen-bolck

补充 让一个元素隐藏的几种方式

1，更改属性使其隐藏 display：none  隐藏自己，不保留原来的位置

2，bisbility：hidden  隐藏自己，保留原来位置

3，opacity ：0  背景虚化 虚化到0的时候 自然就隐藏了，隐藏自己 保留原来的位置  

4，overflow：hidden  溢出部分被隐藏

5，溢出部分被隐藏后，想查看，可以设置滚动条 overflow：auto