- 显示类型
块级元素显示类型display: block
行内元素显示类型display: inline
行内块级元素显示类型display: inline-block(可以同行显示,)
解析空格
给父及设置 font-size: 0
然后给元素设置字体大小 - 类型转换
块级元素特征:
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标签不是行内块元素(是行内元素,但是可以设置宽高,这源自于历史…) - 显示与隐藏
display: none 隐藏不显示(元素消失不占位置)
display: block 有显示的意义
opacity: 0~1(调整整个元素透明度0-1)
rgba()/transprent 只调整背景透明度
默认显示类型与显示类型转换
最新推荐文章于 2022-11-12 17:45:39 发布