Rumah >hujung hadapan web >tutorial css >带你学习css中显示方式有哪些？
带你学习css中显示方式有哪些？
- 零下一度asal
- 2017-05-03 15:49:062118semak imbas
今天学习css中显示方式
一、显示方式：
框的默认显示类型是可以通过 display 的属性进行修改
属性：display
Display的取值：
1、none ：让生成的元素没有框，让生成的元素不显示，隐藏。值一旦设置为none，该元素中的所有内容都不再显示，并且不再占据文档空间。
2、block : 块，让任何一个元素像块级一样去显示
1. 块的特点是：
1.独自成行
2.可单独设置宽和高
2..块的使用场合：
1、行内元素，想像块级元素一样的去显示。
2、让块级元素从 隐藏(display:none;) 变为 显示(display:block;)
3、inline：行，让任何一个元素像行内元素一样去显示
inline的特点：多个元素在一行内显示
inline的使用场合：
1、块级元素变为行内元素
2、行内元素由隐藏(display:none;)变为显示(display:inline)
4、inline-block： 行内块，元素本身是行内元素，但是具备块的特点(能够修改宽和高) ， 6ed09268cbdd0015bce8dcbbdfa9bfe4 就是行内块元素
1.Inline-block的使用使用场合：想改变行内元素的宽和高的时候
2、inline-block的显示效果
1、visibility属性
作用：实现元素可见性(显示/隐藏)
取值：
1、visible ：默认值，元素可见的。
2、hidden：元素不可见，隐藏，但是空间依然占据。
3、collapse：用在表格上，可以删除一行或一列，不影响表格的布局。
2、opacity属性：设置元素的不透明级别
opacity取值：0-1 之间的数字（包括0 和 1）
0 ：完全透明
1 : 完全不透明
取值越大，越不透明
3、vertical-align属性： 设置垂直对齐方式
取值： top / middle /bottom（上，中，下）
baseline : 基线对齐（默认对齐方式）
特殊使用方式：
针对行内块(img)元素，可定义边上的文本与当前元素的对齐方式。
例如：选择我想让下面的文本中，链接2变为行内块，让链接3变为块，链接4消失
<!DOCTYPE html >
<head>
<title>文本格式</title>
<meta charset="utf-8" />
<style>
a{
border:1px solid black;
width:70px;
height:30px;
background-color:silver;
}
</style>
</head>
<body>
<a href="#">链接1</a>
<a href="#" style="display:inline-block;">链接2</a>
<a href="#" style="display:block;">链接3</a>
<a href="#"style="display:none;">>链接4</a>
</body>
</html>4、光标属性cursor：
默认情况，网页上的光标显示会根据不同的元素显示不同的样子。
超链接：手状
文本： I
按钮：箭头
在css中，可以通过 cursor 属性改变光标显示效果，给客户一种可视化的暗示。
属性：cursor
取值：pointer ： 手状
default: 默认
crosshair: + 状
text: I 状
wait: 等待
help: ?
Atas ialah kandungan terperinci 带你学习css中显示方式有哪些？ . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!