• 技术文章 >web前端 >前端问答

    css怎么改行元素为块元素

    青灯夜游青灯夜游2021-09-03 16:36:54原创120

    在css中,可以利用display属性来将行元素转换为块元素,该属性用于规定元素应该生成的框的类型,只需要给行元素添加“display:block;”样式即可改为块元素。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    行元素不能设置大小 ,如span

    只有块元素能设置大小,如div

    1.png

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- <link rel="stylesheet" href="style.css">    -->
        <style>
           div {
               width: 100px;
               height: 100px;
               background-color: pink;
           }
    
            a {
               width: 100px;
               height: 100px;
               background-color: pink;
           }
        </style>
    </head>
    
    <body>
        <div>块元素</div>
        <a href="#">行元素</a>
    </body>
    
    </html>

    在这里插入图片描述

    那么将行元素转为块元素?

    在CSS中,通过display:block可以将行元素转化为块元素

    在这里插入图片描述

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- <link rel="stylesheet" href="style.css">    -->
        <style>
            div {
                width: 100px;
                height: 100px;
                background-color: pink;
            }
    
            a {
                width: 100px;
                height: 100px;
                background-color: pink;
                display: block
            }
        </style>
    </head>
    
    <body>
        <div>块元素</div>
        <a href="#">行元素</a>
    </body>
    
    </html>

    在这里插入图片描述

    推荐学习:CSS视频教程

    以上就是css怎么改行元素为块元素的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 行元素 块元素
    上一篇:css怎么让字之间的间隔变大 下一篇:js怎么修改html的title标题
    线上培训班

    相关文章推荐

    • HTML5+CSS3动态画出一个大象• 教你使用css3给字体添加立体效果(附代码)• 使用CSS快速更改PNG图像的颜色(两种方法)• 如何使用HTML5+CSS3动态画一个笑脸

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网