1、盒子模型的概念
W3C建议把网页上所有元素都放在一个个盒模型（box model）中，通过CSS来控制这些盒子的显示属性，以及对这些盒子进行定位，完成整个页面的布局
在CSS视角下，所有HTML元素可以看作盒子、所谓的盒子在HTML中就是一个盛装元素内容的容器。
在web页面中，“盒子”的结构包括厚度、边距、（边缘与盒外其他物体的距离）、填充（填充厚度）等元素，引申到CSS中，就是border、margin和padding，当然，盒子还包括盒子中的内容
盒子由内容区（content）、内边距（padding）、边框（border）、外边距（margin）组成
图源网络
2、盒子的属性
（1）内容区
- 宽width
- 高height
块级元素块级元素 块级元素块级元素可以直接通过CSS设置宽高，但是行内元素默认情况下不可以。如果要设置行内元素的宽高，需在CSS代码中添加display:bolock
eg：
<head>
<style>
#img1{
width:200px;
height: 200px;
border: 1px blue solid;
}
#i1{
width: 300px;
height: 20px;
border: 1px yellow solid;
display: block;
}
</style>
</head>
<body>
<img src="C:\Users\cloud\Desktop\盒子\2.jpg" id="img1">
<ins id="i1">行内元素</ins>
</body>运行效果
（2）边框
-
border-width：设置边框的粗细，数字+px
-
border-style：设置边框的样式（线型）
实线solid、虚线dashed、点线dotted
-
border-color：设置边框的颜色
ps：以上边框属性都可连写
eg：
<style>
#img{
border: 2px solid red;
}
</style>-
border-top：上边框宽度 样式 颜色
-
border-right：右边框宽度 样式 颜色
-
border-bottom：下边框宽度 样式 颜色
-
border-left：左边框宽度 样式 颜色
eg：
<style>
#img1{
border-top:2px solid yellow;
border-right:2px solid blue;
border-bottom:2px solid gray;
border-left:2px solid red;
}
</style>border-radius ：设置圆盒子边框四个角的弧度
按照顺时针：左上角、右上角、右下角、左下角
eg：
<head>
<style>
#i1{
width: 300px;
height: 20px;
border: 5px pink solid;
display: block;
}
#i1{
border-radius: 10px;
border-radius: 0px 0px 30px 0px ;
padding: 20px ;
}
</style>
</head>
<body>
<ins id="i1"></ins>
</body>运行效果
（3）内边距
padding : 四个方向内边距(四个方向一起设置)
<style>
#img2{
padding: 10px 10px 10px 10px;
}
</style>单独设置：
- padding-top：上内边距
- padding-right：右内边距
- padding-bottom：下内边距
- padding-left：左内边距
（4）外边距
margin：四个方向一起设置外边距
ps：默认8px外边距，若要设置20px外边距，应减8px，则为12px
外边距始终是透明的（不受y背景填充颜色影响）
#img1{
margin: 22px 10px 11px 22px;
}单独设置：
- margin-top：上外边距
- margin-right：右外边距
- margin-bottom：下外边距
- margin-left：左外边距
以上内容可以制作：
参考代码：
<head>
<style>
#img1{ background-color: pink ;
width: 200px;
height: 200px;
border: 3px palevioletred dashed;
border-radius: 30px 0px 30px 0px ;
padding: 20px ;
margin: 22px ;
}
</style>
</head>
<body>
<img src="C:\Users\栗子\Desktop\web前端开发技术\2.jpg" id="img1">
</body>