一,常用显示类型(3种)
1.块级元素特性(display:block)
块级元素特性:
block: (div/p/dl/form/h1-h6/ol/ul)
1. 独占一行
2. 高度由里面的元素撑开
3. 宽度默认100%(继承父元素宽度)
4. 可以设置外边距/内边距
5. 可以包裹其他任意元素
6. p标签不可包裹块级元素(只存放文本)
2.行内元素特性(display:inline)
行内元素特性:
inline: (a/b/em/i/img/span)
1. 和其他行内元素处于同一行
2. 不支持宽高
3. 上下外边距无效,auto无效(不支持auto居中)
4. 内边距只对内联元素产生影响.无视块元素
5. 标签之间的空格解析
6. a标签能包裹块级元素(特殊,区域链接)
3.行内块元素特性(display:inline-block)
行内块元素特性: (集合两种盒模型的特征)
inline-block: (input),img
1. 有行内元素和块级元素共有的特性
2. 支持宽高
3. 上下外边距有效,auto无效(不支持auto居中)
4. 内边距只对内联元素产生影响.无视块元素
5. 标签之间的空格解析
6. img标签不是行内块元素(是行内元素,但是可以设置宽高，这源自于历史…)
二,类型相互转换
display:inline 将元素转换为行内元素
display:block 将元素转换为块级元素
display:inline-block 将元素转换为行内块级元素 (有行内元素和块级元素的共同特性)
三,元素的显示与隐藏
display:none 隐藏不占据空间
display:block 显示
上面这两个一般与:hover伪元素选择器使用
扩展
还有另一种显示隐藏,透明度
opacity:0 透明度为0
opacity:1透明度为1
网友评论