盒模型组成
先定义一个class名为box的盒子,定义宽、高、外边距、内边距、边框。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 100px;
height: 100px;
padding: 10px;
border: 5px solid red;
margin: 10px;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
打开浏览器f12进入控制台我们可以看到如图
![](https://i-blog.csdnimg.cn/blog_migrate/ecd4465da2def2380db569656717bfe8.png)
蓝色部分content:是元素的宽和高
border:是盒子的边框
Padding:是元素的内边距
margin:是元素的外边距
使用方法
border
border:粗细 样式 颜色;
例:border: 3px solid red;(宽3像素红色实线边框)
border-color:单独设置边框颜色
border-width:单独设置边框大小
border-style:单独设置边框样式
可选值:
solid:实线
dashed:虚线
double:双线
dotted:点线
border-top/right/bottom/left:单独设置上、右、下、左的边框样式
padding
padding: 上 右 下 左;
例:padding:1px 2px 3px 4px;(上内边距1像素右内边距2像素下内边距3像素左内边距4像素)
padding: 上 右/左 下
padding: 上/下 左/右
padding: 上下左右