2018-02-27 CSS学习思路

media="print"
媒体查询的一种，表示这个样式是给打印机用的

image.png

按照原理2个div之间的margin加起来应该是10px+10px=20px，实际上则是10px，因为CSS抄袭了排版的情况，合并了，那么如何消除合并？

image.png

这个时候就没有合并
这个的问题就是：改border会动margin
如果这个border改为0像素，则又合并了
如果改为0.1px，则没有border（不显示），也不合并了
样式是display:table也可以不合并

image.png

display:flex也可以分开，不合并

image.png

outline不占位置，child的outline和parent的outline重合
这里，child超出范围了（加了margin）

image.png

加了一个border，parent的高度就变了，child的margin和多长出来的合并了
以上就是border影响margin

image.png

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

image.png

小圆点没有了

image.png

三、position: absolute V.S. display: inline

image.png

这个时候虽然写的display是inline的，但是实际计算出来的却是block样式
原因是position:absolute

四、position: fixed V.S. transform

image.png

相对于视口定位的

中间加很多代码

image.png

“内联样式”就不相对视口定位了

五、float影响inline元素

image.png

浮动元素是浮在child的上面，但是为什么“你好”不在左上角写呢？
因为浮动是做图文混排的，浮动元素当成图片，文字“你好”自动环绕着图片

学习易点
背套路
布局的常规套路

image.png
image.png

child的宽度不定的水平居中，两边加margin即可

image.png
前提是块级元素

如果是inline元素
在parent里写text-align:center

image.png
image.png

如果parent高度确定，那有难度

image.png

用工具
css3 generator

垂直居中的要点，尽量不要写父元素的高度