#博学谷IT学习技术支持#

• 内容：content

    width和height默认设置的是内容部分的宽高

• 边框：border

• 单个的属性

1. 边框的粗细——border-width
2. 边框的样式——border-style（取值：实线solid；虚线dashed；点线dotted）
3. 边框的颜色——border-color

• 连写

1. 属性名——border
2. 属性值——width style color
3. 快捷键——bd + tab

• border的单方向设置

1. 属性名——border-方位名词（top，right，bottom，left）
2. 属性值：连写的属性值

• 盒子大小初级计算公式：盒子实际大小 = 内容（content）+ 边框（border）

• 内边距：padding

• 作用：控制边框与内容之间的距离
• 取值：一个值（上右下左）；两个值（上下，左右）；三个值（上，左右，下）；四个值（上，右，下，左）

记忆规则：先从上开始赋值，然后顺时针赋值，如果没有赋值的，看对面的。

• padding的单方向设置：padding-方位名词
• 盒子大小的终极计算公式：盒子实际大小 = 内容（content）+ 边框（border）+ 内边距 （padding）
• 不会撑大盒子的特殊情况：如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度。此时给子盒子设置左右的padding或者左右的border此时不会撑大盒子。
• css3的盒模型：自动内减（box-sizing:border-box）

• 外边距：margin

• 作用：控制边框以外盒子与盒子之间的距离

（二）取值：一个值（上右下左）；两个值（上下，左右）；三个值（上，左右，下）；四个值（上，右，下，左）

记忆规则：先从上开始赋值，然后顺时针赋值，如果没有赋值的，看对面的。

（三）margin的单方向设置：margin-方位名词

（四）margin的单方向应用

      1、水平方向

         A、margin-left：让当前盒子往右移动

         B、margin-right：让右边的盒子往右移动

     2、垂直方向

         A、margin-top：让当前的盒子往下移动      

B、margin-bottom：让下面的盒子往下移动

（五）去除标签默认的margin和padding，* {margin：0；padding：0；}

五、margin外边距折叠现象

   （一）margin的合并现象：垂直布局的盒子，此时上下的margin会合并

解决方法：只给其中一个盒子设置margin即可

   （二）margin的塌陷现象：互相嵌套的块级元素，父子元素的margin-top会被合并作用在父元素上

 解决方法：1、给父元素设置一个border-top或者padding-top；2、给父元素设置overflow：hidden；3、转换成行内块元素；4、设置浮动

六、总结

    今天对于盒子模型的分享就到这啦，接下来继续复习，大家一起加油呀！