CSS盒子模型基础知识(23个案例+代码+效果图)

目录

1.边框样式

案例：制作一个边框为实线的正方形

1）代码编辑

2）效果

案例：制作一个边框为虚线的正方形

1）代码

2）效果

案例：制作一个边框为点线的正方形

1）代码

2）效果

案例：制作一个边框为双实现的正方形

1）代码

2）效果

案例：制作一个四个边框样式都不同的正方形

1）代码

2）实现

2.边框宽度

案例定义一个四个边框宽度都不同的正方形

1）代码

2）效果

3.边框颜色

案例:制作四个边框的颜色都不同的实线边框

1）代码

2）效果

案例:制作四个边框颜色都一样的双实线边框

1）代码

2）效果

4.内边距属性

案例：制作一个四个内边距都不一样的图片框

1）代码

2）效果

案例：制作一个四个内边距都一样的图片框

1）代码

2）效果

5.外边距属性

案例：制作一个四个外边框距离都不一样的盒子

1）代码

2）效果

案例：制作一个四个外边框距离都一样的盒子

1）代码

2）效果

6.设置背景色

案例：制作一个红色的div盒子和一个蓝色的div盒子

1）代码

2）效果

7.设置背景图像

案例:为一个div盒子设置背景图

1）代码

2）效果

8.设置图像平铺

案例：设置图像平铺

1）代码

2）效果

9.设置背景图像的位置

案例：图像在盒子的左边

1）代码

2）效果

案例：图像在盒子的右边

1）代码

2）效果

案例：图像在盒子的上边

1）代码

2）效果

案例：图像在盒子的下边

1）代码

2）效果

案例：图像在盒子的中间

1）代码

2）效果

10.设置背景图像固定

案例：固定图像到盒子的指定位置

1）代码

2）效果

11.盒子的宽和高

案例制作一个长方形

1）代码

2）效果

案例制作一个正方形

1）代码

2）效果

1.边框样式

border-style属性用于设置边框样式

none 没有边框
solid 边框为实线
dashed 边框为虚线
dotted 边框为点线
double 边框为双实线

案例：制作一个边框为实线的正方形

1）代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作一个边框为实线的正方形</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border-style: solid;

        }
    </style>
</head>
<body>
    <div></div>
    
</body>
</html>

2）效果

案例：制作一个边框为虚线的正方形

1）代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作一个边框为虚线的正方形</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px dashed #000;
        }
    </style>
</head>
<body>
    
    <div></div>
</body>
</html>

2）效果

案例：制作一个边框为点线的正方形

1）代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作一个边框为点线的正方形</title>
    <style>
        div{
            width: 200px;
            height: 200px;

            border-style: dotted;
        }
    </style>
</head>
<body>
    <div></div>
    
</body>
</html>

2）效果

案例：制作一个边框为双实现的正方形

1）代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作一个边框为双实现的正方形</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border-style: double;
        }
    </style>
    
</head>
<body>
    <div></div>
    
</body>
</html>

2）效果

案例：制作一个四个边框样式都不同的正方形

1）代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作一个四个边框样式都不同的正方形</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border-top-style: solid;
            border-right-style: dashed;
            border-bottom-style: dotted;
            border-left-style: double;
        }
    </style>
</head>
<body>
    <div></div>
    
</body>
</html>

2）实现

2.边框宽度

border-width定义边框的宽度

案例定义一个四个边框宽度都不同的正方形

1）代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作一个四个边框宽度都不同的正方形</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border-top-width: 2px;
            border-right-width: 4px;
            border-bottom-width: 6px;
            border-left-width: 8px;
        }
    </style>
</head>
<body>
    <div></div>
    
</body>
</html>

2）效果

3.边框颜色

border-color属性定义边框的颜色

案例:制作四个边框的颜色都不同的实线边框

1）代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作四个边框的颜色都不同的实线边框</title>
    <style>
        .myDiv{
            width: 200px;
            height: 200px;
            border-style: solid;
            border-top-color: red;
            border-right-color: green;
            border-bottom-color: blue;
            border-left-color: yellow;
        }
    </style>
</head>
<body>
    <div class="myDiv"></div>
    
</body>
</html>

2）效果

案例:制作四个边框颜色都一样的双实线边框

1）代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作四个边框颜色都一样的双实线边框</title>
    <style>
        .myDiv{
            width: 200px;
            height: 200px;
            border-style: double;
            border-color: #2ff340;
        }
    </style>
</head>
<body>
    <div class="myDiv">
        
    </div>
</body>
</html>

2）效果

4.内边距属性

padding属性设置内边距

案例：制作一个四个内边距都不一样的图片框

1）代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作一个四个内边距都不一样的图片框</title>
    <style>
        .myDiv{
            width: 200px;
            height: 200px;
            padding-top: 50px;
            padding-right: 100px;
            padding-bottom: 150px;
            padding-left: 200px;
            border: 2px solid #000;
            
        }
    </style>
</head>
<body>
    <img class="myDiv" src="./aImg.png">
    
</body>
</html>

2）效果

案例：制作一个四个内边距都一样的图片框

1）代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作一个四个内边距都一样的图片框</title>
    <style>
        .myDiv{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            padding: 20px;

        }
    </style>
</head>
<body>
    <img class="myDiv" src="./aImg.png" >

    
