千锋前端浠浠呀老师HTML+CSS教程，零基础web前端开发入门必看视频

CSS盒模型

页面中任意一个元素都可以看成是一个盒子，通常习惯将div当成是一个盒子

 盒子的组成：

        内容

          content（css中设置的宽高）

        内边距

          padding

        边框

          border

        外边距

          margin

      内边距：元素内容到边框之间的距离，就是内边距

        padding：

          取值：

            padding:v1; --------------- 四个方向添加相同内边距

            padding:v1 v2; --------------- v1:上下   v2：左右

            padding:v1 v2 v3; --------------- v1:上  v2：左右  v3:下

            padding:v1 v2 v3 v4; --------------- v1:上  v2：右  v3:下  v4:左

          给具体某一个方向设置内边距：

            padding-方向词

              方向词：top/right/bottom/left

        元素添加内边距特点：

          1、背景颜色会蔓延到内边距上

          2、元素添加边距会把盒子撑大

      外边距：元素边框到边框之间间距（边框以外的距离）

        margin：

          取值：

            margin:v1; --------------- 四个方向添加相同外边距

            margin:v1 v2; --------------- v1:上下   v2：左右

            margin:v1 v2 v3; --------------- v1:上  v2：左右  v3:下

            margin:v1 v2 v3 v4; --------------- v1:上  v2：右  v3:下  v4:左

          给具体某一个方向设置内边距：

            margin-方向词

              方向词：top/right/bottom/left

      盒子宽度计算 = 内容宽 + 左右内边距 + 左右边框 + 左右外边距

      盒子高度计算 = 内容高 + 上下内边距 + 上下边框 + 上下外边距