您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

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

2026/1/23 10:36:56发布24次查看
今天学习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: ?
以上就是带你学习css中显示方式有哪些? 的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product