<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>内联元素的盒模型</title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
                background-color: red;
            }
            
            p{
                background-color: yellow;
            }
            /* 
                浏览器为了在页面中没有样式时,也可以有一个较好的显示效果
                    所以为很多元素都设置了一些默认的margin和padding
                    而他的这些默认样式,正常情况下我们是不需要使用的.
                    
                所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉
                
             */
            
            
            /* 
                清除浏览器默认样式
             */
            *{
                margin: 0;
                padding: 0;
            }
            
            .sp1{
                background-color: green;
                
                /* 
                    内联元素不能设置宽高
                 */
                width: 100px;
                height: 100px;
                
                /* 
                    内联元素可以设置水平内边距
                 */
                padding-left: 100px;
                padding-right: 100px;
                
                /* 
                    内联元素可以设置垂直方向内边距,但是不会影响页面的布局
                 */
                padding-top: 50px;
                padding-bottom: 50px;
                
                /* 
                    内联元素可以设置边框,但是垂直的边框不会印象页面的布局
                 */
                border: 10px blue solid;
                
                /* 
                    内联元素支持水平方向的外边距
                    水平方向的外边距不会重叠,而是取合
                 */
                margin-right: 100px;
                
                /* 
                    内联元素不支持垂直外边距
                 */
                margin-top: 10px;
                
            }
            
            .sp2{
                
                /* 
                    设置左边距
                 */
                background-color: green;
                margin-left: 100px;
            }
        </style>
    </head>
    <body>
        <span class="sp1">这是内联</span>
        <span class="sp2">这是内联</span>
        <div class="box">
            
        </div>
        <p>这是p标签</p>
        <p>这是p标签</p>
        <p>这是p标签</p>

    </body>
</html>
posted on 2021-06-30 20:21 leiyanting 阅读(57) 评论(0) 收藏举报
刷新页面返回顶部
导航
