两侧的外边距取最大值,外边距指的是最小外边距
.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 的组件