盒模型组成
先定义一个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进入控制台我们可以看到如图
蓝色部分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: 上下左右
648
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
