块元素如何与行内元素转化-木庄网络博客

本文摘自PHP中文网，作者醉折花枝作酒筹，侵删。

本篇文章给大家详细介绍一下块元素与行内元素转化的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .div1{
                width: 200px;
                height: 200px;
                background-color: lightyellow;
                border: 1px solid lightcoral;
                margin: 0px auto;
            }
            .s1{
                /*行内元素设置宽和高未必有效
                *块元素设置宽和高一定有效的
                * */
                width: 100px;
                height: 100px;
                background-color: greenyellow;
                border: 1px solid blue;
                /*span 是一个行内元素  
                * 行内元素没有盒子模型
                * 行内元素没有办法设置内边距和外边距特征
                * 只有块标签才有盒子模型  才可以设置内边距和外边距
                * 如果一个行内标签 非要使用盒子模型那么可以将行内元素转换为块元素
                * display  block 行内转换为块    inline 块转换为行内
                *  */
                display: block;
                margin-top: 20px;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <span class="s1">今天是3月6号</span>
        </div>
    </body>
</html>