阿尔叭叭

用svg算出圆形path("M${width},${width/2}m-0,0a-${width/2},-${width/2}01,0-${width},0a${width/2},${width/2}01,0${width},0")如图所示，圆圈绕着转圈，本来可以用相对定位，但奈何要做成圆圈数量不固定，那就意味位置不能固定，需要计算。由于轨迹是个圆圈，紧贴着圆圈偏移，小圆整个模块会旋转，所以需要额外加transform转正。width为绕圈的宽度。...

css://body高度要撑开html,body{ min-height: 100%; height: 100vh;}//父级.box-fix{ min-height: 100%; display: flex; justify-content: space-between;}子级.main-left{ width: 210px; flex: 0 0 ...

感谢css3的技术发展，现在一些纯形状类的图像可以不用切成一张图片，而是可以用css3来绘制出一样的图形。

（参考原文https://css-tricks.com/centering-css-complete-guide/?utm_source=caibaojian.com）平时做居中，拿过来就做，全靠运气。知道很多种可以居中的办法，每次应用也是哪个可以实现就用哪个，今天有时间整理一下居中问题，不要再瞎猫碰死耗子了，遇到什么情况直接找到对应的方法。高效直接找到不同情境下的居中实现方法不是更好么。

Firefox@-moz-document url-prefix() { .cssSelector { font-size: 14px; }}Chrome@media screen and (-webkit-min-device-pixel-ratio:0) { #test1{color:red;}}IE6/7/8/9+

.box{ display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */ display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older We

今天遇到一个bug是底部明明有margin-bottom却无法作用，排查了一下改成用padding可以有效但不找出原因是无法完成这篇博客的问题概要描述：在safari中，当内容高度超出所有父容器时，内容的margin-bottom设置是无效的。解决这个问题的办法也很简单，只要规避这种超出所有父容器的内容即可。父容器不设置高度即可。另外尽量少用html, body {height: 100%;}这种...