CSS垂直⽔平居中，display：flex，布局，⽂字属性的⼀些零碎
body的height不可少，如body{height:100%}，否则⼦元素会不认，如果⼦元素的⾼直接以百分⽐写的话，会不显⽰。因为识别不出来。 宽度则不会，因为浏览器的宽度是固定的，⾼度会滚，不固定。
2.
border-sizing其实是将默认的content-sizing转为了⽼ie的盒⼦模型
如果元素float 可以通过转为该模式，让多个元素在width相加===1时控制在⼀⾏上
3.
display:flex
弹性布局类似于word中的 按内容分布表格 的意思。按内容来⾃动分配。
为什么在body中定位会失效？
jusitify-content:Center 控制⽔平居中 没有问题
但align-items:center 控制垂直居中 就失效了
因为body没有控制⼤⼩和绝对定位！
body{
height: 100%;
width: 100%;
display: flex;
justify-content:center;
position: absolute;
align-items:center;
}
这⾥position 必须和height,width⼀起配合来⽤，哪个缺少，相应位置上的定位就达不到了。
如果是⼀个普通的div呢？
css设置文字垂直居中
div
{ width:300px;
height:230px;
background:yellow;
display:flex;
align-items:center;
justify-content:center;
}
p{
width:100px;
height:70px;
border:1px solid red;
}
完全可以，不⽤定位！
有没有margin, padding 不会影响居中的状态，仍然是居中，永远是居中。
去掉height , width之后，外框就变成了⼀个根据内容（⾥⾯的diva啊，啥啊，之类的）灵活变化⼤⼩的容器。（不重要：默认⼀般有margin没padding。）
4.
word-spacing属性只能⽤于p元素，div不认，同理letter-spacing
5.
vw 是viewport的宽度，vh是viewheight的⾼度
vmin,vmax是其最⼩值
vw, vh, vmin, vmax：IE9+局部⽀持，chrome/firefox/safari/opera⽀持，iOS safari 8+⽀持，Android browser4.4+⽀持，chrome for android39⽀持
6.
in firefox , we should set background-attachment as”fixed” to locate it.
7.
图⽚需要⽤px定位和指定⼤⼩，⽽包裹⽂字的div需⽤em, rem来控制
8.
background-size中，元素定位的其实不是⽗元素，⽽就是本⾝的div，⽐如：
显然，图⽚背景的100%是对应的它所在的div。
background-size, background-origin 都是针对图⽚，如果是颜⾊背景的话，都不适⽤。
直接写background属性的话，会重写之前的各分属性，最好先写个总的，再⼀个⼀个添加。
利⽤background-clip可以直接在div中呈现⼀个⽔平、垂直居中的⽅块:
div
{
width:300px;
height:300px;
padding:50px;
background-color:yellow;
background-clip:content-box;
border:2px solid #92b901;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。