html之框模型
auto示例作业
点我查看
元素与框模型的关系
要正确的理解框模型，必须先把基础的html元素搞懂，先来说说元素，元素就是构成html最基础的东西，可以说没有元素就没有html。
元素
元素主要有以下几个东西构成：
| 序号 | 名称 | 作用 | 代码 | 属性 |
|---|---|---|---|---|
| 1 | margin |
外边框 | margin:auto |
设置元素与元素的距离 |
| 2 | border |
边框 | border: 1px solid red |
设置元素边框样式 |
| 3 | padding |
内边距 | padding:auto |
设置元素内边框距离 |
这是元素必有的属性，两个边距都可以设置上下左右的大小，虚实线，当我懂得了元素的基本概念后，对盒模型其实也差不多了。
盒模型
盒模型是什么：
用专业术语讲就是元素与边框的距离，最外层的是外边框，中间是边框，里面是内边距，这三样东西组成的框，就好比我们现实中的包装盒，两个包装盒中间的距离叫做外边距，包装盒叫做边框，物品与包装盒之间的距离叫做内边距，它们的关系就像盒模型一样，由此我们可以得出以下结论：
- 盒子模型 = 内容 + 内边距(pading)+边框(border)+外边距(margin)
总结
虽然今天学习的知识很简单，但言简意赅的道明了，在网页中最基本的元素关系，每个元素有一个看不见的框，框组成了网页的全部。