media="print"
媒体查询的一种，表示这个样式是给打印机用的
按照原理2个div之间的margin加起来应该是10px+10px=20px，实际上则是10px，因为CSS抄袭了排版的情况，合并了，那么如何消除合并？
这个时候就没有合并
这个的问题就是：改border会动margin
如果这个border改为0像素，则又合并了
如果改为0.1px，则没有border（不显示），也不合并了
样式是display:table也可以不合并
display:flex也可以分开，不合并
outline不占位置，child的outline和parent的outline重合
这里，child超出范围了（加了margin）
加了一个border，parent的高度就变了，child的margin和多长出来的合并了
以上就是border影响margin
padding也可以让parent变高
.parent{
display:inline-block;
width:100%;
background: green;
}
display也可以
.child{
height:100px;
border:solid red 1px;
margin-top:100px;
width:100%;
}
.parent{
display:flex;
width:100%;
background: green;
}
flex可以
.child{
height:100px;
border:solid red 1px;
margin-top:100px;
}
.parent{
display:table;
width:100%;
background: green;
}
display:table也可以
.child{
height:100px;
border:solid red 1px;
margin-top:100px;
}
.parent{
overflow:hidden;
width:100%;
background: green;
}
overflow:hidden;也可以
二、小圆点 VS display
小圆点没有了
三、position: absolute V.S. display: inline
这个时候虽然写的display是inline的，但是实际计算出来的却是block样式
原因是position:absolute
四、position: fixed V.S. transform
相对于视口定位的
中间加很多代码
“内联样式”就不相对视口定位了
五、float影响inline元素
浮动元素是浮在child的上面，但是为什么“你好”不在左上角写呢？
因为浮动是做图文混排的，浮动元素当成图片，文字“你好”自动环绕着图片
学习易点
背套路
布局的常规套路
child的宽度不定的水平居中，两边加margin即可
前提是块级元素
如果是inline元素
在parent里写text-align:center
如果parent高度确定，那有难度
用工具
css3 generator
垂直居中的要点，尽量不要写父元素的高度
