手机版 | 登陆 | 注册 | 投稿 | 反馈留言 | 设首页 | 加收藏
网站首页 > 前端开发 > CSS > css技巧 >将元素显示为块级元素的display:block用法

将元素显示为块级元素的display:block用法

时间:2019-02-22    点击: 次    发布者:佚名 - 小 + 大

简单的来说就是设置display:block就是将元素显示为块级元素。

看完了display:block的意思后,如果你还是不太了解,那么我们接着就往下看,看看display:block该怎么用?通过display:block的用法来更进一步的认识display:block的意思。

display:block的用法:

对于所有的块级元素来说都是不需要用display:block来定义的,因为块级元素的默认属性就是block;所以display:block比较常用于像是<a><span>等不是块级元素的元素中,下面我们就来看看具体的示例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        span{

            width: 200px;

            height: 30px;

        }

    </style>

</head>

<body>

    <span style="background-color: red ">php中文网</span>

        <span style="background-color: red ">php中文网</span>

    <span style="background-color: red ">php中文网</span>

</body>

</html>

上述代码是没有用display:block来定义的,效果如下:

从上面的效果图可以很明显的看到,对span设置宽高是没有用的,而且内容都处于同一行,下面我们来看看用display:block定义会是怎样的,代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        span{

            width: 200px;

            height: 30px;

            display: block;

        }

    </style>

</head>

<body>

    <span style="background-color: red ">php中文网</span>

        <span style="background-color: red ">php中文网</span>

    <span style="background-color: red ">php中文网</span>

</body>

</html>

使用display:block的效果如下:

上述效果可以很明显看到对宽高设置有效了并且也都独占于一行。

 


上一篇:CSS中空格的4种写法

下一篇:没有了



Copyright © 2019 天人系列管理系统 版权所有,授权www.rjc.wang使用  Powered by 55TR.COM 运行代码测试页
锐教程网站www.rjc.wang由天天科技荣誉出品