元素的类型

元素类型有几种：

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

行内元素

     特点：不能设置宽高默认水平方向排列（从左到右排列）

     浏览器display:inline;

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

块级元素

     特点：能够设置宽高，默认垂直方向排列（从上到下排列）

     浏览器：display:block;

     例如：div、p、h1~h6、ul、li、ol、form、table

行内块元素

     特点：能够设置宽高，默认水平方向排列（从左到右排列）

     浏览器：display:inline-block;

     例如：img、input、select下拉菜单、textarea多行文本框

     图片img标签是特殊的行内块元素，display:inline

元素类型的转换：

通过display属性转换元素类型

display：

取值：

inline；   行内元素

block；   块状元素

inline-block；   行内块元素

none；    隐藏元素（不占位置）

将元素转换为块元素

1、display:block;

2、给元素添加浮动 flout

3、给元素添加绝对定位和固定定位

4、父子关系，给父元素添加弹性盒（display:fiex），子元素会变成块元素。

特殊的行内块元素

img

图片下面默认3px留白问题解决方法

1、给图片添加display:block;（因为前后元素类型不统一，将元素类型统一）

2、给图片添加vertical-align属性，只要属性值不为baseline基线对齐即可解决

取值：    top；顶线对齐

          middle；中线对齐

          baseline；基线对齐（图片默认）

          bottom；底线对齐

实现图片垂直居中效果

1、容器(图片父元素)添加行高line-height

2、调整图片垂直对齐方式，vertical-align:middle；中线对齐

如何隐藏元素

1、display:none;

2、visibility:visible;（默认，元素正常显示）/hidden;（元素隐藏，在页面中占位置）

3、opacity:0~1;设置透明度，0为透明，0.5为半透明，1为不透明。在页面中占位置，能够将容器里面的内容一起实现透明

4、将元素（元素内无内容）高度height设置为0，在页面中不占位置

5、transform:scale(0);给元素添加缩放，在页面中占位置

置换元素：有自己的宽度高度，根据属性和属性值浏览器渲染出其类型

置换元素就是行内块元素：inline-block

例如：img、input、select和textarea也是置换元素

非置换元素：除了置换元素以外