盒子模型（随笔）

一、组成

内容区域： content

内边距： padding

边框线：border

外边距：margin

二、内容

给content属性设置宽高-width/height，元素的内容区域是由宽度和高度组成的

三、边框线--border

1.单一属性：

边框线样式：border-style

取值：实线 solid 使用最多 虚线 dashed 点线 dotted

注意点： 在使用border属性的时候，一定要先写上border-style，这样边框线才会生效

边框线颜色： border-color 取值 和颜色相关的写法一致

边框线粗细：border-width 取值 数字+px

2.连写：

属性：border

属性值： style color width

注意点：属性之间没有顺序之分

理论上style不可以省略，其他的都可以，推荐三个属性都写上

当单一属性和连写属性同时出现的时候：：要么直接在连写上修改

要么把单一属性写到连写的后面

复习：目前学习过的连写：：font、background、border

3.border的单个方向：

属性：border-方位名词 左右上下边框线 left right top bottom

属性值：就是单个属性的合写 比如 border-top：5px solid red ；

4.盒子实际大小的是初级计算：

盒子实际大小 = 内容（content）+ 边框线（border）

水平方向 实际宽度 = 左边框线 + 内容宽度 + 右边框线

垂直方向 实际高度 = 上边框线 + 内容高度 + 下边框线

三、内边距--padding

1.属性：padding

2.作用：控制内容到边框的距离

3.取值：一个值 上下左右四个边都设置一样的值

两个值 上下一样 左右一样

三个值 上、左右一样、下

四个值 上、右、下、左是各自的值

4.规则： 1、顺序 从上边开始，依次是上、右、下、左，顺时针

               2、分配值 如果有值就直接分配

                    如果没值，就看对面，拿对面的值

5.padding单方向的设置： 属性： padding-方位名词 left right top bottom

6.注意点：如果padding的连写，遇到了padding单一方向的设置

要么直接在padding连写中改

要么将padding-方位名词写到padding连写的后面去

盒子实际大小的是终极计算：

盒子实际大小 = 内容（content）+ 边框线（border）+内边距（padding）

水平方向 实际宽度 = 左边框线 + 左内边距 + 内容宽度 + 右内边距 + 右边框线

垂直方向 实际高度 = 上边框线 + 上内边距 + 内容高度 + 下内边距 + 下边框线

CSS3盒子模型： 自动内减

属性：box-sizing:border-box;

优点：自动计算盒子实际大小

四、外边距-margin

1.属性：margin

2.作用：控制盒子和盒子之间的距离 外边距

3.取值（和padding一样）：一个值 上下左右四个边都设置一样的值

                                             两个值 上下一样 左右一样

                                             三个值 上、左右一样、下

                                             四个值 上、右、下、左是各自的值

4.规则： 1、顺序 从上边开始，依次是上、右、下、左，顺时针

               2、分配值 如果有值就直接分配

                    如果没值，就看对面，拿对面的值

5.margin单方向的设置：属性：margin-方位名词 left right top bottom

6.注意点：如果margin的连写，遇到了margin单一方向的设置

                 要么直接在margin连写中改

                 要么将margin-方位名词写到margin连写的后面去