在前面文章冲浪笔记4中仅对盒子模型进行介绍,感兴趣的小伙伴也可以去看看,这篇文章将具体描述,并推荐一个自己觉得好用的记忆方法,喜欢的小伙伴可以收藏🧐
常用到的:
①居中效果margin: auto;
②圆角border-radius: 10px;
③三合一边框boder: 10px solid red;
1、CSS假定每⼀个标签都是⼀个矩阵,围绕着这个矩阵,从内到外展开⼀系列的属性来描述它
2、组成:content、padding、boder、margin
1、俯视一个完整的篮球场,篮球场内有⼀个箱⼦📦,箱⼦⾥有⼀颗篮球🏀
⼜有⼀个箱⼦📦,箱⼦⾥也有⼀颗篮球🏀
①篮球🏀的大小就是content
②篮球🏀到箱⼦📦的距离就是padding
③箱⼦📦的厚度就是boder
④两两箱⼦📦的距离就是margin
2、这样每次在思考用哪个的时候,可以想象一下自己需要的是哪个东西,不会觉得盒子模型就是4个单词啦
<!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>
(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的面积)
(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>
(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(盒子两端到浏览器边界的距离一样)
<!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>
<!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 删除。