CSS盒子模型, 浮动和定位

2201_75449897

已于 2024-07-20 13:35:28 修改

阅读量101

点赞数 3

文章标签： javascript 前端 css

于 2024-06-18 20:48:07 首次发布

本文链接：https://blog.csdn.net/2201_75449897/article/details/139782983

版权

01-内边距

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 110px;
            height: 110px;
            border: 1px solid red;
            padding-left: -100px;
            /* 内边距可以改变内容所在的位置
            内边距会改变盒子大小 */
            /* 如果、盒子大小不想呗改变  宽度高度 减去所增加的内边距 */
            background-image: url(./images/汉堡.png);
            background-repeat: no-repeat;
            background-position: 0 5px;
            background-size: 10px 10px;
            /* 外边距  改变的是 盒子本身所在的位置*/
            margin: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        脆皮年轻人有救了？“散装养生”正在流行
    </div>
</body>

</html>

02-盒子居中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 800px;
            height: 16000px;
            background-color: #88ff19;
            margin: 0 auto;
            /* 内外边距如果写两个值   表示的是  第一个上下   第二个左右 */
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

03-外边距合并

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .box1 {
            width: 200px;
            height: 200px;
            background-color: purple;
            margin-bottom: 20px;
        }
        
        .box2 {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin-top: 10px;
        } */
        
        .bigbox {
            width: 500px;
            height: 500px;
            background-color: rgb(255, 94, 150);
            border: 1px solid rgba(89, 255, 0, 0);
        }
        
        .smallbox {
            width: 100px;
            height: 100px;
            background-color: #fff568;
            margin-top: 150px;
        }
    </style>
</head>

<body>
    <!-- <div class="box1"></div>
    <div class="box2"></div> -->
    <div class="bigbox">
        <div class="smallbox"></div>
    </div>
</body>

</html>

04-盒子阴影

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 150px;
            height: 150px;
            border: 1px solid red;
            margin: 150px auto;
            box-shadow: 5px 5px 1px 5px blue inset;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

05-浮动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 800px;
            margin: 0 auto;
        }
        
        .obox {
            width: 190px;
            height: 400px;
            border: 1px solid red;
            text-align: center;
            line-height: 100px;
            float: right;
            /* 浮动   元素的对齐方式  左 右 */
            /* display: inline-block;
            margin-left: -2px; */
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="obox">1</div>
        <div class="obox">2</div>
        <div class="obox">3</div>
        <div class="obox">4</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
        <div class="obox">5</div>
       
       
       
    </div>
</body>

</html>

06-浮动带来的影响

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bigbox {
            width: 800px;
            height: 150px;
            background-color: hsl(0, 100%, 62%);
            /* overflow: hidden; */
        }
        
        .smallbox1 {
            width: 150px;
            height: 150px;
            background-color: #fafa17;
            float: left;
        }
        
        .smallbox2 {
            width: 150px;
            height: 150px;
            background-color: #17fa22;
            float: right;
        }
        
        .bigbox2 {
            width: 800px;
            height: 800px;
            background-color: #0f33ff;
        }
    </style>
</head>

<body>
    <div class="bigbox">
        <div class="smallbox1"></div>
        <div class="smallbox2"></div>
    </div>
    <div class="bigbox2"></div>
</body>

</html>

07-作业布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .one {
            width: 100%;
            height: 80px;
            background-color: #edff23;
        }
        
        .two {
            width: 100%;
            height: 150px;
            background-color: #40ff23;
        }
        
        .san {
            width: 100%;
            height: 800px;
            background-color: #23daff;
        }
        
        .bx1 {
            width: 820px;
            height: 80px;
            background-color: #ff11df;
            margin: 0 auto;
        }
        
        .bx2 {
            width: 820px;
            height: 150px;
            background-color: #ff11df;
            margin: 0 auto;
        }
        
        .bx3 {
            width: 820px;
            height: 800px;
            background-color: #ff11df;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="one">
        <div class="bx1"></div>
    </div>
    <div class="two">
        <div class="bx2"></div>
    </div>
    <div class="san">
        <div class="bx3"></div>
    </div>
</body>

</html>