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>

想要学习或者了解web前端编程的小伙伴,可以私信小编【学习】web前端海量知识分享，欢迎初学和进阶中的小伙伴。