/* 全局隐藏滚动条样式 */ ::-webkit-scrollbar { width: 0 !important; } ::-webkit-scrollbar { width: 0 !important; height: 0; }
tppabs="1+"用正则表达式全局搜索替换成空就可以了，参考文章。" ↩
css中解决外边距的重叠和父元素高度塌陷的问题
直接使用这个就可以：.clearfix::before .clearfix::after { content: ''; display: table; clear: both; }
通过一下css代码实现内容的居右对齐：.box { display: flex; justify-content: flex-end; }
做登录界面的时候，需要让登录的box在页面中居中，除了之前提到的3种方法之外，今天又学到了一种。。.login_box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 这样就会居中了。
实现点击收缩侧边导航栏的最简html/css代码
基本原理：navigation设置有宽度300pxmain设置有宽度cacl(100%-300px)，left左边距300px点击toggle div的时候，用js将navigation加上active状态，宽度改成60px，动画时间0.5s，同时，也将main的宽度改成calc(100%-60px), left左边距60px，同样动画时间这样就可以实现点击toggle div左边导航栏动画伸缩的效果了代码html部分： Document 代码css部分：* { margin: 0; padding: 0; box-sizing: border-box; font-family: arial; } body { overflow-x: hidden; } .container { position: relative; width: 100%; } .navigation { position: fixed; width: 300px; height: 100%; background: #003147; transition: 0.5s; overflow: hidden; } .navigation.active { width: 60px; } .main { position: absolute; width: calc(100% - 300px); left: 300px; min-height: 100vh; background: #f5f5f5; transition: 0.5s; } .main.active { width: calc(100% - 60px); left: 60px; } .main .topbar { width: 100%; background: #fff; height: 60px; display: flex; justify-content: space-between; align-items: center; } .toggle { position: relative; width: 60px; height: 60px; cursor: pointer; background-color: red; }
需求：根据不同的屏幕属性展示不同的CSS样式方案：使用@media判断方法：屏幕小于550px的屏幕：@media only screen and (max-width: 550px) { ... } 屏幕小于1000px的屏幕：@media only screen and (max-width: 1000px) { ... } 甚至可以根据不同屏幕指定两个不同的css文件： .... 参考资料：W3C SCHOOL