HTML之框模型

html之框模型

auto示例作业
点我查看

元素与框模型的关系

要正确的理解框模型，必须先把基础的html元素搞懂，先来说说元素，元素就是构成html最基础的东西，可以说没有元素就没有html。

元素

元素主要有以下几个东西构成：

序号	名称	作用	代码	属性
1	margin	外边框	margin:auto	设置元素与元素的距离
2	border	边框	border: 1px solid red	设置元素边框样式
3	padding	内边距	padding:auto	设置元素内边框距离

这是元素必有的属性，两个边距都可以设置上下左右的大小，虚实线，当我懂得了元素的基本概念后，对盒模型其实也差不多了。

盒模型

盒模型是什么：

用专业术语讲就是元素与边框的距离，最外层的是外边框，中间是边框，里面是内边距，这三样东西组成的框，就好比我们现实中的包装盒，两个包装盒中间的距离叫做外边距，包装盒叫做边框，物品与包装盒之间的距离叫做内边距，它们的关系就像盒模型一样，由此我们可以得出以下结论：

• 盒子模型 = 内容 + 内边距(pading)+边框(border)+外边距(margin)

总结

虽然今天学习的知识很简单，但言简意赅的道明了，在网页中最基本的元素关系，每个元素有一个看不见的框，框组成了网页的全部。