border在盒子模型中的设定
是一个环型，也是一个线型。
环型表示border无法像content一样用宽高描述，它只能分为上（top）、下（bottom）、左（left）、右（right）四部分。
但是border又是一个线型，所以它的四条边只能表示粗细，且需要保持大小一致。
border的边是区分内外的
border的四条边是区分内外的。主要是用来给margin和padding用。
padding是，content和border内边的距离。
margin是，其他元素border外边和本元素border外边的距离。
border是元素的盒子模型中最外层区域吗？
不是，在border区外面，还有margin区
对于padding区理解
============
什么是padding
简称：内边距
即content和border四边（内边）的距离。
padding在盒子模型中的设定
是一个环型。
环型表示padding无法像content一样用宽高描述，它只能分为上（top）、下（bottom）、左（left）、右（right）四部分。
但是padding又和border不同，因为padding的四部分不能称为边，因为这四部分主要是用来控制content在border内的位置。
padding对于content位置控制的理解
padding控制content的位置，是相对于border四条边的位置。
一般用样式属性：
padding-top 控制content和border top边间的距离
padding-bottom 控制content和border bottom边的距离
padding-left 控制content和border left边的距离
padding-right 控制content和border right边的距离
padding的概念虽然是距离，如果以0为基准的话，距离也可以看成移动。
如果将content相对于border的初始水平位置看成是0px，那么比如padding-left:30px，就可以看成content相对于border从0px，水平向右移动了30px。
体现为反语义移动，即padding-left 是向右移动，padding-top是向下移动
padding的增大，会导致整个元素的直观感受增大
为什么叫直观感受呢？
主要是对比margin增大，其实margin增大，也会导致元素增大，因为margin也是盒子模型一部分。但是由于margin在border外面，所以margin增大，不会影响border区内部增大，而padding区在border内部，所以padding区增大会导致border区内增大。在网页上直观感受就是元素变大了。
上图中box1,box2的盒子模型宽度，其实都是400px
padding可以是负数吗？
前面content,border的宽高，粗细不能为负数，因为这些东西物理上不存在负数概念。
但是padding的概念是距离，如果以0为基准的话，距离也可以看成移动。
如果将content相对于border的初始水平位置看成是0px，那么比如padding-left:30px，就可以看成content相对于border从0px，水平向右移动了30px。
同理padding-left:-30px，可以看成是content相对于border从0px，水平向左移动了30px。
但是我们知道content区是不能超出border区的，而padding-left:-30px会让content逃离border区，所以padding不允许负数。
对于margin的理解
什么是margin
简称外边距
即 本元素border外边 和 【父元素，兄弟元素】的border外边 的距离
margin在盒子模型中的设定
是一个环型。
环型表示margin无法像content一样用宽高描述，它只能分为上（top）、下（bottom）、左（left）、右（right）四部分。
margin和padding的相同点
margin和padding的增大都会导致元素整体增大，只是padding在border区内体现更直观。
margin和padding都可以通过控制自身大小，来改变内部区域位置。
如padding改变，就会导致本元素content相对于本元素border位置改变
margin改变，会导致本元素border区相对于其他元素的border区位置改变
margin和padding的不同点
改变位置的参照物不同
margin改变的是本元素相对于其他元素的位置
padding改变的是本元素内部content相对本元素的位置
margin对于元素的位置控制
一般用如下样式属性：
margin-top 相对于父元素、兄弟元素的border top边的距离
margin-bottom 相对于父元素、兄弟元素的border bottom边的距离
margin-left 相对于父元素、兄弟元素的border left边的距离
margin-right 相对于父元素、兄弟元素的border right边的距离
和padding一样，这些属性虽然概念是距离，但是也可以看成是移动，且体现为反向移动。
margin-top:20px 表现为相对于父元素，兄弟元素的border top边，垂直向下移动20px
margin可以是负数吗？
前面的padding不能是负数，原因是会导致content逃离border区。
盒子模型规定了content必须在border内。
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
资料领取方式：戳这里免费获取
lCoPEF.jpg" />
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
资料领取方式：戳这里免费获取
