今日学习笔记

• • • 内外边距
      1. 外边距;margin-(方向);大小

Overfiow也可以实现同样的功能。

当两个数值起冲突时，上下冲突区最大值，左右冲突取和

1. 1. 1. 1. 内边距：padding：（方向）

设置后面积会变大，width=content+border+padding

• • • 盒子模型
  • box-sizing不设置为默认值。
  • content-box：设置border和padding均可以增加元素宽高。
  • 不想增加用border-box，会导致书写范围变小。
    • 位置position

不设置时为默认值，有填充。Display：inlink-block独占一行。有边框。

1. 1. 1. 1. static：默认存在，没有设置也存在，更改时整行整个移动。移动会被自动填充。
         2. relative：相对位置，以现有值为基准，可以使单个元素移动，即使被移动，但位置仍被占有，不会被自动填充。
         3. absolute：可以使第二条自动填充。移动时，以非static的块为基准。
         4. fixed：鼠标滚动位置也不会发生变化，以整个屏幕为基准，位置固定。
         5. sticky：粘滞性
      2. 浮动
         1. float：方向，特性：脱离文档流，空间释放
         2. clear：方向，清楚某个方向的浮动，both，全部清除。
      3. flex布局

改变排列方式，不设定就是默认值。

1. 1. 1. 1. display：flex所有子集变为一行
         2. flex-direction：row（行）-reverse（出现即为倒序）
         3. column：列
         4. flex-wrap：wrap换行（rap，不换行）
         5. flex-direction: column-reverse，从下往上排列
         6. justify-content：flex-start（end）左（右对其）