css盒模型

css盒模型

content-box width = 内容宽度

border-box width = 内容宽度 + padding + border

border-box更好用；同时指定padding，width，border就知道了

面试答法：css盒模型有两种，一种是content-box另一种是border-box，区别是content-box宽度只包含content；而border-box的宽度包含到border，内边距，内容(去除border的两像素：outline)

• margin合并
  1. 哪些情况会合并：父子margin；兄弟margin
  2. 如何阻止合并：
  • 父子合并用padding/border挡住
  • 父子合并用overflow：hidden挡住
  • 父子合并用display：flex,不知道为什么
  • 兄弟合并是符号预期的
  • 兄弟合并可以用inline-block消除
  3. 总之要一条一条死记, 而且css的属性逐年增多,每年都可能有新的
• 基本单位:
  1. 长度单位：px像素；em相对于自身font-size的倍数；百分数；整数；rem；vw和 vh；其他
  2. 颜色：（用取色器）
     • 十六进制#FF6600或者#F60;
     • RGBA颜色rgb（0，0，0）或者如果rgba（0,0,0,1）;
     • hsl颜色hsl（360,100%,100%）;(色相，饱和度，亮度)