CSS溢出属性与元素类型

  <!--

        CSS属性

            溢出：

              一个有固定宽高的容器，里面内容放不下会超出，这种效果我们称之为溢出

            属性：

                overflow：

                    取值：

                        visible--------可以溢出，正常显示（默认值）

                        hidden---------溢出隐藏

                        scroll---------滚动条，默认添加横向和纵向滚动条，无论内容多少

                        auto-----------滚动条，根据内容多少自动添加滚动条

            实现三个小圆点省略号效果:(只能应用在单行文本中)(面试题)

                1、容器设置宽度

                    width:500px;

                2、强制文本在一行内显示

                    white-space: nowrap;

                3、隐藏掉超出部分

                    overflow: hidden;

                4、添加省略号

                    text-overflow: ellipsis;、

 元素类型：

            元素类型分类：3类（面试题）

                块元素、行内元素、行内块元素

                1、块元素

                    特点：能够设置宽高，自己独占一行

                    例如：div、p、h1-h6、ul、ol、dl、dt、dd、form、li

                    都有display属性，取值为block

                2、行内元素

                    特点：默认横向排列，不支持设置宽高

                    例如：a、span、b、strong、i、em、u、s、del、sub、sup

                    都有display属性，取值为inline

                    注意：行内元素添加内边距、外边距，水平方向上生效，垂直方向上不生效

                3、行内块元素

                    特点：默认横向排列，又可以设置宽高

                    例如：img、input、textarea（多行文本输入框）、select（下拉框）

                    都有display属性，取值为inline-block

                    注意：img标签display取值为inline，是特殊的行内块元素

                思考：可不可以将不同的标签进行类型转换？

                    通过display属性来转换元素类型

                   

                display属性

                    取值：

                        常用取值：

                            block-----------------块元素

                            inline----------------行内元素

                            inline-block----------行内块元素

                            none------------------隐藏元素

                        不常用取值：（了解即可）

                            list-item----------列表形式

                            table--------------表格形式

                            table-row----------表格行

                            table-cell---------表格单元格

                如何将一个元素隐藏？

                    1、display：none；-----------元素不占位置

                    2、visibility:hidden;---------元素占位置

                    3、opacity:0;-----------------元素占位置

                        取值：

                            数字0-1，0:表示透明，1:表示不透明

                    4、height:0；-----------------元素不占位置

                    5、transform：scale（0）（利用缩放）--------元素占位置

                    6、rgba   a=0    -----------元素占位置

                特殊的行内块元素素

                    img下面三像素留白问题

                        1、display:block-------改变图片元素类型（本质问题）

                        2、图片标签基于基线对齐，只要不让图片基线对齐就可以解决这个问题

                            需要调整图片垂直对齐方式

                            vertical-align:

                                取值：

                                    top-------顶线对齐

                                    middle-------中线对齐

                                    baseline-------基线对齐（默认值）

                                    bottom-------底线对齐

                        让一张图片在容器中实现垂直居中

                            1、容器有高

                                height：200px;

                            2、容器有行高

                                line-height：200px;

                            3、调整图片垂直对齐方式

                                vertical-align：middle;

                思考：如何将一个元素变成块元素？(面试题)

                    1、display：block

                    2、给元素添加浮动

                        float：left/right

                    3、给元素添加定位

                        position:absolute(绝对定位)/fixed（固定定位）

                    4、父子关系中，父元素触发弹性盒子，子元素变成块元素

                        父元素：display：flex