带你学习css中显示方式有哪些？ -css教程-PHP中文网

首页

web前端

css教程

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

零下一度

May 03, 2017 pm 03:49 PM

今天学习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 状

wait: 等待

help: ?

以上是带你学习css中显示方式有哪些？的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7469

CakePHP 教程

1376

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

bootstrap按钮怎么用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按钮？引入 Bootstrap CSS创建按钮元素并添加 Bootstrap 按钮类添加按钮文本

bootstrap怎么调整大小 Apr 07, 2025 pm 03:18 PM

要调整 Bootstrap 中元素大小，可以使用尺寸类，具体包括：调整宽度：.col-、.w-、.mw-调整高度：.h-、.min-h-、.max-h-

bootstrap怎么看日期 Apr 07, 2025 pm 03:03 PM

答案：可以使用 Bootstrap 的日期选择器组件在页面中查看日期。步骤：引入 Bootstrap 框架。在 HTML 中创建日期选择器输入框。Bootstrap 将自动为选择器添加样式。使用 JavaScript 获取选定的日期。

bootstrap怎么插入图片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入图片有以下几种方法：直接插入图片，使用 HTML 的 img 标签。使用 Bootstrap 图像组件，可以提供响应式图片和更多样式。设置图片大小，使用 img-fluid 类可以使图片自适应。设置边框，使用 img-bordered 类。设置圆角，使用 img-rounded 类。设置阴影，使用 shadow 类。调整图片大小和位置，使用 CSS 样式。使用背景图片，使用 background-image CSS 属性。

bootstrap怎么写分割线 Apr 07, 2025 pm 03:12 PM

创建 Bootstrap 分割线有两种方法：使用标签，可创建水平分割线。使用 CSS border 属性，可创建自定义样式的分割线。

bootstrap怎么设置框架 Apr 07, 2025 pm 03:27 PM

要设置 Bootstrap 框架，需要按照以下步骤：1. 通过 CDN 引用 Bootstrap 文件；2. 下载文件并将其托管在自己的服务器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根据需要编译 Sass/Less；5. 导入定制文件（可选）。设置完成后，即可使用 Bootstrap 的网格系统、组件和样式创建响应式网站和应用程序。