CSS 相关笔记（一）

我的CSS笔记: 链接菜鸟 https://www.runoob.com/css/css-tutorial.html

隐藏：

　　不占位不显示：display: none;

　　占位不显示：visibility: hidden;

　　透明度：opacity:0.4;

　　堆叠顺序：z-index:2;

鼠标：

　　鼠标事件失效：pointer-events:none;

　　禁止手势：cursor: not-allowed; (注意不能与pointer-events:none; 一起使用会把禁止手势也给整失效了)  layui 禁用class="layui-btn-disabled"

按分辨率调整：

　　@media screen and (max-width:1000px) {　} 

　　@media screen and (min-width:1000px) {　}

浮动：

　　清除浮动： clear: both;  

尺寸：

　　1em:当前字体尺寸 、1px :计算机上的一个点(1像素 )

其他：

　　缩进：text-indent: 2em; /*缩进两个字体大小*/

　　文本域禁止调整尺寸：resize: none;

　　显示成大写：text-transform: uppercase;

　　超长显示成...：

　　　　text-overflow: ellipsis;
　　　　white-space: nowrap;
　　　　overflow: hidden;

input只能输入数字: type="number"

下标样式：

　　标签_1233444555 

　　他的样式其实是 ：vertical-align: sub; font-size: smaller; 相反：vertical-align:super; 就是上标样式。

input 最多填写两个字：

maxlength="2"

 字间距调整：

letter-spacing: -6px;

 grid-area：指定开始显示项目的行 / 指定开始显示项目的列 / 指定停止显示项目的行线或要跨越的行数 / 指定停止显示项目的列线，或跨越的列数 

让字体竖着显示：

writing-mode: tb-rl;

宽度：自动填满剩余空间：

width:-webkit-fill-available

layui 特有

　　下拉选固定向下展示：

.layui-form-selectup dl {
    top: 42px;
    bottom: unset;
}

 

 微信小程序：

 显示在一行：view标签加样式 ：display: flex;

 阿里巴巴图标库：

https://www.iconfont.cn/

 从图片取颜色：

http://www.jiniannet.com/Page/allcolor

@