css各种元素最原始的表现

1，<span>标签在<div>里的位置---左上 

<div class="box">
    <span>文件上传</span>
</div>
*{
            padding: 0;
            margin: 0;
        }
        .box{
            width:200px;
            height:200px;
            background-color: #eb7350;
        }

        .box span{
            padding:10px;
            background-color: #1AA094;
        }

2，当一个div里是一个div的时候，子div在父div里的位置是上部

3，如果我们想要使用line-height使“文件上传”居中，那我们必须使包裹它的标签是inline属性，inline-block不行。

 <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width:200px;
            height:200px;
            line-height:200px;
            background-color: #eb7350;
        }
        .upload{
            display: inline;
            height:30px;
            width:200px;
            background-color: #1AA094;
        }

    </style>
</head>
<body>
<div class="box">
    <div class="upload">文件上传</div>
</div>

 4,如果我们想让文件上传几个字靠右垂直居中，我想到了使用float:right属性来实现，发现，确实靠右了，但不垂直居中了

 <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            display: inline-block;
            width:200px;
            height:200px;
            line-height:200px;
            background-color: #eb7350;
        }
        .upload{
            float:right;
            height:30px;
            width:100px;
            background-color: #1AA094;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="upload">文件上传</div>
</div>

为什么？怎样解决呢？？？

我使用了绝对定位，使"文件上传"垂直居中

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width:200px;
            height:200px;
            background-color: #eb7350;
            position:relative;
        }
        .upload{
            height:30px;
            width:100px;
            display:inline;
            background-color: #1AA094;
            position:absolute;
            right:0;
            top:85px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="upload">文件上传</div>
</div>
</body>

 

posted @ 2018-01-08 10:52  千寻的天空之城  阅读(360)  评论(0)  编辑  收藏  举报