CSS 内外边距，盒子模型，位置，浮动

两侧的外边距取最大值,外边距指的是最小外边距

.div-inner {
    width: 100px;
    height: 100px;
    background-color: darkred;
    margin-bottom: 20px;
}

.div-inner-2 {
    width: 100px;
    height: 100px;
    background-color: darkgreen;
    margin-top: 30px;
}

所以一般定义的时候都定义下边距，一般情况出现在上下，左右是没有问题的

---

定义在同一行用float 属性

.div-inner {
    width: 100px;
    height: 100px;
    background-color: darkred;
    float: left;
    margin-right: 20px;
}

.div-inner-2 {
    width: 100px;
    height: 100px;
    background-color: darkgreen;
    float: left;
    margin-left: 20px;
}

左右就是相加的，与上下情况不同

所以我们定义的话，只定义一侧，不要两侧都定义，不然会比较难记

---

内边距

元素的大小是和内边距相关的，元素的宽度和高度会加上内边距

div的宽度=content+padding+border 这是每个元素的真实宽度，这是默认的

百分比是不论是高度还是宽度，都是父元素宽度的百分比

---

盒子模型

默认都是content box，div的宽度=content+padding+border 这是每个元素的真实宽度，这是默认的

box-sizeing 默认是content-box 就是我们默认的模式

与之对应的是border-box，盒子的大小完全固定住了，我们增加边距不会改变大小

inline-block 会一个一个水平摆，在竖直摆

---

z-index只能改变属性值为relative 的组件