开发者学堂课程【前端开发CSS基础：CSS 盒子模型_标准盒子 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/361/detail/4261
CSS 盒子模型_标准盒子
内容介绍：
一、盒子模型
二、内边距: padding
三、边框: border
四、外边距: margin
一、盒子模型
盒子模型的内容包括：content 内容、padding 内边距、border 边框、margin 外边距。
盒子模型分类:
标准盒：正常盒模型、怪异盒模型。
伸缩盒：新、旧。
二、内边距：padding
内边距在 content 外，边框内
属性 |
描述 |
padding |
设置所有边距 |
padding-bottom |
设置底边距 |
padding-left |
设置左边距 |
padding right |
设置右边距 |
padding-top |
设置上边距 |
创建新的文件，命名为 box 。盒子模型如下：
<！DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title></title>
<style>
*{
padding：0；
Margin：0；
}
div{
width: 100px;宽度
height:100px;高度
background-color： red;盒子颜色设置为红色
padding：20px；
}
</style>
</head>
<body>
<div>hahaha</div>
</body>
</html>
三、边框: border
属性 |
描述 |
border-width |
边框宽度 |
border-style |
边框样式 |
border-color |
边框颇色 |
border-radius |
设置圆角边框 |
box-shadow |
设置对象阳影 |
border image |
边框背景图片 |
<！DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title></title>
<style>
*{
padding：0；
Margin：0；
}
div{
width: 100px;宽度
height:100px;高度
background-color： red;盒子颜色设置为红色
padding：20px；
border：5px solid blue；宽度为5px，实线，颜色为蓝色。
}
四、外边距: margin
1、围绕在内容边框的区域就是外边距，外边距默认为透明区域。
2、外边距接受任何长度单位、百分数值。
属性 |
描述 |
margin |
设置所有边距 |
margin-bottom |
设置底边距 |
margin-left |
设置左边距 |
margin-right |
设置右边距 |
margin-top |
设置上边距 |
注意∶外边距合并。
<！DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title></title>
<style>
·shoebox{
width: 220px;
height:220px;
background-color： aquamarine；
}
·shoe{
width: 200px;
height:200px;
background-color： brown；
}
</style>
</head>
<body>
<div class =“shoebox”>
<div class =“shoe”>
审查元素，鞋盒大小变成了 260*260，多出的 40 是 padding 内边距，padding 会自动撑开盒子大小。不需要改变高度和宽度。
