如何迅速熟练掌握盒子模型？（学习方法很重要）
原创
在前面文章冲浪笔记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>
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>
（2）可设置值
①一个值：表示四个方向都设值padding: 10px;
②两个值：1值是上下，2值是左右padding: 10px 5px;
③三个值：1值是上，2值是左右，3值是下padding: 10px 5px 15px;
④四个值：顺时针，上右下左padding: 10px 5px 15px 20px;
（3）box-sizing：border-box属性：设置padding时，不改变原来设置的宽高（即padding用的是content的面积）
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>
（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>
②可以单独设置某角：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>
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>
（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>
解决措施：用在父级写属性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>
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>
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
