html盒模型基础。

一、        引入

1. 在网站中的制作过程中，会把整个页面划分结构，让开发具有层次性，在后期也方便更新和维护。
2. 划分的结构会形成一个一个的板块，这样划分出来的一块一块的板块我们简称为盒子。把划分出来的整个网站盒子结构也就叫做盒模型。
3. 在了解盒模型的基础上，可以更好的去排版网页结构，方便编写网站的界面。

二、        盒子的布局介绍

把整个网页的主体结构（html）可以看做一个大的盒子（也称之为容器），每个容器都由元素内容 + 内边距 （padding） +边框 （border） +外边距（margin）组成为一个整体。

注：一般情况下 浏览器默认的margin值是8px

盒模型属性的介绍

1.padding 内边距

2.margin 外边距

3.border 边框

第一个内边距 padding （也叫做内填充）。内填充，顾名思义这个元素属性是长在盒子内部的一个属性，长在盒子内部的属性同时它也是会占据盒子空间的一个属性。

例如：

我们给div 宽度和高度都是100px  由于添加了padding50px 则会占据盒子的空间使盒子撑大到200px   padding一个属性值得时候是会在盒子内部四周都添加50px的范围。

Padding的属性值用法：

        padding:一个值   四周都padding

        padding:两个值   上下    左右

        padding:三个值   上  左右  下

        padding:四个值   上右下左

                  注：padding的值不可以为负数

 

第二个 margin 外边距 同样顾名思义 它是长在盒子外面的一个属性，它和内边距不同的是它长在盒子外面，所以不会占据盒子里面的内容。一般来控制两个盒子之间的距离。

如下所示：

运行结果如下显示：

 

 

 

 

由于没有边框border 没有内边距 box1在四周都添加了100px的外边距

外边距的属性值用法：

                   margin:一个值   四周

​        margin:两个值   上下   左右

​        margin:三个值   上  左右  下

​        margin:四个值   上右下左

注：margin的值可以为负数

 

第三个  边框 border  边框是元素内容的保护壳一样 是在元素内容的外侧

如图所示：

 

 

 

运行结果如下：

 

 

 

 

 

 

在盒子的四周形成了20px的边框。

Border的三个属性值分别代表什么意思。

第一个值代表边框的大小多少像素。

第二个值代表的是边框的类型。边框有多种类型

                                            solid 实线

​                    dashed 虚线

​                    dotted 点状线

​                    double  双线

​                    none 没有线条

第三个值代表边框颜色 这里是一种常用的复合写法

border: 20px solid  #000;

属性拆分：

​        border-width:   边框大小

​        border-color:   边框颜色

​        border-style:   边框类型

 

单独一个方向设置边框：

​        border-left:10px solid red;

​        border-right:10px solid red;

​        border-bottom:10px solid red;

​        border-top:10px solid red;

 

 

border-width/color/style :

​            属性值：

​                1个值： 四周都添加边框

​                2个值： 上下    左右

​                3个值：  上    左右    下

​                4个值：  上 右 下 左