开发者学堂课程【CSS 快速掌握：盒子模型 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/611/detail/9191
盒子模型
内容介绍
一、盒子简介
二、范例
一、盒子简介
什么是盒子?
盒子是用来存储物品 sI-
思考一下:一个盒子是由哪些部分进行组成 !v 我们可以将一个盒子理解为一个快递的包裹:v
有内容+有填充物+纸盒子 v
那我们如何去理解 csS 中的盒子呢?“
在 css 中一个盒子的组成部分:内容 (content) +内填充 (padding) +边框(border) +外边距( margin) 一个盒子中的主要属性: width、height、padding、border、marginu
width: 指“宽度”的意思﹐但是这里的宽度指的盒子里面的内容的宽度―而不是盒子的宽刻
hegiht: 指“高度”的意思﹐但是这里的高度指的盒子里面的内容的高度而不是盒子的高度v
padding: 是“内填充”的意思，指的盒子里面的内容到盒子边框的距离
border:是“外边框”的意思指的盒子的边框
margin: 是“外边距”的意思指的是盒子与盒子之间的间距。
二、范例
问:请回答如何计算一个盒子的总宽度?,
一个盒子的总宽度=盒子里面内容的宽度+左右两边的填充+左右两边的边框线一个盒子的总高度=盒子里面内容的高度+上下两边的填充+上下两边的边框线
注意:一个盒子的高度一般情况下是不用设置的，因为一个盒子的高度它应该是由其内容来决定的。
