盒子模型（box model)
无论是div，span，还是a都是盒子
但是，图片，表单元素疑虑看作文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容
盒子中的区域：
一个盒子中主要的属性就5个：width，height，padding，border，margin。
- width和height :内容的宽度和高度
- padding：内边距
- border：边框
- margin:外边距
<style>
div{
width:200px;
height:200px;
border:1px solid red;
padding:50px;
}
</style>标准盒模型和IE盒模型
我们目前所学习的知识中，以标准盒子模型为准
标准盒子模型：（抄录GitHub大佬图片）
IE盒子模型
上图显示：
在css盒子模型规定了元素处理元素的几种方式：
- width和height
- padding
- border
- margin
css盒模型和IE盒模型的区别：
- 在标准盒子模型中，width和height指的是内容区域的宽度和高度。增加内边距，边框和外边距不会影响内容区域的尺寸，但会增加元素框的总尺寸。
- IE盒模型中，width和height指的是内容区域+border+padding的宽度和高度
<body>标签也有margin
正确理解是参考大佬总结：整个网页最大的盒子是<document>, 即浏览器，而<body>是<decument>的儿子。
认识width、heigh
盒子的真实占有宽度=左border + 左padding + width + 右border+ 右padding
盒子变胖是灾难性的，这会把别的盒子挤下去
认识padding
padding区域也有颜色
padding有四个方向
小属性的写法：
padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
padding-left: 100px;
综合属性的学法：（上下左右）
padding：30px 20px 40px 100px如果写了四个值，则顺序为：上下左右
如果写了三个值，则顺序为：上，左和右，下
如果写了两个值，则顺序为：上和下，左和右
用小属性层叠大属性，比如：
padding: 20px;
padding-left: 30px;对于盒子模型：
而
padding-left: 30px;
padding: 20px;第一行的小属性无效，因为被第二层的大属性叠掉了
一些元素默认带有padding
所以我们做站的时候，为了便于控制，总是喜欢清除这个默认的padding
可以用*进行清楚
*{
margin: 0;
padding: 0;
}但是，*的效率不高，所以我们选择并集选择器，罗列所有的标签（不用背，右专业的清除默认样式的样式表，之后学习）
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;
padding:0;
}认识border
border就是边框，边框三要素：像素(粗细），线型，颜色
.div1{
width: 10px;
height: 10px;
border: 2px solid red;
}
border-style
比较稳定的border-style就几个：solid，dashed，dotted
border拆分
booder是一个大综合属性。
比如说：border：1px solid red;
就是把上下左右这四个方向的边框，都设置为1px宽度，线型实线，red颜色
border属性是能够被拆开的，有两大种拆开的方式：
(1)按三要素拆开：border-width,border-style,border-color
(2)按方向拆开：border-top,border-right,border-bottom,border-left
一个border属性是由三个小属性综合而成的。如果小属性后面是空格隔开的多个值，那么就是上下左右的顺序。
border-width:10px 20px;
border-style:solid dashed dotted;
border-color:red green blue yellow;可以自己试试
工作中用什么？
什么简单用什么，但要懂得，小属性层叠大属性
如要实现下方表示，写法如下
border:10px solid red;
border-right-color:blue;
border:10px solid red;
border-style:solid dashed;border也可以没有
border:none也可以一条边没有：
border-left:none;也可以调整左边框宽度为0
border-left-width:0;border-image属性
比如
border-image:url(.img.png) 30 round;举例：利用border属性画一个三角形：
<!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>
div{
width:0;
height: 0;
border: 50px solid green;
border-top-color:red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>（2)取消底部
<!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>
div{
width:0;
height: 0;
border: 50px solid green;
border-top-color:red;
border-bottom: none;
}
</style>
</head>
<body>
<div></div>
</body>
</html>（3）最后设置border的左右为白色或者透明
<!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>
div{
width:0;
height: 0;
border: 50px solid white;
border-top-color:red;
border-bottom: none;
}
</style>
</head>
<body>
<div></div>
</body>
</html>举例2：利用border属性画一个三角形
<!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>
.div1{
width: 0;
height: 0;
border-top: 30px solid red;
border-left:20px solid transparent;
border-right: 20px solid transparent;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>标签：盒子,solid,模型,padding,width,red,border,CSS From： https://blog.csdn.net/2301_80227523/article/details/139182596资源来自github大佬贴，由链接在隔壁贴