盒子模型

发布时间 2023-10-11 00:05:22作者: 故塔拉黑暗之神

内边距(padding)

1.一个值  上下左右一样

2.两个值   上下,左右

3.三个值   上,左右,下

4.四个值 上右下左

内边距特性:1.背景颜色可以蔓延到内边距

      2.可以设置单一方向(padding-top/left/right/bottom)

边框(border)

特性:1.背景色会蔓延到边框

   2.可以设置一个方向有边框(border-top/left/right/bottom)

   3.border-width/color可以设置每条边框的宽度,颜色

border:1px  solid  gray

样式:solid    实线

     doublue   两条线

    dashed   线段线

    dotted    点状线

外边距(margin)

特性:如果两个盒子是兄弟关系--垂直方向上的外边距取最大值

              --水平方向会进行合并处理

  如果两个盒子是父子关系,给子盒子设置外边距会设置给父盒子。解决办法:1.给父盒子加一个内边距,注意高度计算

                                    2.给父盒子设置边框(border:transparent,可以把边框设置为透明的),再给子盒子设置外边距

                                    3.给父盒子或者子盒子加入浮动

                                    4.给父盒子加入overflow:hidden(自动计算高度)

margin:{ 0,auto}可以让盒子上下边距为零,左右边距相等,使盒子居中