默认显示类型与显示类型转换

1. 显示类型
   块级元素显示类型display: block
   行内元素显示类型display: inline
   行内块级元素显示类型display: inline-block(可以同行显示,)
   解析空格
   给父及设置 font-size: 0
   然后给元素设置字体大小
2. 类型转换
   块级元素特征:
   block:(div /p /dl /form /h1~h6 /ol /ul)
   ①独占一行
   ②高度由里面的元素撑开
   ③宽度默认100%(继承父元素宽度)
   ④可以设置外边距/内边距
   ⑤可以包裹其他任意元素
   ⑥p标签不可包裹块级元素(只存放文本)
   行内元素特性:
   inline:(a/ b/ em/ i/ img/ span)
   ①和其他行内元素处于同一行
   ②不支持宽高
   ③上下外边距无效,auto无效(不支持auto居中)
   ④内边距只对内联元素产生影响,无视块元素
   ⑤标签之间的空格解析
   ⑥a标签能包裹块级元素(特殊、区域连接)
   行内块元素特征:
   inline-block: (input)
   ①本质上是行内元素,具有行内元素的特质
   ②支持宽高
   ③上下外边距有效,auto无效(不支持auto居中)
   ④内边距只对内联元素长生影响,无视块元素
   ⑤标签之间的空额解析
   ⑥img标签不是行内块元素(是行内元素,但是可以设置宽高,这源自于历史…)
3. 显示与隐藏
   display: none 隐藏不显示(元素消失不占位置)
   display: block 有显示的意义
   opacity: 0~1(调整整个元素透明度0-1)
   rgba()/transprent 只调整背景透明度