盒子模型（1）

想了好久感觉没啥可写的，所以就想着和学长他们一样写一个科普文，因为是第一次写科普文，写的不好的地方大家见谅。

    今天我们来聊一聊盒子模型，盒子模型可以说是HTML最重要的内容之一了，也是比较难懂的内容，我在此就稍微聊一聊我的理解。

  一，盒子模型的概念

一个盒子模型包括四个部分，由内到外依次是元素，内边距，边框，外边距，

1.元素就是想要填的内容，可以给个<p>标签加一段话，也可以给个<img>标签加个图片，甚至可以是         另一个盒子

2.内边距，内边距即元素与边框的距离，分上下左右四个方向

3.边框，边框包围着元素和内边距，分上下左右四个方向

4.外边距，外边距是该盒子距离其他元素或者盒子的距离，分上下左右四个方向

①元素

首先来说元素即内容区这个部分，内容区的大小由width(宽度)，height（高度）两个属性来决定

值得注意的是：如果不填width和heigh，则填入了内容则盒子被内容撑开

如图所示：box1和box2的内容区大小被它们的内容撑开，box3是设置了width和height的盒子

②内边距

首先来看一下设置了内边距和没有设置内边距的区别

可以看到，box2设置了padding：30px;，所以内容区和边框间上下左右距离增加了30px

应开发需求，可能上下左右内边距并不一样，则有以下设置规则

padding：1px 2px 3px 4px ;   

padding：1px 2px 3px  ;   

padding：1px 2px ;   

padding：1px  ;   

即padding：；里填入的值得个数决定了设置规则

（这个规则在边框以及外边距都适用）

③边框

首先看一下有边框和无边框的区别

border包含三个必要元素

border-width  边框宽度

border-color    边框颜色

border-style    边框样式  （边框宽度，颜色，样式都遵守上下左右的设置规则）

border有个简写方式即border：宽度 颜色 样式;一起设置，这样设置四周边框会一样，且宽度，颜色，样式三个元素的顺序可打乱

值得注意的是：设置了border后可见区变大了，也就是说border会增加可见区的大小，如果开发中想要进行对其等操作，需要在内边距和内容区进行相应减少

④外边距

外边距在开发中常用来改变盒子位置

margin-top：;会将盒子下移一定距离

margin-left：;会将盒子左移一定距离

margin-right：;一般情况下无任何效果

margin-bottom：；会将盒子下方的元素移动移动距离

可以看到上下左右不同的外边距效果是不一样的，开发时要注意

margin的简写形式和内边距的简写形式一样

    由于篇幅限制，今天对于盒子模型就先讲到这，第一次写科普文，错误的地方还请指出。