带你学习css中显示方式有哪些?

带你学习css中显示方式有哪些?

今天学习css中显示方式

一、显示方式

框的默认显示类型是可以通过 display 的属性进行修改

属性:display

Display取值:

1none :让生成的元素没有框,让生成的元素不显示,隐藏。值一旦设置为none,该元素中的所有内容都不再显示,并且不再占据文档空间。

2block : 块,让任何一个元素像块级一样去显示

1. 块的特点是:

1.独自成行

2.可单独设置宽和高

2..块的使用场合:

1、行内元素,想像块级元素一样的去显示。

2、让块级元素从 隐藏(display:none;) 变为 显示(display:block;)

3inline:行,让任何一个元素像行内元素一样去显示

inline特点:多个元素在一行内显示

inline的使用场合:

1、块级元素变为行内元素

2、行内元素由隐藏(display:none;)变为显示(display:inline)

4inline-block: 行内块,元素本身是行内元素,但是具备块的特点(能够修改宽和高) , <img /> 就是行内块元素

1.Inline-block的使用使用场合:想改变行内元素的宽和高的时候

2、inline-block显示效果

1visibility属性

作用:实现元素可见性(显示/隐藏)

取值:

1visible :默认值,元素可见的。

2hidden:元素不可见,隐藏,但是空间依然占据。

3collapse:用在表格上,可以删除一行或一列,不影响表格的布局。

2opacity属性设置元素的不透明级别

opacity取值:0-1 之间的数字(包括0 1

0 :完全透明

1 : 完全不透明

取值越大,越不透明

3vertical-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: ?

以上就是带你学习css中显示方式有哪些? 的详细内容,更多请关注其它相关文章!

带你学习css中显示方式有哪些?

相关文章:

你感兴趣的文章:

标签云: