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

零下一度

发布： 2017-05-03 15:49:06

原创

1983 人浏览过

今天学习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：行内块，元素本身是行内元素，但是具备块的特点(能够修改宽和高) ，就是行内块元素

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 状