VSS 盒子学习

 

2022年3月2日：

边框：

（1）border：1px  solid(dashed  虚线) red;

（2）边框会影响盒子的大小

内外边距：

   1、内边距：

padding    上下左右 中   《top  right  bottom  left  center》

margin

   2、内容与盒子边框的距离

padding—top：10px  20px   30px   40px

  3、影响盒子大小的情况：

 

（1）会影响盒子的大小：

宽度与高度要减去多出来的内边距大小

（2）如果没有制定宽度或者高度，就不会撑开盒子

  外边距：

   margin    上下左右中《 e.g上方注释》

   1、

margin-top：10px  20px  30px  40px

   2、常用：

   使块级元素水平居中显示:

   (1)盒子必须制定宽度

 （2）盒子左右外边距设置为auto

   例如：margin ：0  auto

   是行内元素和行内块元素水平居中

   给其父级元素添加text-align：center

  3、镶嵌块元素的塌陷现象：

 （1）父级元素会取较大外边距的值

 （2）解决方案:

   1、可以给父级元素添加上边框

   2、可以给父级元素添加内边距

    padding：1px；值可以取任意大小

   3、可以给父级元素添加  overflow：hidden；

  清楚内外边距：

                        *{  padding：0；margin：0}

  对于行内元素来说，为了照顾兼容性，我们只设置左右内外边距，不要设置上下内外边距，但是转换为块级或者行内块后就可以设置了。