一、显示方式
1、what
每个元素都有自己的显示方式,显示方式决定了元素的显示特点
2、属性
属性:display
取值:
1、none
不显示元素--隐藏
特点:脱离文档流--不占据页面空间
2、block
像块级元素一样显示元素
场合:将行内元素变为块级元素
3、inline
像行内元素一样显示元素
注意:不要块级元素(div/p..)改变成行内元素
4、inline-block
像行内块元素一样显示元素
行内块:多个元素会在一行内显示,但是允许修改尺寸
场合:将行内元素改变为行内块,以便修改尺寸
二、显示效果
1、元素可见性
属性:visibility
取值:
1、visible
默认值,元素可见
2、hidden
元素不可见,但依然占据页面空间
3、collapse
用在表格元素上,删除一行或一列时不影响整体表格布局
面试:dispaly:none 与 visibility:hidden之间的区别
display:none;脱离文档流,所以不占空间
visibility:hidden;没有脱离文档流,所以元素隐藏,空间保留
2、透明度
属性:opacity
取值:0.0(完全透明) ~ 1.0(完全不透明)
3、垂直对齐
属性:vertical-align
作用:
1、设置td中的内容垂直对齐方式
2、设置 img 或 行内块元素周围(左右两边)的文本 的垂直对齐方式
取值:
top/middle/bottom
baseline:默认值,基线对齐
注意:
基线对齐方式,会将图片扩大3px
三、光标
属性:cursor
取值:
1、default
2、pointer
小手
3、crosshair
+
4、text
I
5、wait
等待
6、help
?