阿毛Alex - CSS
type: channel
link: http://www.alexmao.com/index.php/category/CSS/
items: 全局隐藏滚动条
items: css横向排列自动换行
items: teleport ultra删除tppabs标签
items: MichaelPage网站UI
items: 常用PC端响应式媒体断点
items: css中解决外边距的重叠和父元素高度塌陷的问题
items: CSS居右对齐
items: 如何让box在页面居中
items: 实现点击收缩侧边导航栏的最简html/css代码
items: 如何用@media判断屏幕分辨率

全局隐藏滚动条
type: item
date: 2022-05-17T01:07:33+00:00
description: /* 全局隐藏滚动条样式 */ ::-webkit-scrollbar { width: 0 !important; } ::-webkit-scrollbar { width: 0 !important; height: 0; }

css横向排列自动换行
type: item
date: 2022-04-28T10:14:27+00:00
description: 参考文章

teleport ultra删除tppabs标签
type: item
date: 2022-02-18T13:11:58+00:00
description: tppabs="1+"用正则表达式全局搜索替换成空就可以了，参考文章。" ↩

MichaelPage网站UI
type: item
date: 2022-02-06T17:03:00+00:00
description: 一共有3套：小于768px768px-1180px大于1180px大于1180px，内容宽度是固定的1180px大于768px小于1180px，内容宽度就是固定的768px小于768px，内容宽度最小是415px，415-768之间，是100%

常用PC端响应式媒体断点
type: item
date: 2022-02-06T16:20:05+00:00
description: 点击这里

css中解决外边距的重叠和父元素高度塌陷的问题
type: item
date: 2021-10-20T14:38:00+00:00
description: 直接使用这个就可以：.clearfix::before .clearfix::after { content: ''; display: table; clear: both; }

CSS居右对齐
type: item
date: 2021-06-26T16:23:56+00:00
description: 通过一下css代码实现内容的居右对齐：.box { display: flex; justify-content: flex-end; }

如何让box在页面居中
type: item
date: 2021-06-26T15:53:00+00:00
description: 做登录界面的时候，需要让登录的box在页面中居中，除了之前提到的3种方法之外，今天又学到了一种。。.login_box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 这样就会居中了。

实现点击收缩侧边导航栏的最简html/css代码
type: item
date: 2021-06-19T16:14:00+00:00
description: 基本原理：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; }

如何用@media判断屏幕分辨率
type: item
date: 2021-06-09T03:19:00+00:00
description: 需求：根据不同的屏幕属性展示不同的CSS样式方案：使用@media判断方法：屏幕小于550px的屏幕：@media only screen and (max-width: 550px) { ... } 屏幕小于1000px的屏幕：@media only screen and (max-width: 1000px) { ... } 甚至可以根据不同屏幕指定两个不同的css文件： .... 参考资料：W3C SCHOOL