如何迅速熟练掌握盒子模型？（学习方法很重要）

申小兮
53 阅读2分钟

在前面文章冲浪笔记4中仅对盒子模型进行介绍，感兴趣的小伙伴也可以去看看，这篇文章将具体描述，并推荐一个自己觉得好用的记忆方法，喜欢的小伙伴可以收藏🧐

常用到的：

①居中效果margin: auto;

②圆角border-radius: 10px;

③三合一边框boder: 10px solid red;

一、概念

1、CSS假定每⼀个标签都是⼀个矩阵，围绕着这个矩阵，从内到外展开⼀系列的属性来描述它

2、组成：content、padding、boder、margin

二、记忆方法

1、俯视一个完整的篮球场，篮球场内有⼀个箱⼦📦，箱⼦⾥有⼀颗篮球🏀

⼜有⼀个箱⼦📦，箱⼦⾥也有⼀颗篮球🏀

①篮球🏀的大小就是content

②篮球🏀到箱⼦📦的距离就是padding

③箱⼦📦的厚度就是boder

④两两箱⼦📦的距离就是margin

2、这样每次在思考用哪个的时候，可以想象一下自己需要的是哪个东西，不会觉得盒子模型就是4个单词啦

三、具体介绍

1、content：内容，由width、height组成

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: rgb(177, 239, 130);
        }
    </style>
</head>
<body>
    <div class="box">篮球🏀</div>
</body>
</html>

image.png

2、padding：内边距，内容到边框的距离
（1）四个方向padding-left/right/top/bottom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            padding-left: 10px;
            padding-right: 5px;
            padding-bottom: 15px;
            padding-top: 20px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

image.png

（2）可设置值
①一个值：表示四个方向都设值padding: 10px;

image.png ②两个值：1值是上下，2值是左右padding: 10px 5px;

image.png

③三个值：1值是上，2值是左右，3值是下padding: 10px 5px 15px;

image.png ④四个值：顺时针，上右下左padding: 10px 5px 15px 20px;

image.png （3）box-sizing：border-box属性：设置padding时，不改变原来设置的宽高（即padding用的是content的面积）

image.png

3、boder：边框
（1）缺一不可的三部分：
①边框样式：border-style
②边框颜色：border-color
③边框粗细：border-width

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border-style: solid;/* 常用实线 */
            border-color: rgb(135, 235, 155);
            border-width: 10px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

image.png

（2）可单独合并设置某方向上的border
①boder-⽅向-style/color/width
border-bottom-color: blueviolet;
border-bottom-style: solid;
border-bottom-width: 5px;
②快速写法：border-top: 10px solid rgb(135, 235, 190);
（3）box-sizing：border-box属性：设置boder时，不改变原来设置的宽高（即boder用的是content的面积）
（4）圆角：border-radius
①正方形圆角=边长一半时，是圆形border-radius: 50px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border-radius: 50px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

image.png ②可以单独设置某角：border-top/bottom-left/right-radius

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border-bottom-right-radius: 20px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

image.png

4、margin：外间距，边框到边框的距离
（1）四个方向：margin-top/bottom/left/right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin-top: 10px;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

image.png

（2）背景颜色会自动填充到margin以内的区域，内容一直在content区域
（3）居中效果margin: auto（盒子两端到浏览器边界的距离一样）

四、盒子模型存在的问题

1、两两标签为父子关系：子级设置的margin-top等等会传递给父级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
        .son{
            width: 50px;
            height: 50px;
            background-color: blueviolet;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

image.png

解决措施：用在父级写属性padding-top: 30px;box-sizing: boder-box;代替子级的margin-top: 30px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 100px;
            height: 100px;
            background-color: skyblue;
            padding-top: 30px;
            box-sizing: border-box;
        }
        .son{
            width: 50px;
            height: 50px;
            background-color: blueviolet;
            /* margin-top: 30px; */
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

image.png

2、两两标签为兄弟关系：同样的属性会被叠加，取其中的最大值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        .son{
            width: 50px;
            height: 50px;
            background-color: blueviolet;
            margin-bottom: 10px;
        }
        .son2{
            width: 50px;
            height: 50px;
            background-color: rgb(153, 226, 43);
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
        <div class="son2"></div>
    </div>
</body>
</html>

image.png

avatar
文章
阅读
粉丝