H5-前端学习-07

        哈喽，各位小伙伴，我们会更新一些前端的文章，想学习前端的小伙伴，特别是0基础的小伙伴，或者对此感兴趣的小伙伴，可以关注我，我会保持更新。

溢出属性：
            溢出：一个元素有固定宽度和高度，当里面内容过多时，会超出来，这种效果称之为溢出
                属性：overflow
                取值：
                visible------可以溢出
                hidden------超出隐藏（溢出隐藏，溢出的部分被剪裁掉）-----常用
                scroll------添加滚动条(给元素水平和垂直方向上都添加滚动条，无论内容多少)
                auto-------添加滚动条（根据内容多少自动添加滚动条）------常用
                overflow-x:水平方向上超出
                overflow-y：垂直方向上超出
            剩余空间：
                white-space:
                取值：
                    normal------文本显示
                    nowrap------让文本在一行内显示
                    pre------文本在一行内显示，可以显示出空格格式
                    pre-wrap------文本可以折行显示，显示空格格式
                    pre-line------文本可折行显示，不显示空格格式
            文本添加省略号：
                text-overflow:
                取值：
                    clip-----不添加省略号（默认值，正常显示）
                    ellipsis-----添加省略号
            单行文本添加省略号：
                 1.容器有固定宽度（width）
                2.强制文本内容在一行内显示
                    white----space：nowrap
                3.超出部分隐藏
                    overflow：hidden
                4，添加省略号
                    text-overflow：ellipsis
        元素类型：
            元素类型有几种：行内元素，块级元素，行内块元素
            行内元素：
                特点：不能设置宽高，默认在一行内排列
                例如：span，a,i,em,b,strong,s,del,u,sub,sup
                    浏览器中有：display：inline
            块级元素：
                特点：能够设置宽高，默认垂直方向上排列（从上到下排列）
                例如：div，p,h1-h6,ul,li,ol,form,table
                浏览器中有：display：block
            行内块元素：
                特点:能够设置宽高，默认横向排列
                例如：img,input,select,textarea
                浏览器里：display:inline-block
                图片标签是特殊的行内块元素，display:inline
        元素类型的转换：
            通过display属性来转换元素类型
            display：
            取值：（常用）
                inline------行内元素
                block------块元素
                inline-block-----行内块元素
                none------隐藏元素
            不常用的取值（了解）：
                list-item-------让元素以列表形式显示
                table-----------让元素以表格形式显示
                table-row-------以表格行的形式显示
                table-cell------以表格单元格形式显示
        将元素转换成块元素：
            1.display：block
            2.给元素添加浮动：float
            3.给元素添加绝对定位和固定定位
            4.父子关系中，给父元素添加弹性盒（display:flex）子元素会变成块元素
        特殊行内块元素：
            img图片下面默认3像素留白问题
            解决方法：
                1.给图片添加display：block（因为前后元素类型不统一，将元素类型统一）-----常用
                2.给图片添加vertical-align:属性（只要不是基线对齐就能解决）
                    取值：
                    top---------顶线对齐
                    middle------中线对齐
                    baseline----基线对齐（默认）
                    bottom------底线对齐
        实现图片垂直居中效果：
            1.给容器添加行高
            2.调整图片垂直对齐方式为中线对齐
        如何隐藏元素？
            1，display：none-------元素隐藏，在页面中不占位置
            2.visibility: visible(默认值，元素正常显示)/hidden（隐藏元素）------该元素在页面中占位置
            3.obacity:0，（取值范围0-1）给元素添加透明度（能够将容器里面的内容一起实现透明）-----该元素页面中占位置
            4.将元素高度设置为0，height：0-----该元素不占位置
            5.transform: scale(0),给元素添加缩放------该元素在页面中占位置