盒模型

CSS盒模型分两种，一种是content-box，一种是border-box，他们两个的区别是，content-box的宽度只包含content，border-box的宽度包含到border，分别有border、padding、content。

CSS盒模型分两种

分别是

  • content-box内容盒 -内容就是盒子的边界

  • border-box 边框盒 - 边框才是盒子的边界

    公式

  • content-box width =内容宽度

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

    哪个好用

  • border-box好用

  • 如果不指定padding、width、border这两个东西就看不出来什么区别

    margin合并

    只有上下重叠，左右从来不重叠
    image.png

    哪些情况会合并

  • 父子margin合并

image.png

  • 兄弟margin合并

image.png

如何阻止合并

margin和margin合并的前提是他们之间什么都没有

  • 父子合并用padding /border挡住
  • 父子合并用overflow：hidden挡住
  • 父子合并用display：flex，不知道为什么
  • 兄弟合并是符合预期的
  • 兄弟合并可以用display:inline-block消除

image.png

  • CSS属性逐年增加，每年都可能有新的

    基本单位

    长度单位

  • px 像素

  • em 相对于自身font-size的倍数
  • 百分数
  • 整数
  • rem

  • vw和vh

    颜色

  • 十六进制#FF6600或者#F60

  • RGBA颜色rgb（0，0，0）
  • rgba(0,0,0,1) a表示是否透明
  • hsl颜色 hsl（360，100%，100%）或者hsla

    练习

    ```html <!DOCTYPE html> 

  1. ```css
  2. * {
  3.   box-sizing: border-box;
  4.   margin:0;
  5.   padding:0;
  6. }
  7. body {
  8.   background: #fff;
  9. }
  10. .rainbow {
  11.   height: 200px;
  12.   overflow: hidden;
  13. }
  14. .rainbow div {
  15.   overflow: hidden;
  16. }
  17. .rainbow >div {
  18.   width: 400px;
  19.   height: 400px;
  20.   background: red;
  21.   border-radius: 50%;
  22. }
  23. .rainbow >div>div {
  24.   background: #f58d1f;
  25.   height: 380px;
  26.   margin: 10px;
  27.   border-radius: 50%;
  28. }
  29. .rainbow >div>div>div {
  30.   background: #ffff01;
  31.   height: 360px;
  32.   margin: 10px;
  33.   border-radius: 50%;
  34. }
  35. .rainbow >div>div>div>div {
  36.   background:#30c333;
  37.   height: 340px;
  38.   margin: 10px;
  39.   border-radius: 50%;
  40. }
  41. .rainbow >div>div>div>div>div {
  42.   background: hsl(180, 80%, 50%);
  43.   height: 320px;
  44.   margin: 10px;
  45.   border-radius: 50%;
  46. }
  47. .rainbow >div>div>div>div>div>div {
  48.   background: hsl(240, 80%, 50%);
  49.   height: 300px;
  50.   margin: 10px;
  51.   border-radius: 50%;
  52. }
  53. .rainbow >div>div>div>div>div>div>div {
  54.   background: hsl(300, 80%, 50%);
  55.   height: 280px;
  56.   margin: 10px;
  57.   border-radius: 50%;
  58. }
  59. .rainbow >div>div>div>div>div>div>div>div {
  60.   background: hsl(360, 80%, 100%);
  61.   height: 260px;
  62.   margin: 10px;
  63.   border-radius: 50%;
  64. }

image.png