自己平时收集的css、html笔记(适合初级前端攻城狮)
实习了一年时间,陆陆续续记录下来一堆笔记,不过也丢失了一些... 以后会持续更新、扩展,现在把碰到的知识点归纳于此,方便翻阅
一、html部分
1.取消iPhone自动识别数字为拨打号码
<meta name = "format-detection" content = "telephone=no">
2.移动开发、响应式布局
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes"/>
二、css部分
1.字母强制大写
text-transform: uppercase;
2.解决iPhone中overflow:scroll;滑动速度慢或者卡的问题
-webkit-overflow-scrolling: touch;
3.防止复制,兼容主流浏览器
-moz-user-select : none;
-webkit-user-select: none;
4.固定背景图片
background-attachment: fixed;
5.去除iphone input默认样式
input {
-webkit-appearance:none;
}
-webkit-appearance 可用于渲染input风格,多用于移动端,有兼容性问题,请自行百度
6.设置表格的边框合并为一个单一的边框
border-collapse:collapse;
7.添加(显示)IOS下滚动条
.box::-webkit-scrollbar{
-webkit-appearance: none;
width: 14px;
height: 14px;
}
.box::-webkit-scrollbar-thumb{
border-radius: 8px;
border: 3px solid #fff;
background-color: rgba(0, 0, 0, .3);
}
8.文字超出部分省略号隐藏
.box{
width: 200px;
/** 单行显示隐藏 **/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/** 多行显示隐藏 **/
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 3; /** 显示的行数 **/
overflow: hidden; /** 隐藏超出的内容 **/
}
9.设置表格布局(我都不知道为什么我的笔记.txt里面会有这个...)
table{
table-layout:fixed;
}
10.如果想鼠标移动上去时显示被隐藏的文本内容,可以设置
.box:hover {
text-overflow:inherit;
overflow:visible;
}
11.css实现选中checkbox,文字内容颜色变化
<style> .tgl-light + .tgl-btn { background: #f0f0f0; border-radius: 2em; padding: 2px; -webkit-transition: all .4s ease; transition: all .4s ease; } .tgl-light + .tgl-btn:after { border-radius: 50%; background: #fff; -webkit-transition: all .2s ease; transition: all .2s ease; } .tgl-light:checked + .tgl-btn { background: #9FD6AE; } </style> <div class='tg-list-item'> <input class='tgl tgl-light' id='cb1' type='checkbox'> <label class='tgl-btn' for='cb1'>11111111111</label> </div>
以上有些是复制别人博客的内容,具体是哪些大神,由于我是直接复制到我的txt文件上的,所以请见谅没标明转载,以后碰到了会注明的