CSS盒子模型（内容区、边框、内外边距）

一、盒子模型

1、什么是盒子模型、为什么要设置盒子模型，盒子模型具体怎么构成，怎么设置？

把各种元素布局到页面，就像想买个桌子，放到家里，要知道桌子的大小，形状，然后才能放到家里所以我们把所有的元素都想成盒子，矩形。

2、盒子模型：就是将页面所有的元素都统一设置为一个个盒子，一个个矩形，在布局时，就不用考虑元素的形状，只需要考虑元素的大小，大大的方便了页面的布局

3、 盒模型、盒子模型、框模型（box model）

快递

内容区（content） 放具体内容 冰箱

内边距（padding） 泡沫

边框 （border） 纸箱子

外边距（margin） 快递离你的距离

影响盒模型大小是：内容区、内边距、边框

外边距不会影响到盒子的大小

二、内容区(content)

内容区：元素中所有的子元素和文本内容都在内容区中排列，默认情况下，设置的width、height就是内容区的大小

div{
          width: 200px;
          height: 200px;
          background-color: #bfa;
        }

三、边框（border）

1、边框（border）元素 ： 设置边框边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部

2、边框三个样式

（1）border-width 设置边框大小

（a）可以跟多个值，值与值之间用空格隔开

四个值 上 右 下 左

三个值 上 左右 下

二个值 上下 左右

一个值 上下左右

（b）可以单独设置某一边宽度

border-XXX-width:;

XXX可以是 top（上） right（右） left （左） bottom（下）

（c）有默认值，默认值大小是1-3px

（2）border-style 设置边框的样式

（a）可选值：

solid 实线

double 双线

dotted 圆点虚线

dashed 虚线

（b）可以单独设置某一边的样式

border-XXX-style: ;

XXX可以是 top（上） right（右） left （左） bottom（下）

（c）没有默认样式，设置边框必须要设置

（3）border-color 设置边框的颜色

（a）可以放多个颜色值 四个，三个，两个，一个

规则跟border-width是一样的

（b）可以单独设置某一边颜色

border-XXX-color: ;

XXX可以是 top（上） right（右） left （左） bottom（下）

（c）有默认值，默认值是黑色

3、border简写

(1)、 border: 边框的大小 边框的样式 边框的颜色;

三个参数以空格隔开，不分先分后顺序

（2）单独设置某一边边框

border-xxx:边框的大小 边框的样式 边框的颜色;

XXX可以是 top（上） right（右） left （左） bottom（下）

(3):border:none;去除边框

4、用border设置小三角

div {
        width: 0px;
        height: 0px;
        border: 10px solid orange;
        border-color: transparent transparent green transparent;
        border-top: none;
      }

四、内边距（padding）

1、内边距（padding）：内容区和边框之间的距离，它会影响到盒子的大小

2、分别给每边设置内边距

padding-top: ;

padding-right: ;

padding-bottom: ;

padding-left: ;

3、padding简写

padding后可以写多个值

4个值

3个值

2个值

1个值

规则跟之前讲的border-width是一样

五、外边距（maring）

1、外边距 margin：外边距指的是当前盒子与其他盒子之间的距离，它不会影响可见框的大小，而是会影响到盒子的位置。

2、盒子有四个方向的外边距：

margin-top

上外边距，设置一个正值，元素会向下移动

margin-right

默认情况下设置margin-right不会产生任何效果

margin-bottom

下外边距，设置一个正值，其下边的元素会向下移动，挤别人

margin-left

左外边剧，设置一个正值，元素会向右移动

外边距也可以指定为一个负值，如果外边距设置的是负值，则元素会向反方向移动

（注意）由于页面中的元素都是靠左靠上摆放的，所以当我们设置上和左外边距时，会导致盒子自身的位置发生改变，而如果是设置右和下外边距会改变其他盒子的位置（挤别人）

3、外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,规则和padding一样

六、圆角边框（border-radius）

1、border-radius 属性：可以实现任何元素的“圆角”样式

2、border-radius 属性实际上是以下属性的简写属性：分别定义每一个角

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

3、border-radius 属性可以接受一到四个值。规则如下：

四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）

三个值 - border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角）

两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）

一个值 - border-radius: 15px;（该值用于所有四个角，圆角都是一样的）