Box-sizing 中的content-sizing 和 border-sizing

时间:2021-05-12 21:08:47

声明

本文属于作者的笔记部分,如有错误,欢迎指出,作者将尽快改正,写博客的目是想把自己的笔记分给大家,让它发挥作用,同时巩固自己的知识。

bootStrap中的content-sizing

在bootStrap中的box-sizing默认是content-sizing。

  • width=content的宽度,不会因为padding的值而缩小,而是让padding向外挤;
  • 盒子的宽度=margin+width+padding+border,即设置内外边距或者边框都会增加盒子的宽度。

另一个border-sizing

  • width=pading+content+border的宽度,即增加内边距或者边框会向内挤,占据content的位置。
  • 盒子宽度=width+margin的宽度,只有设置margin的时候才会增加box的宽度,padding和border只会占据width的值。