CSS 尺寸补白

2024-03-27 18:26:40

行内盒子 display:inline-block;
内边距,距离左边15像素 padding-left:15px;
内边距,距离顶部15像素 padding-top:15px;
外边距,紧贴页面左边的线 margin-left:0;
居中 margin: 0 auto;
绝对定位 position:absolute;
相对定位 position:relation;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>尺寸 补白</title>
    <meta name="Keywords" content="关键字">
    <meta name="description" content="简介">
    <!-- 行内盒子 display:inline-block;
        内边距,距离左边15像素 padding-left:15px;
        内边距,距离顶部15像素 padding-top:15px;
        外边距,紧贴页面左边的线 margin-left:0;
        居中 margin:0 auto;
        绝对定位 position:absolute;
        相对定位 position:relation;
     -->
</head>
<style>
    /*span, a {
        display: block;
        width: 300px;
        height: 200px;
        background-color: aqua;
    }*/

    .aa {
        /*行内盒子 display:inline-block;*/
        display: inline-block;
        /*最小宽度 min-width:100px;*/
        min-width: 100px;
        background-color: aqua;
    }

    .box {
        box-sizing: border-box;
        width: 200px;
        height: 200px;
        border: 1px solid gray;
        /*内边距,距离左边15像素*/
        padding-left: 15px;
        padding-top: 15px;
        /*紧贴页面左边的线*/
        margin-left: -8px;
        /*居中*/
        margin: 0 auto;
        /*position: absolute;*/
    }

    .cc {
        width: 50px;
        height: 50px;
        background-color: #10f574;
        border-radius: 50%;
        /*绝对定位 absolute*/
        /*position: absolute;*/
        /*相对定位 relative*/
        /*position: relative;*/
        /*position: absolute;*/
        /*!*右 right; 底部 bottom*!*/
        /*right: 0;*/
        /*bottom: 0;*/
    }

    .ad {
        width: 150px;
        height: 50px;
        background-color: green;
        /*左浮动 float:left;*/
        float: left;
        margin-right: 5px;
    }

    .first {
        margin-left: 0;
    }

    .last {
        margin-left: 0;
        float: right;
    }
</style>
<div class="ad first"></div>
<div class="ad"></div>
<div class="ad"></div>
<div class="ad"></div>
<div class="ad last"></div>
<hr>
<div class="box">box1
    <div class="cc"></div>
</div>
<div class="box">box2</div>
<hr>
<body>
<span>雪中悍刀行</span>
<br>
<a href="">hello</a>
<hr>
<span class="aa">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, nobis?</span>
</body>
</html>

码农公寓

相关文章