内联盒子 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <meta charset="utf-8">
        <style type="text/css">
            .box1{
                width: 200px;
                height: 200px;
                border: 1px solid deeppink;
                background: pink;
            }
            .s1{
                /*
                内容区、内边距、边框、外边距
                内联元素不能设置width和height（是没有作用的）
                */
                height: 100px;
                width: 100px;
                /*
                设置水平内边距，内联元素可以设置水平方向的边距，会影响布局，就是会挤其他的盒子
                */
                padding-left: 100px;
                padding-right: 100px;
                /*
                垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局，其他盒子不会被挤开，不会动。
                */
                /*
                为元素设置边框
                内联元素可以设置边框，但是垂直的边框不会影响到页面的布局
                */
                /*
                水平外边距
                内联元素支持水平方向的外边距，会影响布局
                水平方向的外边距不会重叠，而是求和
                内联元素不支持垂直外边距
                */
            }
        </style>
    </head>
    <body>
        <span class="s1">我是一个span</span>
        <span>我是一个span</span>
        <span>我是一个span</span>
        <span>我是一个span</span>
        <div class="box1">
            
        </div>
            
        
    </body>
</html>

 

posted @ 2018-06-15 11:50  你若精彩，蝴蝶自来  阅读(288)  评论(0)    收藏  举报