</body>
</html>

2）效果

5.外边距属性

margin属性是设置外边框距离，距离与距离之间不同

案例：制作一个四个外边框距离都不一样的盒子

1）代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作一个四个外边框距离都不一样的盒子</title>
    <style>
        .outDiv{
            width: 260px;
            height: 260px;

            border: solid 1px #cc1717;
            padding: 0px;
        }
        .inDiv{
            width: 200px;
            height: 200px;
            border: solid 1px #8383c9;
            margin-top: 5px;
            margin-right: 10px;
            margin-bottom: 15px;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div class="outDiv">
        <img class="inDiv" src="./aMouse.png">
    </div>

    
</body>
</html>

2）效果

案例：制作一个四个外边框距离都一样的盒子

1）代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作一个四个外边距都一样的盒子</title>
    <style>
        .outDiv{
            width: 200px;
            height: 200px;
            border: 2px solid #000;
            margin: 50px;
            
        }
        .inDiv{
            width: 180px;
            height: 180px;
            border: 2px solid #000;
            margin: 8px;
        }

    </style>
</head>
<body>
    <div class="outDiv">
        <img class="inDiv" src="./aMouse.png"/>
    </div>
       
</body>
</html>

2）效果

6.设置背景色

background-color用于设置标签的背景颜色

案例：制作一个红色的div盒子和一个蓝色的div盒子

1）代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作一个红色的div盒子和一个蓝色的div盒子</title>
    <style>
        .redDiv{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .blueDiv{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="redDiv"></div>
    <div class="blueDiv"></div>
    
</body>
</html>

2）效果

7.设置背景图像

background-image属性设置盒子的背景图

案例:为一个div盒子设置背景图

1）代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>为一个div盒子设置背景图</title>
    <style>
        .myClassStyle{
            width: 512px;
            height: 512px;
            background-image: url("./aImg.png");
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="myClassStyle"></div>
    
</body>
</html>

2）效果

8.设置图像平铺

通过background-repeat设置图像平铺

repeat图像重复

no-repeat图像不重复

案例：设置图像平铺

1）代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置图像平铺</title>
    <style>
        .myClassStyle{
            background-image: url("./aMouse.png");
            background-repeat: repeat;
            background-position: center;
            width: 4000px;
            height: 3000px;
        }
    </style>
</head>
<body>
    <div class="myClassStyle"></div>
    
</body>
</html>

2）效果

9.设置背景图像的位置

background-postition用于设置图像的位置

案例：图像在盒子的左边

1）代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像在盒子的左边</title>
    <style>
        .onediv{
            width: 800px;
            height: 800px;
            border: 1px solid #000;
            padding: 20px;
            background-image: url(./aImg.png);
            background-repeat: no-repeat;
            background-position: left;
        }
    </style>
</head>
<body>
    
    <div class="onediv"></div>
</body>
</html>

2）效果

案例：图像在盒子的右边

1）代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片在盒子的右边</title>
    <style>
        .myDiv{
            width: 800px;
            height: 800px;
            border: 1px solid #000;
            background-image: url("./aImg.png");
            background-position: right;
            background-repeat: no-repeat;

        }
    </style>
</head>
<body>
    <div class="myDiv"></div>
    
</body>
</html>

2）效果

案例：图像在盒子的上边

1）代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像在盒子的上面</title>
    <style>
        .myDiv{
            width: 1000px;
            height: 1000px;
            border: 1px solid #000;

            background-repeat: no-repeat;
            background-image: url("./aImg.png");
            background-position: top ;

        }

    </style>
</head>
<body>
    <div class="myDiv">
       
    </div>
    
</body>
</html>

2）效果

案例：图像在盒子的下边

1）代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像在盒子的下边</title>

    <style>
        .mydiv{
            width: 800px;
            height: 800px;
            border: 1px solid #000;
            padding-bottom: 150px;
            background-image: url("./aMouse.png");
            background-repeat: no-repeat;
            background-position: bottom;
        }
    </style>
</head>
<body>
    <div class="mydiv"></div>
    
</body>
</html>

2）效果

案例：图像在盒子的中间

1）代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像在盒子的中间</title>
    <style>
        .mydiv{
            width: 800px;
            height: 800px;
            background-color: #ccc;
            background-image: url(./aImg.png);
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>
<body>
    <div class="mydiv"></div>
</body>
</html>

2）效果

10.设置背景图像固定

通过background-position和background-attachment:fixed属性固定图像位置

案例：固定图像到盒子的指定位置

1）代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定图像到指定的位置</title>
    <style>
        .myDivStyle {
            width: 800px;
            height: 800px;
            background-image: url("./aImg.png");
            background-repeat: no-repeat;
            background-position: 50px 50px;
            background-attachment: fixed;
            border: 2px solid salmon;
        }
    </style>

</head>

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

</body>

</html>

2）效果

11.盒子的宽和高

width属性指定盒子的宽度

height属性指定盒子的高度

案例制作一个长方形

1）代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作一个长方形</title>
    <style>
        .mydiv{
            width: 200px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="mydiv"></div>
</body>
</html>

2）效果

案例制作一个正方形

1）代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作一个正方形</title>
    <style>
        .myDiv{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="myDiv"></div>
    
</body>
</html>