显示
1、显示方式
1、what
每个元素都有自己的显示方式，显示方式决定了元素的显示特点
2、属性
属性：display
取值：
1、none
不显示元素–隐藏
特点：脱离文档流–不占据页面空间
2、block
像块级元素一样显示元素
场合：将行内元素变为块级元素
3、inline
像行内元素一样显示元素
注意：不要块级元素(div/p…)改变成行内元素
4、inline-block
像行内块元素一样显示元素
行内块：多个元素会在一行内显示，但是允许修改尺寸
场合：将行内元素改变为行内块，以便修改尺寸
<body>
<a href="#">默认显示</a>
<a style="display:none;" href="#">display:block</a>
<a style="display:inline;" href="#">display:inline</a>
<a style="display:inline-black;" href="#">display:inline-block</a>
</body>
2、显示效果
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
3、光标
属性：cursor
取值：
1、default
2、pointer
小手
3、crosshair
+
4、text
I
5、wait
等待
6、help
?
body {
cursor: url('some-cursor.ico'), default;
}
扫一扫
6918
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
