什么是盒子模型

一.盒子模型简介

        盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

        影响盒子大小的元素：padding（内边距）margin（外边距）border（边框）内容（content）。

盒子模型与现实对比：

冰箱快递	盒子内容
冰箱	内容区（content）
纸箱子	边框（border）
泡沫	内边距（padding）
冰箱离你的距离	外边距（margin）

影响盒子大小的元素：内容区，边框，内边距 ，外边距不影响盒子的大小。

二.盒子模型-边框

        边框（border）元素设置边框

        边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部

        设置边框必须指定三个样式 分别是颜色，大小，样式

1.border-color: ; 设置边框的颜色

        (1)有默认值，默认颜色是黑色

        (2)可以写多个颜色  以空格隔开

颜色数量	颜色按顺序所占位置
4	上  右  下   左
3	上   左右   下
2	上下  左右
1	上下左右

        (3)border-xxx-color  特指top  right  bottom left某一边颜色

           

2.border-width: 设置边框的大小

            (1)默认值   默认值大概1-3px

            (2)也可以跟多个值  以空格隔开(图片名同上)

            (3)border-xxx-width 特指top  right  bottom left某一边宽度

3.border-style: ; 设置边框的样式

            (1)默认值  none

            (2)solid  实线

                dashed  虚线

                  dotted  点状虚线

                  double  双线

border简写:

         border:颜色，大小，样式;

三.盒子模型-内边距

内边距（padding）指的是内容区和边框之间的距离

        padding-top  上内边距    

        padding-right  右内边距

        padding-bottom 下内边距

        padding-left   左内边距

        padding:xxx;  简写可以跟多个值

        可以跟4个, 3个, 2个, 1个规则跟border-width一样