块级元素有宽度width, 行内元素没有宽度width,所以只能在块级元素上验证两者区别
设置当前盒模型是IE盒模型
设置children元素margin: 0
如果设置children元素margin: 0时,那么它们之间好像没什么区别
设置children元素margin: 0 30px
如果设置children元素margin: 0 30px时,width: 100%的元素宽度不变,
位置向左偏移30px;width: auto的元素宽度变化,宽度 = 父元素宽度 – 左边margin – 右边margin,
并且向左偏移30px
设置children元素margin: 0 -30px
如果设置children元素margin: 0 -30px时,width: 100%的元素宽度不变,位置向左偏移-30px;
width: auto的元素宽度变化,宽度 = 父元素宽度 – 左边margin – 右边margin,
并且向左偏移30px ,并且向左偏移-30px;
width: auto可以配合display: flex实现如下布局
children设置display: flex和margin: 0 -30px,红色块设置flex-grow:1和margin: 0
30px变成如下,间隔是60px的布局
在parent元素加上overflow: hidden后,变成