1. box-sizing： 改变盒模型的方式
  • 正常盒模型: content-box

正常盒模型：改变border，paading值时，盒子的大小也会改变。

  • 怪异盒模型：border-box

改变border值，padding值的时候不影响整个盒子的大小。

.box{ box-sizing:border-box;}

2. position: 定位
  1. static 默认
  2. relative 相对定位

特点：

  1. 只给元素添加relative方式，不会对当前元素和其他元素产生任何影响。
  2. 不会使当前元素脱离文档流，位置会保留
  3. 不影响其他元素的特性
  4. 方向的偏移操作是相对于当前这个自身元素的位置
    1. absolute 绝对定位

特点：

  1. 只给当前元素添加absolute方式，当前元素位置不变，但是脱离了文档流。
  2. 如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移
  3. 使内联元素支持宽高，但元素还是内联元素
  4. 块元素不写width的时候，使块元素的宽由内容撑开，但元素还是块元素。
  5. 组合的情况：嵌套结构，如果祖先元素有定位模式（relative,absolute,fixed）的时候，当前元素就以这个祖先元素进行定位的偏移，如果所有的祖先元素都没有定位模式，那么当前元素就以文档进行偏移。
    1. fixed : 固定定位
  6. 脱离文档流的
  7. 方向是相对于整个文档（整个页面）发生偏移，不会有组合的情况存在。

3.跟定位配合的样式

下面这些值必须配合定位才会起作用，如果没有定位，这些样式没有任何意义。
left : 正值会向右偏移，负值会向左偏移。
right : 正值会向左偏移，负值会向右偏移。
top : 正值会向下偏移，负值会向上偏移。
bottom : 正值会向上偏移，负值会向下偏移。
z-index : 定位元素默认后者层级高于前者。
值越大层级越高，默认是一个0，可以写正数也可以写负数。

4 .定位层级

z-index（定位元素默认后者层级高于前者）
z-index：0 默认0，可以是正值也可以是负值