meta文章1.窗口宽度其中width=device-width是设置窗口的宽度为设备窗口的宽度，也可以固定宽度，例如：width=640就是640px的宽度（常见于微信）；initial-scale=1.0:设置缩放比例为1.0；minimum-scale=1.0andmaximum-scale=1.0：最小缩放比例和最大缩放比例；user-scalable=no：禁止用户自由缩放，user-scalable默认值为yes。提示：刚才那个参数都有了，都是常用的。如果user-scalable=no，则不需要使用minimum-scale=1.0和maximum-scale=1.0来强制禁止缩放。2。自动识别格式content：telephone=no是禁止浏览器自动识别手机号，email=no是禁止浏览器从自动识别电子邮件。3.完成模板/>CSS文章主体{font-family:"HelveticaNeue",Helvetica,STHeiTi,sans-serif;/*使用无衬线字体*/}a,img{-webkit-touch-callout:none;/*禁止长按链接和图片弹出菜单*/}html,body{-webkit-user-select:none;/*禁止文本选择*/user-select:none;}button,input,optgroup,select,textarea{-webkit-appearance:none;/*去掉webkit默认的表单样式*/}a,button,input,optgroup,select,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);/*当a、input和button被点击时移除蓝色外边框和灰色半透明背景*/}input::-webkit-input-placeholder{color:#ccc;/*修改webkit中input的placeholder样式*/}input:focus::-webkit-input-placeholder{color:#f00;/*修改webkit中input焦点状态下的placeholder样式*/:#f00;/*修改webkit中input焦点状态下planholder样式*/}}body{{-webkit-text-size-adjust:100%！重要；/*IOS禁止调整字体大小*/-webkit-文本大小调整：100%！重要；/*禁止IOS调整字体大小*/}}input::-webkit-input-speech-button{::-webkit-input-speech-button{display:none;/*隐藏Android语音输入按钮*/:none;/*隐藏Android语音输入按钮*/}}Flex基础这里假设flex容器为.box，子元素为.item1.定义容器为flexlayout.box{display:-webkit-flex;/*webkit*/display:flex;}/*inlineflex*/.box{display:-webkit-inline-flex;/*webkit*/display:inline-flex;}2.containerstyle.box{flex-direction:row|行反转|栏目|列反转；/*主轴方向：从左到右（默认）|从右到左|从上到下|从下到上*/flex-wrap:nowrap|包装|换行；/*wrap:不换行（默认）|wrap|wrap和下面的第一行*/flex-flow:flex-directionflex-wrap|initial|inherit;/*弹性方向：行|行反转|栏目|列反转|初始|继承|默认值为“行”。*//*flex-wrap:nowrap|包装|换行|初始|继承|默认是“nowrap”。*//*initial将属性设置为其默认值。*//*inherit从父元素继承属性。*//*主轴方向和换行速记*/justify-content:flex-start|弹性端|中心|间隔|空间周围；/*主轴对齐：左对齐（默认）|右对齐|居中对齐|两端对齐|均匀分布*/align-items:flex-start|弹性端|中心|基线|拉紧;/*横轴对齐：顶部对齐（默认）|底部对齐|居中对齐|满|文本基线对齐*/align-content:flex-start|弹性端|中心|间隔|环绕空间|对齐和传播|上下均匀分布*/}3.子元素style.item{order:;/*排序：值越小，越靠前的行，默认为0*/flex-grow:;/*default0*//*Zoomin:default0（即如果有剩余空间，则不放大，如果值为1，则放大，2是1的两倍大小，以此类推on)*/flex-shrink:;/*default1*//*shrinkage:default1（空间不够就收缩，值为0则不收缩）*/flex-basis:|汽车;/*defaultauto*//*固定大小：default如果为0，可以设置px值或者百分比大小*/flex:none|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]/*flex-grow,flex-shrink和flex-basis的简写，默认值为01auto,*/align-self:auto|弹性启动|弹性端|中心|基线|拉紧;/*个体对齐：自动（默认）|顶部对齐|底部对齐|放置一个apple-touch-icon.png文件，当Apple设备将网站保存为书签或桌面快捷方式时，会使用该文件作为图标，推荐文件大小为：180px×180px2.自定义图标：3.定义浏览器点击行为：Call:020-10086SendSMSto:10086发送邮件：me@22278.club4.定义上传文件类型和格式在上面的文件上传框中，accept可以限制上传文件的类型，参数为image/是所有图片类型，点击弹出图库,您还可以指定图像格式。如果参数设置为image/png，可以限制图片类型为png；如果参数为video/，表示选择一个视频；accept还可以设置更多的文件格式，语法为accept="image/gif,image/jpeg";5.使用box-shadow改变（遮挡）表单自动填充后的黄色input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{box-shadow:inset0001000px#fff;}6.使用CSS实现省略号文本截断white-space:nowrap;text-overflow:ellipsis;兼容参考：[链接说明][1]7。用border画小三角形的原理是：上下边框和左右边框的连线实际上是一个斜角。利用这个特性，让一侧的边框透明，在另一侧写上想要的颜色，隐藏对面，就可以变成一个小箭头形状。边框宽度：10px10px10px0；//左箭头border-color:transparent#fff;border-style:solid;width:0;Tootipwriting:嗨！
/*--css--*/.box{位置：相对；填充：020px；宽度：380px；高度：80px；边界半径：8px；背景：#efefef；字体大小：18px；line-height:80px;}.box:after{position:absolute;顶部：50%；左：-15px；z-索引：1；显示：块；边距顶部：-15px；宽度：0；边框颜色：透明#efefef；边框样式：实心；边框宽度：15px15px15px0；内容：””;};
