元素类型及相互转化

元素类型：

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

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

1、块元素

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

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

都有display属性，取值为block

2、行内元素

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

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

都有display属性，取值为inline

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

3、行内块元素

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

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

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

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

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

通过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；————————————————元素不占位置

      如果元素里面有内容，添加{overflow：hidden；}

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

6、背景颜色rgba，a取值为0——————————元素占位置

img下面3像素留白问题：

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；}