欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-07 15:33:26
...
今天学习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,显示方式