css常见问题

         display的取值有哪些?

            常用取值

                inline===让元素变成一个行内元素

                block====让元素变成一盒块级元素

                inline-block让元素变成一个行内快元素

                none=====隐藏一个元素

                flex=====让元素触发弹性盒子

                grid=====让元素触发网格布局

            不常用的取值

                list-item===让元素一列表项类型显示

                table=======让元素以表格类型显示

                table-row===让元素以表格的行类型显示

                table-cell==让元素以表格的单元格类型显示

        元素类型之间是不是可以互相转换?

            元素类型之间是可以互相转换的

            通过display属性进行转换的;只要更改了对应的取值即可发生改变

            问题:为啥不直接使用转换元素类型:display:inline-blcok布局

                原因:元素数量较少,你直接通过css转换的话多次一举,行内快元素中间,水平有缝隙;这个缝隙不好解决

                元素类型转换的应用位置

        如何隐藏元素

            1)display:none;隐藏元素

                不占页面空间,后面元素上去补位置

            2)visibility:hidden;隐藏元素

                占页面空间的,元素没有上去补位置

            3)透明:让整个元素透明:元素内容,边框,内边距,等等:隐藏元素;

                opacity:0-1;

                0透明 1不透明

                占页面空间, 后面的元素没有上去补位置

            4)width:0px:height:0p; 如果有文本的话,再配合:font-size:0px; overflow:hidden

                不占页面空间, 后面元素上去补位置了;

            5)缩放:

                transform:scale(0) 隐藏元素

                占页面空间, 后面元素没有上去补位置

        行内快元素的应用

            行内快元素比较特殊,因为这个元素与文本一样,是以垂直方向上面基线形式对其的;基线与底线之间存在3px的留白

            所以导致你使用图片时候,下面存在一个缝隙,这个缝隙,使用*{margin:0;padding:0}解决不掉.如何解决?

        解决3px的留白

            vertical-align:

                baseline;=====基线形式对其(默认值,默认存在3px)

                bottom;=======底线形式对其(解决3px)

                middle;=======中线形式对其(解决3px)(******)

                    主要应用于图片高度不一致,需要让图片中心位于ling-height正中位置

                top;==========顶线形式对其(解决3px)

            可以改变元素类型为:块级元素

                display:block;

        如何让一个元素变成块级元素

            1)display:block;

            2)float取值不为none

            3)定位:position:absolute/fixed;

            4)父元素触发弹性盒子/网格盒子,子元素默认就会变成块

        置换元素和非置换元素

            可变元素和不可变元素,置换元素就是我们所谓的行内快元素,浏览器可以根据标签的属性来识别出不同的内容

            例如: <img src=""> 路径不同,浏览器渲染出来的图片不一样的 <input type="">浏览器更具type属性的不同取值渲染出来不同的输入框,密码框,按钮,等等;  这样的元素被称之为可变元素(置换元素) 其余的为非置换元素