盒子模型的布局

盒子模型的布局

一、盒子模型概念

css将页面中的所有元素都设置为了一个矩形的盒子，将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置。也可以称为 盒模型、盒子模型、框模型（box model）。
每一个盒子都由几个部分组成：
内容区（content）
内边距（padding）
边框（border）
外边距（margin）

二、边框（border）

1、内容区（content）：元素中的所有的子元素和文本内容都在内容区中排列
内容区的大小由width 和 height 两个属性来设置
width：设置内容区的宽度
heigth：设置内容区的高度

2、边框（border）：边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部
边框的大小会影响整个盒子的大小，要设置边框，需要至少设置三个样式：
边框的宽度：border-width
边框的颜色：border-color
边框的样式：border-style
①边框的宽度： border-width可以用来指定四个方向的边框的宽度。
值的情况：
四个值：上࿰